What problem does it solve? Building a video composition in HyperFrames requires strict structural rules — data-* timing attributes, clip visibility, track layout, sub-composition wiring, and deterministic animation — and violating them produces silent render bugs that automated checks miss. This Skill encodes that contract so compositions render correctly the first time. ## Core Features & Use Cases - Composition structure rules: Standalone vs sub-composition root forms, sized roots, one paused GSAP timeline per composition registered on window.__timelines, and host-id matching requirements. - Timing and editing contracts: data-start/data-duration/data-track-index semantics, clip visibility windows, and copyable recipes for cuts, trims, reorders, retiming, freezes, crossfades, and audio ducking. - Determinism and validation gates: Bans on render-time clocks, unseeded randomness, and infinite repeats, plus a check → snapshot → preview → render validation workflow. - Use Case: When asked to build a 30-second modular video with three scenes and background music, use this Skill to structure index.html with sub-composition slots, keep audio on a separate track, and pass npx hyperframes check before rendering. ## Quick Start Use the hyperframes-core skill to scaffold a minimal renderable composition and validate it with npx hyperframes check.
