HyperFrames ships nine agent skills that teach coding agents like Claude Code, Codex and Cursor to make deterministic MP4 videos from HTML with the HyperFrames CLI. One hub skill holds the render contract and the work loop. The others cover the CLI, a block registry, media, Figma, slideshows, porting other tools' work into HyperFrames, rebuilding a video from a file, and making episodes from style templates.
Why read it
Each SKILL.md stays short and ends in a table that maps a kind of request, command or API to the reference file to read. The CLI skill tells the agent to read a row before running its command. Detail loads only when the task needs it, and the entry file stays a map.
Where agents tend to go wrong, the skill names the wrong reading and bans it outright. Examples: Figma storyboard frames are keyframes, not slides; a deck is never rendered to MP4, with the silent truncation that would happen as the reason. Giving the cause makes the rule stick.
The porting skill sorts every source into three levels: Native, Hosted and Media. For each level it says what code qualifies and what stays editable afterwards. The agent is asked to record which level it used and to report it at the end. This turns a judgment call into a checklist.
The skills mark where the agent must stop and wait: rendering only after the person approves the preview, the storyboard and the draft in the style-sampling skill, and a template pick before anything is pulled or paid for. Passing checks is named as not enough reason to go on.
Before any paid feature, the skill has the agent run `auth status`. It then lists the cases (not signed in, Free, Pro), each with what to tell the person and which command they should type themselves. The agent never runs billing for them.
Long jobs leave a REVERSE.md or similar file for resuming. The skills say any command written in it must be rebuilt from its recipe and checked with `--plan`, never run as written, and that the notes hold no prices. This keeps stale or unsafe commands from being replayed.
Known failures are written as Symptom | Fix or Error | Meaning rows that give the exact command or reading. Some rows warn about traps, such as `doctor --json` always exiting 0, or `pgrep -f` matching its own loop. An agent can match an error to a row instead of guessing.
The media skill has the agent scan finished work once for a listed set of concrete gaps, then offer all the fixes in a single ask. It does nothing without a clear sign of a gap, and it respects the person saying "leave it". The registry skill applies the same rule to an optional download.
A model read each skill to find these. Top to bottom is the usual order. Select a box to read the skill, or a line to see the text behind it.
Every one is a skill. Started by: You or the agent.
| SKILL | DESCRIPTION | LINKS |
|---|---|---|
| figma | Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand. | 1 |
| hyperframes | Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs. | 7 |
| hyperframes-cli | The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures. | 4 |
| hyperframes-registry | About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog. | 0 |
| media-use | Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden. | 2 |
| remotion-to-hyperframes | Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool. | 2 |
| reverse-any-video | Rebuild any video file as an editable HyperFrames project - motion graphics, talking heads, live action or AI-generated footage. Measure and watch it, rebuild every layer, then check the render against the original frame by frame. Use to reverse, recreate, replicate or copy a video. | 1 |
| slideshow | Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by `hyperframes present` - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video. | 2 |
| style-sampling | Make a new episode in a proven video style - Collage Explainer, Finance Explainer, Animated Science Explainer, 3D Brand Explainer, 3D True Crime - on the person's topic. Use for "an episode of", "in the style of", "sample this style", 「用这个风格做一集」. One video to copy is reverse-any-video. | 3 |
From heygen-com/hyperframes at a595755, 2026-11-07. Skills read by Claude Sonnet 5.5 on 2026-11-07. Summary and techniques by Claude Opus 5.5 on 2026-11-07.