Agent skill · software engineering · heygen-com
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 6k tokens when loaded. Last updated 2026-08-07. 39,818 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 understand what data-track-index does (and does not) control, z-index, time a clip relative to another references/creator-editing-recipes.md copy truthful cut/trim/reorder/retime/freeze/camera/mask/crossfade/audio editing recipes and their limits 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; 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 pa …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heygen-com/hyperframes-core