Agent skill · software engineering · aiskillstore
hyperframes-core
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. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
Why this skill is useful
Provides specific guidelines and patterns for building HyperFrames projects that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 skill is the technical 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 the sibling domain skills — hyperframes-animation, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry. The capability map in /hyperframes 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 pick data-track-index, handle same-track overlap / z-index, time a clip relative to another references/sub-compositions.md wire a sub-composition (host attrs, <template>, per-instance vars) and animate inside it references/variables-and-media.md declare variables; place <video>/<audio>, set volume, trim references/determinism-rules.md build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit references/full-screen-motion.md author full-frame motion with shared backgrounds references/storyboard-format.md author a STORYBOARD.md plan (+ the parsed manifest) references/review-loop.md run the plan → sketch → build review passes on a live board — shared by every storyboard-planning workflow references/production-loop.md take an approved plan to …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/hyperframes-core