Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
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
- 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 — resolve and load per that doc.
- 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
- For multi-scene work, plan beats and rhythm before writing HTML →
references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
- 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, source-traceable visuals |
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=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
Run with explicit paths, for example:
python <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>
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.
1---2name: "hyperframes-creative"3description: "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`."4metadata:5 source: https://skillmd.com/skills/rghrmkr1993/hyperframes-creative6---78**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.910# HyperFrames Creative1112Brand, pacing, style, narration, and composition direction. Use after the technical contract from `hyperframes-core` is in place.1314For motion patterns, scene blueprints, transitions, and CSS marker effects, use `hyperframes-animation` — this skill is intentionally non-animation.1516> **Read these two FIRST for any non-trivial composition — they override web instincts:**17>18> - `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_.19> - `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.20>21> 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.2223## Workflow24251. 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.262. If no design spec exists and the user asks for visual direction, choose a route:27 - Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)28 - Named style or mood → `references/visual-styles.md`29 - Fast defaults → `references/house-style.md`30 - Interactive selection → `references/design-picker.md`313. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`.324. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules.3334## Routing3536| Topic | Read |37| ------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |38| Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` |39| Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` |40| Named style presets, mood-to-style routing | `references/visual-styles.md` |41| Palette-specific color tokens | `palettes/*.md` |42| Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` |43| Stats / infographic presentation | `references/data-in-motion.md` |44| Structured expansion for open-ended prompts | `references/prompt-expansion.md` |45| Video-medium density, scale, color, frame composition | `references/video-composition.md` |46| Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` |47| Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` |48| High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` |49| Font selection, pairings, rendered-video type guardrails | `references/typography.md` |50| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals | `references/story-spine.md` |51| Script pacing, tone, openings, number pronunciation | `references/narration.md` |52| Precomputed audio bands mapped to motion | `references/audio-reactive.md` |5354## Scripts5556- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames.57- `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions.58- `scripts/package-loader.mjs` — support script for bundled creative tooling.5960`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.6162Run with explicit paths, for example:6364```bash65python <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>66```6768Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/scripts/`.6970## Boundaries7172- Do not override `hyperframes-core` technical rules.73- Do not require a design system for a minimal technical composition.74- Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.75- Keep recipe references task-specific; do not read every reference for simple edits.
