What problem does it solve? Writing HTML-based video compositions for HyperFrames requires following a strict contract — data-* timing attributes, clip tracks, sub-composition wiring, and deterministic seekable animation — and violating silent rules produces blank frames or unstyled renders that linting tools do not catch. ## Core Features & Use Cases - Composition Contract: Defines the root element requirements, data-start/data-duration/data-track-index timing model, class="clip" visibility rules, and the single paused GSAP timeline registered on window.__timelines. - Sub-Composition Architecture: Explains monolithic vs modular project layouts, <template> transport rules, host-id matching, per-instance variables, and media placement at the host root. - Determinism & Validation Rules: Lists non-negotiable bans (render-time clocks, unseeded randomness, repeat: -1, display/visibility animation) plus a lint/validate/inspect/snapshot/render checklist. - Use Case: An agent authoring a 30-second product video splits it into intro, body, and outro sub-compositions, wires them into a thin index.html orchestrator with root-level audio, and validates each frame before rendering. ## Quick Start Read this skill before writing any composition HTML, then scaffold a minimal standalone composition and run npx hyperframes lint, validate, and inspect to confirm it passes.
