What problem does it solve? Authoring video compositions in HyperFrames requires strict adherence to a technical contract: correct data-* timing attributes, a single paused GSAP timeline registered under the right key, framework-owned media playback, and deterministic rendering rules. Violating any of these produces silent bugs, lint errors, or blank renders that are hard to diagnose. ## Core Features & Use Cases - Composition structure guidance: Covers standalone vs sub-composition root forms, modular orchestrator patterns, host wiring, and naming conventions for multi-scene projects. - Timing and media rules: Documents data-start, data-duration, data-track-index, relative clip references, video/audio placement, volume automation, and editing recipes (cuts, trims, crossfades, freeze frames). - Validation workflow: Defines the lint, snapshot, preview, and render checklist so compositions pass npx hyperframes check before rendering. - Use Case: You need to build a 30-second modular video with intro, body, and outro scenes plus background music. This Skill tells you exactly how to wire the sub-composition slots, register timelines, and avoid the lint errors that break a first build. ## Quick Start Read this Skill before writing any HyperFrames composition HTML, then validate the result with npx hyperframes check.
