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, deterministic animation, and framework-owned media playback — and violating any rule produces silent render failures that lint and validate do not catch. ## Core Features & Use Cases - Composition Contract: Defines the root element, data-* attributes, class="clip" visibility rules, track overlap rules, and the single paused GSAP timeline registered on window.__timelines. - Sub-Composition Wiring: Documents the template transport rule, host-id matching, per-instance variables, and the three cross-file pitfalls that break renders. - Determinism & Validation: Lists banned patterns (render-time clocks, unseeded randomness, repeat: -1) plus a lint/validate/inspect/snapshot checklist before rendering. - Use Case: You need to build a 30-second product video as a modular HyperFrames project with scene sub-compositions, root-level audio, and a seekable GSAP timeline that renders identically frame by frame. ## Quick Start Read this skill before writing any composition HTML, then scaffold a minimal standalone composition and verify it with npx hyperframes lint, validate, and inspect.
