Kipt

HyperFrames skill: make videos from HTML with Claude Code and other agents

The HyperFrames skill teaches your agent to build, check and render videos as HTML with HeyGen's open-source framework. What it does and how to install it.

By the Kipt team · Updated 24 October 2026

Source: heygen-com/hyperframes · Maintainer: HeyGen · License: Apache-2.0 · Checked: 24 October 2026

What is the HyperFrames skill?

The HyperFrames skill teaches a coding agent to make videos by writing HTML: it holds the rules a composition must follow to render, the loop for checking and previewing work, and a map of which reference file covers each kind of video. It is for developers and marketers who want Claude Code, Codex or Cursor to produce launch films, explainers, data videos or captioned clips as editable source files instead of a one-shot export.

HyperFrames is HeyGen's open-source framework for "turning HTML, CSS, media, and seekable animations into deterministic MP4 videos," in the README's words. The skill's description says to "Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video)."

Its skills.sh page listed about 1.18 million installs (snapshot, 24 October 2026), sixth on the all-time leaderboard and just behind its sibling hyperframes-cli, with Pass results from Gen Agent Trust Hub, Socket and Snyk.

What does it do?

The SKILL.md is short, about 74 lines, and points to a references/ folder for depth. It covers four things.

The project shape. index.html is the root composition. It declares the video's variables and mounts one scene per sub-composition from compositions/. Media and fonts live in assets/. A new video defaults to 1920×1080 at 30 fps.

The contract. Twelve rules, checked by npx hyperframes check --json, which "reports most violations with a Fix: line." Some of the important ones:

  • Every timed element has class="clip", data-start and data-duration in seconds.
  • Each composition builds one paused timeline and registers it on window.__timelines.
  • No Date.now(), unseeded Math.random(), network fetches, timers or repeat: -1. "Everything visible is a function of timeline time."
  • Never play(), pause() or seek media yourself; music and voice go in separate <audio> elements with an id.
  • Colour grades, grain and blur on footage go through npx hyperframes media-treatment, not CSS filters.

Keeping it editable. Timed elements are written in the HTML with stable ids, and copy, brand colours and swappable media become variables, so a person can keep editing in the HyperFrames desktop app. Content stays inside a 90% action-safe box, and captions and key text inside 80% title-safe.

The work loop. On an existing project the agent reads the timeline and the history of what you changed since its last turn. For a new film over about 15 seconds it proposes three storylines in words, lets you pick, then writes a SPEC.md where "every adjective" becomes a number. After its last edit it runs the check, takes snapshots and, for a film, writes a REVIEW.md. It renders only when you approve the preview, ask for the file or ask for no stops.

The skill also tells the agent to search the block registry before hand-writing a named effect, transition, chart or caption style, and to hand any media need to the media-use skill. A table at the end routes the agent to type files: launch, explainer, music video, data, vertical, 3D and character.

What's in the folder:

  • SKILL.md: the contract, the work loop and the routing table.
  • references/: captions.md, film.md, format.md, look.md, motion.md, overlays.md, plugin-installation.md, review.md, runtimes.md, skill-lifecycle.md, sound.md, spec.md, story.md, storyboard files and a types/ folder.
  • scripts/: Node helpers, including a plugin CLI wrapper.
  • assets/frame-presets/: preset frames.

How do you install it?

The README offers a plugin for Claude Code and standalone skills for everything else.

