How to Install HyperFrames for Claude Code

Install HyperFrames

If you've ever wished your coding agent could ship a product demo video as easily as it ships a pull request, HyperFrames is worth a look. It turns HTML, CSS, media, and animation into an MP4 — and it plugs straight into Claude Code as a set of skills. Here's how to get it running.

• 01 · What You're Installing
• 02 · Check Your Environment
• 03 · Install the Skill
• 04 · Verify It's There
• 05 · Create Your First Project
• 06 · Let Claude Code Do the Work
• 07 · Things to Watch For

HyperFrames is an open-source framework from HeyGen that renders programmable HTML — markup, CSS, media, and animation — out to a deterministic MP4 file. Instead of dragging clips around a timeline, you (or your agent) write markup, and HyperFrames renders it.

It isn't a single plugin. It's a CLI plus a set of agent "skills" — 20 of them, loaded on demand, with an entry skill that acts as a router and picks the right workflow for any "make me a video" request. There are domain skills (compositions, animation, media, linting) and workflow skills for specific outputs, like a product launch video, a website tour, or a faceless explainer.

You don't need all 20 to get started. The installer gives you a picker so you only pull in what you need. This guide walks through the five steps to get it running inside Claude Code, end to end.

A Router, Plus Skills You Load On Demand

HyperFrames ships 20 skills. The entry skill is a router — it reads the request and picks the right workflow. You rarely install all 20 at once.

If your agent supports skills — Claude Code, Cursor, Gemini CLI, and others do — HyperFrames slots in without any custom integration work.

Confirm Node, FFmpeg, and Headless Chrome

Before installing anything, confirm your machine has what HyperFrames needs to render — Node, FFmpeg, and a headless Chrome instance.

If Chrome is missing, install it with:

This installs a separate, sandboxed Chrome Headless Shell dedicated to rendering — it won't touch the Chrome browser you already have installed.

Rendering runs a real headless Chrome instance. If your machine is tight on free RAM, renders can fail or slow down significantly. hyperframes doctor flags this before you hit it mid-render — worth running first, not skipping.

No Marketplace Yet — Install via the Skills CLI

Claude Code doesn't yet have a centralized one-click plugin marketplace the way some other agent apps do, so HyperFrames has to be installed from the terminal rather than through an in-app menu.

The HyperFrames repo carries roughly 240MB of MP4 test files in Git LFS that a normal install doesn't need. GIT_LFS_SKIP_SMUDGE=1 skips pulling them down, which keeps the install fast.

Running the command opens an interactive picker so you can choose which of the 20 skills to install. If you'd rather skip the picker, a few flag combinations cover the common cases:

--full-depth does a full clone of main. Without it, install pulls from a registry blob that can lag behind main by several hours — keep the flag if you want the latest skill definitions.

--agent claude-code tells the installer to write skills into .claude/skills/ in your current project (project-level, not global). Add -g if you'd rather install globally.

If your team already uses Claude Code's plugin marketplace, HyperFrames is listed there too:

Ask Claude Code to List Its Skills

Once installation finishes, Claude Code picks up the new skills immediately. Confirm by asking it to list its available skills, or by trying the router directly with a video request.

Init, Preview, Render

With the skill installed, spin up a new HyperFrames project the standard way:

hyperframes init also installs the core agent skills automatically into the new project, so you can hand off to Claude Code at any point rather than writing every line of HTML yourself.

Describe the Video, Let the Router Pick the Workflow

Once the skill is installed, describe the video you want and let the /hyperframes router pick the right workflow. A few example prompts:

Claude Code plans the composition, writes the HTML, wires up the animations, lints the result, and renders to MP4 — the same production loop a human editor would follow, automated end to end.

Project vs. Global, and Keeping Skills Fresh

If you're working across multiple repos, decide up front whether you want HyperFrames skills installed per-project or globally — it changes where the .claude/skills/ (or .agents/skills/) folder ends up.

Workflow skills install on demand. Run npx hyperframes skills update <workflow> periodically to stay current without re-pulling the entire set.

Quick Recap

1. Run npx hyperframes doctor to check Node, FFmpeg, and headless Chrome — install Chrome with npx hyperframes browser ensure if it's missing.
2. Install the skill with GIT_LFS_SKIP_SMUDGE=1 npx skills add heygen-com/hyperframes — keep the LFS flag to skip 240MB of unneeded test video.
3. Use --full-depth for the latest skill definitions, --agent claude-code to target Claude Code specifically, and -g if you want a global rather than per-project install.
4. Verify with npx hyperframes init my-video, then preview and render to confirm the pipeline works end to end.
5. Hand off to Claude Code — describe the video you want and let the /hyperframes router pick the workflow.

HyperFrames closes a real gap for teams using Claude Code as more than a coding tool — turning a written brief, a URL, or a CSV into a finished video without opening a traditional editor. The install itself is a couple of terminal commands; the leverage comes once your agent can be asked for a video the same way you'd ask it for a script or a pull request.