hyperframes-creative

Name: hyperframes-creative
Author: heygen-com

162kinstalls3.5kforks

How to install hyperframes-creative?

heygen-com/hyperframes/hyperframes-creative

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

Installs into the current project.

Summary

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

Files · 1

View on GitHub

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

People who liked this also viewed

6 picks

Type

hyperframes-creative

162kinstalls3.5kforks

View on GitHub

How to install hyperframes-creative?

heygen-com/hyperframes/hyperframes-creative

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

Installs into the current project.

Summary

Files · 1

View on GitHub

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

People who liked this also viewed

6 picks

Type