# Hyperframes Creative > Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`. Source: https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-creative Repository: https://github.com/heygen-com/hyperframes Author: heygen-com License: Apache-2.0 Updated: hace 24 días Context cost: 78 tok installed, 1.5k tok once triggered, 298.7k tok with every bundled file Bundle: 78 files, 1.1 MB Permissions requested: none declared ## Install ```bash npx -y skills add heygen-com/hyperframes --skill hyperframes-creative --agent claude-code ``` ## What it does - Gestiona dirección creativa no relacionada con animación para vídeos HyperFrames: paletas, tipografía, narración, ritmo de beats y composición - Lee y aplica specs de diseño (frame.md / design.md / DESIGN.md) tratando el frontmatter como verdad de marca - Enruta a referencias específicas según la tarea: house-style, visual-styles, beat-direction, narration, audio-reactive, etc. - Ofrece scripts para reportar contraste en frames renderizados y extraer bandas de audio para composiciones audio-reactivas ## Use it when - Se necesita dirección visual, de marca o de estilo tras tener listo el contrato técnico de hyperframes-core - No existe spec de diseño y el usuario pide dirección visual (estilo, mood, paleta) - Se planifica trabajo multi-escena, ritmo de beats o narración - Se trabaja con visuales audio-reactivos o presentación de datos/infografías ## Don't bother when - Para patrones de movimiento atómicos y blueprints de escena (usar hyperframes-animation en su lugar) ## What triggers it - "Necesito definir la paleta y tipografía de este vídeo HyperFrames" - "Ayúdame a planear los beats y el ritmo de una composición multi-escena" - "Quiero convertir estos datos en una infografía animada con audio-reactive visuals" - "Elige un estilo visual para este frame según el mood 'corporate energético'" ## Before you install - Requiere que el contrato técnico de hyperframes-core ya esté definido antes de aplicar dirección creativa. - Needs on PATH: python - Environment: BOOTSTRAP_CONFIRM_ENV, HYPERFRAMES_SKILL_BOOTSTRAP_DEPS, VERSION_OVERRIDE_ENV ## Files - SKILL.md — 6 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/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/code-editorial/FRAME.md — 20 KB - frame-presets/code-editorial/caption-skin.html — 8 KB - frame-presets/code-editorial/fonts/EBGaramond-400.woff2 — 21 KB - frame-presets/code-editorial/fonts/EBGaramond-700.woff2 — 23 KB - frame-presets/code-editorial/fonts/Inter-400.woff2 — 23 KB - frame-presets/code-editorial/fonts/Inter-700.woff2 — 24 KB - frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 — 21 KB - frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 — 21 KB - frame-presets/code-editorial/fonts/OFL-eb-garamond.txt — 4 KB - frame-presets/code-editorial/fonts/OFL-inter.txt — 4 KB - frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt — 4 KB - frame-presets/code-editorial/frame-showcase.html — 43 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/story-spine.md — 3 KB - references/typography.md — 14 KB - references/video-composition.md — 4 KB - references/visual-styles.md — 12 KB - scripts/contrast-report.mjs — 21 KB - scripts/extract-audio-data.py — 6 KB - scripts/package-loader.mjs — 13 KB - scripts/package-loader.test.mjs — 3 KB - templates/design-picker.html — 43 KB ## SKILL.md Reproduced verbatim from heygen-com/hyperframes under Apache-2.0. This section is the upstream document and is in English. # 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 scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count. > > 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` | | Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.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. `contrast-report.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly. 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. --- Skills Agentes — https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-creative