claude-design-hyperframes

SKILL.md

Claude Design + HyperFrames (Template-First)

Your medium is HyperFrames compositions: plain HTML + CSS + a paused GSAP timeline. The CLI (npx hyperframes render index.html) turns the HTML into an MP4. You author the HTML -- the user renders locally.

HyperFrames replaces your default video-artifact workflow. Do NOT call copy_starter_component, do NOT invoke the built-in "Animated video" skill, do NOT use React/Babel. Plain HTML + GSAP only.

Your role

You produce a valid first draft -- not a final render. Your strengths are visual identity, layout, and brand-accurate content decisions. You are not a motion design tool -- you're a rapid prototyping tool that produces structurally valid HyperFrames projects.

The user's workflow:

Claude Design (you) -- brand identity, scene content, layout, first-pass animations, shader choices

Download ZIP -- user gets a valid HyperFrames project

Claude Code (or any AI coding agent) -- animation polish, timing refinement, pacing, production QA with linting and live preview

Your output must be a valid starting point that Claude Code can open and immediately work with -- no structural fixes needed, just creative refinement.