hyperframes Skill for Claude: Make and Edit Videos from HTML

Makes your assistant build, edit and render a video from HTML files, following HyperFrames' rules for a clean, repeatable render.

Installs: 1.3M; on skills.sh
Stars: 77.1K; on GitHub
Files: 60+; besides SKILL.md
Updated: Nov 2026; last repo commit

hyperframes is the skill to read first for any video made with HeyGen's HyperFrames. You ask for a launch film, explainer, chart, caption or title card, and the assistant writes HTML scenes, checks them, shows you a preview and renders an MP4.

It holds the render contract (12 rules each file must follow), the work loop, and a guide to which reference file fits each kind of video. It needs the HyperFrames CLI, so Node.js 22+ and FFmpeg. It stops at a preview for your approval before the final render.

Good for

Developers who want a product launch, explainer or social clip made by their coding assistant
Designers and marketers who want to edit the result in a preview app instead of a video timeline
Anyone making charts, maps, captions or title cards that must render the same way every time

Install hyperframes

Claude Code

Copy this prompt.

Install the hyperframes skill in Claude Code. Run this command:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route, not both. The plugin bundles the full skill catalog and updates through Claude Code's plugin manager. The other two install the core four only. The four core skills work as one set: hyperframes holds the rules, hyperframes-cli the commands, hyperframes-registry the ready-made effects and media-use the media. Installing one alone leaves the others' hand-offs unanswered. Rendering needs Node.js 22+ and FFmpeg.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Contract
Keep it editable
Work loop
The HyperFrames desktop app
What to read

Key facts

Author: HeyGen (HyperFrames)
License: Apache-2.0
Last commit: Nov 2, 2026
Files it bundles: SKILL.md, reference guides and frame style presets (no scripts)
Needs: Node.js 22+ and FFmpeg, via the HyperFrames CLI
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

12 rules every timed element and scene file must follow
Examples: every timed element has a start and duration, one paused timeline per scene, no random or network-dependent code, asset paths without a leading slash.
Render contract
Rules so the desktop preview can edit what the assistant wrote
One scene per sub-composition, stable ids, copy and colours as variables, content inside the action-safe and title-safe boxes.
Write · Keep it editable
Plan, write, `check --json`, snapshot, preview, then render on approval
Longer films get three storylines to pick from and a written SPEC.md first. Small edits get a snapshot of the change.
Runs code · Work loop
Reference files for launch, explainer, music, data, vertical, 3D and character videos
The assistant reads the file that matches your request before it writes anything.
Read · Video types
Reference files for eases, titles, cuts, captions and overlays
Also covers GSAP, Lottie, canvas and 3D runtimes.
Read · Motion, captions, overlays
Bundled visual presets such as biennale-yellow and blockframe
Each preset ships a FRAME.md and sample HTML for a look to start from.
Read · Frame style presets
Sends registry, media and CLI work to the other skills
Effects go to hyperframes-registry, media and audio to media-use, commands to hyperframes-cli. Decks, Remotion and Figma have their own skills.
Hand-offs

From the official docs

Permissions

Medium risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Renders only after approval
It stops at the preview and renders only when you approve, ask for the file or ask for no stops.
No network inside a video
Its render contract bans network fetches, timers and random values inside the video HTML.
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass. skills.sh

Technical details

Talks to	npm (to run npx hyperframes). The website you ask it to capture. HyperFrames plan usage lookup (npx hyperframes usage)
Sign-in and keys	Not stated in SKILL.md.
Scopes	Runs npx hyperframes init, capture, check, snapshot, preview and render Writes HTML scenes, assets and rendered video in your project Starts a local preview server

Questions

What does the hyperframes skill do?

It makes the assistant build videos as HTML: scenes with timed clips, checked and previewed, then rendered to MP4. It carries the rules a file must follow and picks the right reference for the kind of video you asked for.

How do I install it?

Use the install box above. It installs the four core HyperFrames skills together, because this skill sends command work to hyperframes-cli. HeyGen's README also documents npx hyperframes skills update for the same set.

Does it need an API key?

No key for the core loop. Rendering locally needs Node.js 22+ and FFmpeg. HeyGen sign-in only matters for media features, which the media-use skill covers.

Will it render without asking me?

Not by default. It stops at the preview and waits, unless you ask for the file or say you want no stops. It also tells you that you can keep editing in the HyperFrames desktop app.

Is hyperframes safe?

It is text and reference files with no scripts, and all three skills.sh audits pass. The commands it has the assistant run create files and render video on your machine, and a network fetch inside a video is banned by its own rules.

hyperframes vs the HyperFrames plugin?

The skill is the core piece. The HyperFrames plugin bundles it with the other HyperFrames skills in one Claude Code install.

Can it make slide decks or convert a Remotion or Figma project?

Not this skill. HeyGen lists separate skills for each: slideshow for decks, remotion-to-hyperframes and figma. They install on demand with npx hyperframes skills update <name>.

Information

updated Nov 2, 2026

Repository: heygen-com/hyperframes
Folder: skills/hyperframes

heygen-com/hyperframes skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

hyperframes README · github.com
skills CLI commands · github.com
hyperframes SKILL.md · github.com
hyperframes on skills.sh · skills.sh