Skills

Skill 22 of 34

Hyperframes Creative

Non-animation creative direction for HyperFrames videos.

2 minutes · 485 words · 4 sections

Install

$ npx skills add heygen-com/hyperframes --skill hyperframes-creative

$ npx skills add heygen-com/hyperframes

» /plugin marketplace add heygen-com/hyperframes

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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 (opens in a new tab) — 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 from the repo root with explicit paths, for example:

python skills/hyperframes-creative/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.

About this skill

Trigger

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`.

The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source

github.com/heygen-com/hyperframes, branch main, last pushed 24 September 2026.

Licence

Apache-2.0 — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

34 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. 3 distinct layouts observed: .agents/skills/*/SKILL.md, registry/blocks/*/SKILL.md, skills/*/SKILL.md.

Duplicates collapsed

6 mirror copies folded into their canonical skill — republished for Claude. Copies match on content hash and on position once a leading per-agent prefix is stripped, because the same skill is routinely shipped under a dozen agent directories with a dozen different hashes.

Issue colours

Resolved from a design.md in this repository — hue 293°, chroma 0.190. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Removed “HyperFrames Creative”, a leading h1 that duplicated the skill title.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Marketplace

A plugin manifest is published at .claude-plugin/marketplace.json by HeyGen, declaring 2 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /heygen-com/hyperframes.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

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 (opens in a new tab) — 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.

Run from the repo root with explicit paths, for example:

python skills/hyperframes-creative/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.

Hyperframes Creative

Workflow

Routing

Scripts

Boundaries

About this skill

Trigger

Colophon

Hyperframes Creative

Workflow

Routing

Scripts

Boundaries

Appendix 22.1–22.72

ReferencesMarkdown · 16 files

Scripts4 files

AssetsHTML · 1 file

Also bundled57 files

About this skill

Trigger

Colophon

Appendix 22.1–22.72

ReferencesMarkdown · 16 files

Scripts4 files

AssetsHTML · 1 file

Also bundled57 files