Claude Code plugin (the README's route for Claude Code). It bundles every published HyperFrames skill:

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

Plugin skills are namespaced, so you call it as /hyperframes:hyperframes. To keep it current, run /plugin in Claude Code, open Marketplaces, choose hyperframes and turn on auto-update. Claude Code's plugin docs explain marketplaces in general. The README links a plugin guide for Copilot, VS Code, Cursor and Gemini CLI.

The core set as standalone skills. This installs /hyperframes, /hyperframes-cli, /hyperframes-registry and /media-use from the current main branch:

npx hyperframes skills update

Just this skill, using the skills CLI command shown on skills.sh:

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes

The README warns that npx skills add reads the skills.sh registry copy, "which can lag main by hours," and that a non-interactive run without --skill installs all seven published skills. In practice this skill expects its siblings: it sends CLI details to /hyperframes-cli, effects to /hyperframes-registry and media to /media-use, so the core set is the sensible install.

Standalone skills land in the usual Claude Code skill folders. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

To render you need Node.js 22 or later and FFmpeg, per the README.

How do you use it?

Ask for a video in plain words and say what it is for. The skill is model-invoked, so the agent loads it when you ask to make, edit or render a video. You can also call it by name.

Example prompts (suggestions, not quotes from the repo):

  • Using /hyperframes, make a 20-second launch video for our new CSV export feature, using screenshots from ./screens.
  • Turn this changelog into a 45-second vertical clip with captions and music.
  • Make an animated bar chart video of monthly signups from data.csv, 1920x1080.
  • Open the existing project in ./promo and make the title card slower and bolder. Don't touch the other scenes.
  • Capture https://example.com and build a 30-second explainer of what the product does.

The README's own sample prompt is: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music."

Expect questions for longer films. The skill asks the agent to propose storylines and wait for your pick unless you asked for no stops. For a small edit it snapshots what it changed and looks before replying.

Tips and limits

From the skill and README, not from testing:

  • It builds what you asked for, no more. No voiceover, captions or new aspect ratio unless the request calls for them. A film over about 15 seconds that tells a story gets music and sound unless you ask for silence.
  • Questions get answers, not edits. "A question, a hold or a loose idea gets an answer or a proposal, not an edit."
  • Rendering waits for you. The agent stops at the preview unless you approve, ask for the file or ask for no stops.
  • Pinned CLI versions. A scaffolded project pins hyperframes@<version> in package.json. The lifecycle reference tells the agent to check for an upgrade, apply it, run check, and report the old and new version.
  • HeyGen is optional but appears. The skill tells the agent to run npx hyperframes usage --json at the start of a new video to report remaining plan usage, and avatars or catalog music go through HeyGen. Free local tools cover most other media.
  • Decks are a different skill. For presentations, the skill points to /slideshow; for Remotion code, /remotion-to-hyperframes; for Figma, /figma.

All three security audits on skills.sh showed Pass on 24 October 2026. Under Apache-2.0 you can copy and modify the skill if you keep the license and notices.

Save it in your Kipt library

In Kipt, open Skills and paste the GitHub folder link into the import box. Kipt reads the SKILL.md with its references/, scripts/ and assets/ folders. Because heygen-com/hyperframes holds several skills, Kipt shows a list so you can also take hyperframes-cli, hyperframes-registry and media-use. Your copies live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with HeyGen or the HyperFrames project.

Similar skills

Questions

What is the HyperFrames skill?

It is the main Agent Skill in HeyGen's open-source heygen-com/hyperframes repo. It teaches a coding agent how to build videos as HTML compositions: the render contract, the work loop of check, snapshot, preview and render, and which reference file to read for each kind of video. The repo tells agents to read it first for any HyperFrames video.

How do I install the HyperFrames skill?

For Claude Code the README gives a versioned plugin: claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. For standalone skills, run npx hyperframes skills update to get the core set, or npx skills add heygen-com/hyperframes --skill hyperframes for this skill alone.

What do I need to render a HyperFrames video?

The README lists Node.js 22 or later and FFmpeg. The agent runs the CLI with npx hyperframes, so there is nothing else to install globally. Media from HeyGen, such as avatars or catalog music, needs the separate heygen CLI and a HeyGen sign-in or API key; free local options exist for most media.

Is HyperFrames the same as Remotion?

No. Both turn code into video, but Remotion uses React components while HyperFrames uses plain HTML, CSS and seekable animations such as GSAP timelines. HyperFrames ships a separate remotion-to-hyperframes skill for moving existing Remotion code over.

Why does the skill ban Math.random and Date.now?

HyperFrames renders by seeking a paused timeline frame by frame, so every render must come out identical. The contract forbids anything that changes between runs: Date.now(), unseeded Math.random(), network fetches, timers and infinite repeats. Everything visible has to be a function of timeline time.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.