What problem does it solve? Building HTML-based video compositions requires a repeatable dev loop: scaffolding projects correctly, catching layout and timeline errors before rendering, and producing final MP4 or WebM output. This Skill guides the full HyperFrames CLI workflow so you avoid broken renders, text overflow, and environment misconfiguration. ## Core Features & Use Cases - Project Scaffolding: Run npx hyperframes init with templates like blank, warm-grain, or kinetic-type, with options for video, audio, Tailwind v4, and non-interactive CI mode. - Validation & Visual Inspection: Use lint to catch missing composition IDs and overlapping tracks, and inspect to detect text overflowing bubbles, containers, or the canvas in headless Chrome. - Preview & Render: Serve hot-reloading previews on a custom port and render MP4/WebM output with quality, fps, Docker reproducibility, and parametrized variable overrides. - Use Case: After authoring a composition with speech bubbles, run npx hyperframes inspect --json to get agent-readable overflow findings, fix them, then render a final 60fps high-quality MP4. ## Quick Start Ask the AI to scaffold a new HyperFrames project with the warm-grain template, lint it, and render a draft-quality MP4.
