hyperframes-read-first
Installation
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 needclass="clip"; GSAP timelines are paused and registered onwindow.__timelines; deterministic logic only — noDate.now()/Math.random()/ network) is not duplicated here — it lives in/hyperframes-core. Read that before writing composition HTML.