hyperframes-creative

Install this skill with its sibling skills. See runtime setup and capability boundaries before executing commands. User instructions and the requested production stage take precedence over workflow defaults.

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, a designed density curve, one active focal point, and produced detail only when it earns a slot.

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.

Then, for any anchor / hero / awe-inspiring piece — read the direction layer:

• references/cinematic-direction.md — the directorial doctrine: the six-regularity Spine, the Effort Protocol (the forcing function against the lazy competent default), the Awe Test, the substrate / externalization / receiver-runway doctrines, the Canvas · Artifact · Cinema ownership lanes, the visual vocabulary, and the scene-review diagnostics. This is the difference between a composition that is correct and one a viewer screen-records. It also spells out The HyperFrames Unlock: advanced runtimes are available, while authored subject/world quality and good judgment remain the real cost.
• references/cinema-layer.md — the Cinema-Layer vocabularies (charged transitions, atmosphere, 3D moves, lens personality, hand-drawn, diegetic UI, recursive shots, video-arc drift, post-fx cookbook) with HyperFrames HTML/CSS/SVG/GSAP/Three.js implementation hints.

Read video-composition.md + house-style.md for the floor (don't ship web-page output). Read these two for the ceiling (ship something overwhelmingly good). Cold opens, thesis reveals, hero product beats, act opens/closes, closing images — open cinematic-direction.md before you shotlist.

When a piece feels like "elegant slides" — competent, well-rendered, inert — read references/visual-storytelling.md, the film-craft companion lens (Block / Murch / Williams-Disney / McCloud / Mamet / Katz / Mascelli / McKee). It supplies the concrete levers the doctrine lacks: the visual-intensity curve, the Rule of Six + flinch test for cuts, timing-vs-spacing for alive motion, the six panel-to-panel transitions, shape-to-emotion grammar, and the value-turn audit (if a scene doesn't turn a value, it's a non-event — cut it). The "elegant PPT" feeling is almost always a deficit in the temporal/relational layers, not the surface.