# Hyperframes Creative > Dirección creativa no relacionada con la animación para vídeos de HyperFrames: especificaciones de diseño (frame.md / design.md), paletas, tipografía, narración, beats, visuales reactivos al audio y decisiones de marca. Fuente: https://skillsagentes.com/skills/calesthio/openmontage/hyperframes-creative Markdown: https://skillsagentes.com/skills/calesthio/openmontage/hyperframes-creative.md Repositorio: https://github.com/calesthio/OpenMontage Autor: calesthio Licencia: AGPL-3.0 Actualizado: el mes pasado Coste de contexto: 78 tok instalada, 1.4k tok al activarse, 256k tok con todos los archivos del bundle Bundle: 67 archivos, 1000 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent claude-code # Cursor npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent cursor # Codex npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent codex # Gemini CLI npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent gemini # Windsurf npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent windsurf # Cline npx -y skills add calesthio/OpenMontage --skill hyperframes-creative --agent cline ``` ## Qué hace - Cubre la dirección creativa de los vídeos de HyperFrames que no es animación - Gestiona las especificaciones de diseño `frame.md` y `design.md` - Trata paletas, tipografía, narración y planificación de beats - Cubre visuales que reaccionan al audio, patrones de composición y decisiones de marca y estilo ## Cuándo usarla - Hay que definir o aplicar una especificación de diseño de un vídeo de HyperFrames - Se decide paleta, tipografía o estilo de marca - Se planifican los beats o la narración de un vídeo ## Cuándo no - Patrones de movimiento atómicos y blueprints de escena: usa `hyperframes-animation` ## Qué la activa - "Define la paleta y la tipografía de este vídeo" - "Planifica los beats de esta narración" - "Haz que los visuales reaccionen a la música" ## Antes de instalar - Necesita en el PATH: python - Variables de entorno: BOOTSTRAP_CONFIRM_ENV - makes network requests - reads environment config ## Archivos - SKILL.md — 5 KB - frame-presets/biennale-yellow/FRAME.md — 17 KB - frame-presets/biennale-yellow/caption-skin.html — 8 KB - frame-presets/biennale-yellow/frame-showcase.html — 34 KB - frame-presets/blockframe/FRAME.md — 16 KB - frame-presets/blockframe/caption-skin.html — 8 KB - frame-presets/blockframe/frame-showcase.html — 38 KB - frame-presets/blue-professional/FRAME.md — 17 KB - frame-presets/blue-professional/caption-skin.html — 8 KB - frame-presets/blue-professional/frame-showcase.html — 38 KB - frame-presets/bold-poster/FRAME.md — 16 KB - frame-presets/bold-poster/caption-skin.html — 9 KB - frame-presets/bold-poster/frame-showcase.html — 32 KB - frame-presets/broadside/FRAME.md — 16 KB - frame-presets/broadside/caption-skin.html — 8 KB - frame-presets/broadside/frame-showcase.html — 33 KB - frame-presets/capsule/FRAME.md — 17 KB - frame-presets/capsule/caption-skin.html — 8 KB - frame-presets/capsule/frame-showcase.html — 42 KB - frame-presets/cartesian/FRAME.md — 17 KB - frame-presets/cartesian/caption-skin.html — 8 KB - frame-presets/cartesian/frame-showcase.html — 35 KB - frame-presets/claude/FRAME.md — 20 KB - frame-presets/claude/caption-skin.html — 8 KB - frame-presets/claude/frame-showcase.html — 43 KB - frame-presets/cobalt-grid/FRAME.md — 17 KB - frame-presets/cobalt-grid/caption-skin.html — 9 KB - frame-presets/cobalt-grid/frame-showcase.html — 46 KB - frame-presets/coral/FRAME.md — 19 KB - frame-presets/coral/caption-skin.html — 8 KB - frame-presets/coral/frame-showcase.html — 36 KB - frame-presets/creative-mode/FRAME.md — 19 KB - frame-presets/creative-mode/caption-skin.html — 8 KB - frame-presets/creative-mode/frame-showcase.html — 38 KB - frame-presets/daisy-days/FRAME.md — 17 KB - frame-presets/daisy-days/caption-skin.html — 8 KB - frame-presets/daisy-days/frame-showcase.html — 41 KB - frame-presets/editorial-forest/FRAME.md — 17 KB - frame-presets/editorial-forest/caption-skin.html — 8 KB - frame-presets/editorial-forest/frame-showcase.html — 36 KB - palettes/bold-energetic.md — 417 B - palettes/clean-corporate.md — 410 B - palettes/dark-premium.md — 389 B - palettes/jewel-rich.md — 394 B - palettes/monochrome.md — 454 B - palettes/nature-earth.md — 399 B - palettes/neon-electric.md — 380 B - palettes/pastel-soft.md — 392 B - palettes/warm-editorial.md — 411 B - references/audio-reactive.md — 3 KB - references/beat-direction.md — 13 KB - references/composition-patterns.md — 6 KB - references/data-in-motion.md — 1 KB - references/design-adherence.md — 1 KB - references/design-picker.md — 12 KB - references/design-spec.md — 10 KB - references/house-style.md — 5 KB - references/motion-principles.md — 9 KB - references/narration.md — 3 KB - references/prompt-expansion.md — 6 KB - references/typography.md — 14 KB - references/video-composition.md — 4 KB - references/visual-styles.md — 12 KB - scripts/contrast-report.mjs — 12 KB - scripts/extract-audio-data.py — 6 KB - scripts/package-loader.mjs — 8 KB - templates/design-picker.html — 43 KB ## SKILL.md Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés. # HyperFrames Creative Brand, pacing, style, narration, and composition direction. Use after the technical contract from `hyperframes-core` is in place. For motion patterns, scene blueprints, transitions, and CSS marker effects, use `hyperframes-animation` — this skill is intentionally non-animation. > **Read these two FIRST for any non-trivial composition — they override web instincts:** > > - `references/house-style.md` — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a _concept_. > - `references/video-composition.md` — video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene). > > Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML. ## Workflow 1. If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence `frame.md` → `design.md` → `DESIGN.md`) and how to parse it (frontmatter = normative, prose = context) are defined once in [`references/design-spec.md`](references/design-spec.md) — resolve and load per that doc. 2. If no design spec exists and the user asks for visual direction, choose a route: - Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`) - Named style or mood → `references/visual-styles.md` - Fast defaults → `references/house-style.md` - Interactive selection → `references/design-picker.md` 3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`. 4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules. ## Routing | Topic | Read | | ------------------------------------------------------------------------ | ---------------------------------------------- | | Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | | Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | | Named style presets, mood-to-style routing | `references/visual-styles.md` | | Palette-specific color tokens | `palettes/*.md` | | Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | | Stats / infographic presentation | `references/data-in-motion.md` | | Structured expansion for open-ended prompts | `references/prompt-expansion.md` | | Video-medium density, scale, color, frame composition | `references/video-composition.md` | | Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | | Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | | High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | | Font selection, pairings, rendered-video type guardrails | `references/typography.md` | | Script pacing, tone, openings, number pronunciation | `references/narration.md` | | Precomputed audio bands mapped to motion | `references/audio-reactive.md` | ## Scripts - `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames. - `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions. - `scripts/package-loader.mjs` — support script for bundled creative tooling. Run from the repo root with explicit paths, for example: ```bash python skills/hyperframes-creative/scripts/extract-audio-data.py ``` Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/scripts/`. ## Boundaries - Do not override `hyperframes-core` technical rules. - Do not require a design system for a minimal technical composition. - Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion. - Keep recipe references task-specific; do not read every reference for simple edits. ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz. - [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad. - [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id. - [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma. - [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)