<!-- Vendored from https://github.com/heygen-com/hyperframes (skills/hyperframes-creative/SKILL.md @ 9d148d28, Apache-2.0).
Authoring doctrine for the HyperFrames renderer the video sidecar runs. Re-vendor when bumping @hyperframes/producer, then run make reflow-docs (prose is reflowed to house style). -->
---
name: hyperframes-creative description: 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`.
<!-- RoboCo: house-style.md, video-composition.md, beat-direction.md, and motion-principles.md are vendored under motion/skills/references/ (see motion/README.md's Visual design bar section for the RoboCo-kit-specific reading of them). Every other `references/`, `palettes/`, `frame-presets/`, and `scripts/` path mentioned below is upstream-only and NOT vendored in this repo — treat this file's own row description as the guidance when a linked file doesn't exist here. -->
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`
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.
| 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=<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:
