What problem does it solve? Producing polished video content normally requires dedicated editing software and manual timeline work. This Skill lets you author videos as HTML files — using data attributes for timing, GSAP timelines for animation, and CSS for styling — so an AI agent can generate title cards, captions, overlays, audio-reactive visuals, and multi-scene compositions programmatically. ## Core Features & Use Cases - Composition Authoring: Build standalone and sub-compositions with data-attribute timing, track indexes, parametrized variables, and per-instance overrides rendered via the HyperFrames CLI. - Motion & Transitions: Apply GSAP entrance choreography, velocity-matched CSS transitions, and shader transitions between scenes, with hard rules preventing jump cuts and broken timelines. - Captions & Audio-Reactive Visuals: Sync word-level captions to transcripts, generate TTS-driven narration layouts, and map pre-extracted audio frequency bands to visual properties like scale and glow. - Design System Enforcement: Read design.md brand tokens, pick from 8 named visual styles, and validate output with lint, WCAG contrast audits, layout inspection, and an animation-map script. - Use Case: Ask for a 30-second product launch video — the Skill picks a visual style, plans scene rhythm, writes the HTML composition with staggered entrances and shader transitions, then validates contrast and choreography before rendering. ## Quick Start Ask the agent to create a short product launch video composition in HyperFrames HTML with a title card, animated stats, and captions synced to your audio file.
