hyperframes-read-first

SKILL.md

HyperFrames — read this first

Start here for any HyperFrames task — especially with no project agent config (CLAUDE.md / AGENTS.md / .cursorrules) present. Capability map + video router below.

Capability map — which skill for which intent

You want to…
Go to

Make a video (from a URL, brief, topic, GitHub PR, existing footage, or a single element to animate)
the video router below (§ Video routing)

Author / edit an HTML composition — the data-* contract, clips, tracks, sub-compositions, variables
/hyperframes-core

Animate — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)
/hyperframes-animation

Creative direction — design.md, palettes, typography, narration, beat planning, audio-reactive
/hyperframes-creative

Media preprocessing — TTS voiceover, background music, transcription, background removal, captions
/hyperframes-media

CLI dev loop — init, lint, validate, inspect, preview, render, publish, doctor
/hyperframes-cli

Install registry blocks / components (hyperframes add)
/hyperframes-registry

The composition authoring contract (every timed element needs data-start / data-duration / data-track-index; timed elements need class="clip"; GSAP timelines are paused and registered on window.__timelines; deterministic logic only — no Date.now() / Math.random() / network) is not duplicated here — it lives in /hyperframes-core. Read that before writing composition HTML.

What HyperFrames cannot do — check this first