Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →fradser/hyperframes
READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, slideshow / interactive deck, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames domain skills, so read it before any other video or animation skill instead of
Passed 19 of 23 test cases with the skill, and 7 of 23 without it.
and 13 more in the full report
13 fixed8 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
I need to run environment checks, lint my composition, generate snapshots, preview locally, and trigger cloud Lambda rendering for my HyperFrames composition. Which domain sub-skill directory handles CLI execution?
| Checked | Without skill | With skill |
|---|---|---|
| Selects the hyperframes-cli sub-skill directory. | Passed | Passed |
| Prefixes CLI execution commands with npx hyperframes. | Missed | Passed |
The instructions your model reads when the skill loads.
This skill is a local router for the HyperFrames HTML-based video framework,
mirrored from heygen-com/hyperframes.
The mirrored domain skills live as sub-directories of this folder and are loaded
on demand by name. Based on user intent, read the corresponding sub-skill
SKILL.md before executing.
The upstream's authoritative agent guides are mirrored alongside this router
as UPSTREAM-CLAUDE.md (full skill catalog, install, maintenance) and
UPSTREAM-AGENTS.md (workflow list) — consult them for the canonical upstream
skill descriptions and the npx skills add / npx hyperframes workflow.
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. The full
authoring contract lives in hyperframes-core/; read it before writing
composition HTML.
| Sub-skill | Directory | Use When |
|---|---|---|
| Composition contract | hyperframes-core/ | Author/edit an HTML composition — data-* timing, clips, tracks, sub-compositions, variables. Read before writing composition HTML. |
| CLI dev loop | hyperframes-cli/ | Run npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda rendering, or troubleshoot the build/render env. |
| Animation | hyperframes-animation/ | Atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and the runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Keyframes | hyperframes-keyframes/ | Seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text, 3D depth, plus hyperframes keyframes diagnostics. |
| Creative direction | hyperframes-creative/ | Non-animation creative direction: frame.md/design.md, palettes, typography, narration, beat planning, audio-reactive. |
| Media | media-use/ | Resolve/generate BGM, SFX, image, icon, brand logo, voice, color grade, LUT; TTS voiceover, transcription, background removal, captions; cross-project reuse. |
| Registry blocks | hyperframes-registry/ | Install and wire registry blocks/components (hyperframes add). |
| Figma import | figma/ | Import Figma content — assets, tokens, components, storyboards → reconstructed motion. |
| Workflow | Directory | Use When |
|---|---|---|
| General video | general-video/ | Fallback workflow for authoring/editing any custom composition at any length/format — longer/multi-scene pieces, brand and sizzle reels. |
| Motion graphics | motion-graphics/ | Short, design-led motion graphic where motion IS the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting, lower-third. |
| Slideshow / deck | slideshow/ | Presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation. |
| Product launch | product-launch-video/ | Turn a product/marketing URL, pasted script, or brief into a product launch / promo video. |
test cases passed, vs 7 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.