← ClaudeAtlas

hyperframes-corelisted

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
Sma1lboy/rove · ★ 141 · AI & Automation · score 81
Install: claude install-skill Sma1lboy/rove
# HyperFrames Core HyperFrames renders video from HTML. A composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. This is the **composition contract** — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in `references/` (index next), read on demand. Other concerns live in sibling sections of the same skill — `../cli` (dev loop) and `../registry` (install blocks / components) — and in the sibling design skills, `/hyperframes-motion` (animation recipes) and `/hyperframes-design` (palettes, typography, frame presets). The capability map in `../SKILL.md` says what each one covers. ## References | File | Read it to… | | ------------------------------------ | ------------------------------------------------------------------------------------------------- | | `references/minimal-composition.md` | start from the smallest renderable composition skeleton | | `references/composition-patterns.md` | choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype | | `references/data-attributes.md` | look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"` | | `references/tracks-and-clips.md`