hyperframes-creative
byheygen-com· 46 skills
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.
How to install hyperframes-creative?
heygen-com/hyperframes/hyperframes-creative
$npx -y skills add heygen-com/hyperframes --skill hyperframes-creativeInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-creative"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # HyperFrames Creative |
| 2 | |
| 3 | Brand, pacing, style, narration, and composition direction. Use after the technical contract from `hyperframes-core` is in place. |
| 4 | |
| 5 | For motion patterns, scene blueprints, transitions, and CSS marker effects, use `hyperframes-animation` — this skill is intentionally non-animation. |
| 6 | |
| 7 | > **Read these two FIRST for any non-trivial composition — they override web instincts:** |
| 8 | > |
| 9 | > - `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_. |
| 10 | > - `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. |
| 11 | > |
| 12 | > 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. |
| 13 | |
| 14 | ## Workflow |
| 15 | |
| 16 | 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. |
| 17 | 2. If no design spec exists and the user asks for visual direction, choose a route: |
| 18 | - Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`) |
| 19 | - Named style or mood → `references/visual-styles.md` |
| 20 | - Fast defaults → `references/house-style.md` |
| 21 | - Interactive selection → `references/design-picker.md` |
| 22 | 3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`. |
| 23 | 4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules. |
| 24 | |
| 25 | ## Routing |
| 26 | |
| 27 | | Topic | Read | |
| 28 | | ----------------------------------------------------------------------------- | ---------------------------------------------- | |
| 29 | | Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | |
| 30 | | Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | |
| 31 | | Named style presets, mood-to-style routing | `references/visual-styles.md` | |
| 32 | | Palette-specific color tokens | `palettes/*.md` | |
| 33 | | Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | |
| 34 | | Stats / infographic presentation | `references/data-in-motion.md` | |
| 35 | | Structured expansion for open-ended prompts | `references/prompt-expansion.md` | |
| 36 | | Video-medium density, scale, color, frame composition | `references/video-composition.md` | |
| 37 | | Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | |
| 38 | | Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | |
| 39 | | High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | |
| 40 | | Font selection, pairings, rendered-video type guardrails | `references/typography.md` | |
| 41 | | Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.md` | |
| 42 | | Script pacing, tone, openings, number pronunciation | `references/narration.md` | |
| 43 | | Precomputed audio bands mapped to motion | `references/audio-reactive.md` | |
| 44 | |
| 45 | ## Scripts |
| 46 | |
| 47 | - `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames. |
| 48 | - `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions. |
| 49 | - `scripts/package-loader.mjs` — support script for bundled creative tooling. |
| 50 | |
| 51 | `contrast-report.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly. |
| 52 | |
| 53 | Run from the repo root with explicit paths, for example: |
| 54 | |
| 55 | ```bash |
| 56 | python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file> |
| 57 | ``` |
| 58 | |
| 59 | Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/scripts/`. |
| 60 | |
| 61 | ## Boundaries |
| 62 | |
| 63 | - Do not override `hyperframes-core` technical rules. |
| 64 | - Do not require a design system for a minimal technical composition. |
| 65 | - Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion. |
| 66 | - Keep recipe references task-specific; do not read every reference for simple edits. |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
