Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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
.claude/skills/fradser-hyperframes/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | -11% | 0% |
| case-05 | ✗→✓ | ▲ Improved | -13% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -15% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 25% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -25% | 0% |
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. | | PR to video | pr-to-video/ | Turn a GitHub PR (URL, owner/repo#N, or "this PR") into a code-change explainer video. | | Music to video | music-to-video/ | Turn a music track into a beat-synced video — lyric video, slideshow, or kinetic visualization. | | Faceless explainer | faceless-explainer/ | Turn arbitrary text (article, notes, topic, brief) into a faceless explainer video with invented visuals. | | Embedded captions | embedded-captions/ | Add designed captions to a talking-head video — visual identities behind column-flow/embedded engines. | | Talking-head recut | talking-head-recut/ | Package an existing talking-head/interview/podcast video with timed graphic overlay cards — titles, lower-thirds, data callouts, quotes. | | Remotion port | remotion-to-hyperframes/ | Port an existing Remotion (React) composition to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate a Remotion source. |
workflow from the second table above. If none fits, fall back to general-video.
they never own the end-to-end task themselves.
hyperframes-core/.
npx hyperframes unless project instructions specifya local wrapper — obey the local wrapper exactly. Requires Node.js >= 22 and FFmpeg.
These skills are mirrored from upstream. To check for or pull updates:
bashbash hyperframes/scripts/sync-hyperframes.sh --check # dry-run bash hyperframes/scripts/sync-hyperframes.sh # sync with backup
See SYNC.md for the upstream source, last-synced commit, and sync strategy.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 21,197 | 15,311 | -28% | 1 | 1 | 0% | 3,719 | 1,766 | -53% | 0 | 0 | — |
case-02 | fail→fail | 36,513 | 11,370 | -69% | 1 | 1 | 0% | 8,241 | 3,589 | -56% | 0 | 0 | — |
case-03 | fail→fail | 29,958 | 35,668 | +19% | 1 | 1 | 0% | 6,106 | 7,573 | +24% | 0 | 0 | — |
case-04 | fail→pass | 13,698 | 3,903 | -72% | 1 | 1 | 0% | 2,130 | 1,903 | -11% | 0 | 0 | — |
case-05 | fail→pass | 14,237 | 3,692 | -74% | 1 | 1 | 0% | 2,253 | 1,970 | -13% | 0 | 0 | — |
case-06 | pass→pass | 15,091 | 4,245 | -72% | 1 | 1 | 0% | 2,455 | 2,043 | -17% | 0 | 0 | — |
case-07 | fail→pass | 14,903 | 3,679 | -75% | 1 | 1 | 0% | 2,355 | 2,006 | -15% | 0 | 0 | — |
case-08 | fail→pass | 10,254 | 6,220 | -39% | 1 | 1 | 0% | 1,670 | 2,082 | +25% | 0 | 0 | — |
case-09 | fail→pass | 14,414 | 2,789 | -81% | 1 | 1 | 0% | 2,293 | 1,715 | -25% | 0 | 0 | — |
case-10 | pass→pass | 10,328 | 3,100 | -70% | 1 | 1 | 0% | 1,544 | 1,732 | +12% | 0 | 0 | — |
case-11 | pass→pass | 9,845 | 3,511 | -64% | 1 | 1 | 0% | 1,514 | 1,862 | +23% | 0 | 0 | — |
case-12 | pass→pass | 5,974 | 2,414 | -60% | 1 | 1 | 0% | 927 | 1,761 | +90% | 0 | 0 | — |
case-13 | fail→pass | 13,834 | 3,493 | -75% | 1 | 1 | 0% | 2,036 | 1,863 | -8% | 0 | 0 | — |
case-14 | fail→pass | 12,075 | 4,922 | -59% | 1 | 1 | 0% | 2,012 | 2,037 | +1% | 0 | 0 | — |
case-15 | fail→pass | 6,018 | 2,745 | -54% | 1 | 1 | 0% | 924 | 1,746 | +89% | 0 | 0 | — |
case-16 | fail→pass | 11,747 | 2,385 | -80% | 1 | 1 | 0% | 1,838 | 1,724 | -6% | 0 | 0 | — |
case-17 | fail→fail | 19,993 | 15,180 | -24% | 1 | 1 | 0% | 3,045 | 3,868 | +27% | 0 | 0 | — |
case-18 | pass→pass | 6,766 | 3,722 | -45% | 1 | 1 | 0% | 1,179 | 1,894 | +61% | 0 | 0 | — |
case-19 | fail→pass | 14,300 | 7,348 | -49% | 1 | 1 | 0% | 2,337 | 2,481 | +6% | 0 | 0 | — |
case-20 | fail→pass | 19,079 | 2,185 | -89% | 1 | 1 | 0% | 1,052 | 1,690 | +61% | 0 | 0 | — |
case-21 | fail→pass | 9,600 | 4,423 | -54% | 1 | 1 | 0% | 1,600 | 2,145 | +34% | 0 | 0 | — |
case-22 | fail→pass | 10,914 | 2,867 | -74% | 1 | 1 | 0% | 1,658 | 1,841 | +11% | 0 | 0 | — |
case-23 | pass→pass | 7,878 | 6,790 | -14% | 1 | 1 | 0% | 1,510 | 2,458 | +63% | 0 | 0 | — |
case-24 | pass→pass | 9,011 | 7,339 | -19% | 1 | 1 | 0% | 1,502 | 2,687 | +79% | 0 | 0 | — |
case-25 | pass→pass | 9,184 | 9,496 | +3% | 1 | 1 | 0% | 2,037 | 2,960 | +45% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted, and 23 counted toward the lift figure. The other 2 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +52 percentage points is the difference between those two pass rates over the 23 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.