HyperFrames Design

Brand, pacing, style, 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-motion — 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 density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).

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