---
title: "hyperframes skill: make videos from HTML with an AI agent"
canonical_url: https://cookiesforai.app/skills/heygen-com/hyperframes
last_updated: 2026-10-02T01:58:30+02:00
type: skill
summary: "hyperframes is HeyGen's entry-point agent skill for HyperFrames, its open-source framework that renders HTML, CSS and animations into MP4 video; it captures your brief and routes to the right video workflow."
install: "npx skills add heygen-com/hyperframes --skill hyperframes"
related:
  - "https://cookiesforai.app/skills/anthropics/algorithmic-art"
  - "https://cookiesforai.app/skills/anthropics/canvas-design"
  - "https://cookiesforai.app/skills/remotion-dev/remotion-best-practices"
  - "https://cookiesforai.app/skills/anthropics/slack-gif-creator"
---

# HyperFrames

hyperframes is HeyGen's entry-point agent skill for HyperFrames, its open-source framework that renders HTML, CSS and animations into MP4 video; it captures your brief and routes to the right video workflow.

| Fact | Value |
|---|---|
| Publisher | HeyGen (official, own GitHub account) |
| Source | https://github.com/heygen-com/hyperframes/tree/HEAD/skills/hyperframes |
| License | Apache-2.0 |
| Repository stars | 55,348 on 2026-10-02 |
| Skill name | hyperframes |
| Category | Video, images and media |
| Skill last changed | 2026-09-28 |
| Page updated | 2026-10-02 |
| Facts checked | 2026-10-02 |

## Install

Install the skill with the skills CLI:

```
npx skills add heygen-com/hyperframes --skill hyperframes
```

Or install HyperFrames' core skill set from the current main branch, which HeyGen recommends for agents and scripts:

```
npx hyperframes skills update
```

Or, in Claude Code, add HeyGen's plugin marketplace:

```
claude plugin marketplace add heygen-com/hyperframes
```

Then install the plugin:

```
claude plugin install hyperframes@hyperframes
```

HeyGen notes that skills.sh can lag the main branch by hours, which is why it suggests npx hyperframes skills update when you need the newest copy.

## Ask your coding agent

A skill can include scripts that run on your computer, so read its source first: https://github.com/heygen-com/hyperframes/tree/HEAD/skills/hyperframes

```text
Install the agent skill hyperframes from github.com/heygen-com/hyperframes.
```

## What it does

HyperFrames is the router skill for HeyGen's HyperFrames framework, where a video is an HTML file whose elements declare their timing in data attributes and whose animations can be scrubbed to any frame. The skill is meant to be read first for any request to make, edit, animate or render a video, and it maps the 21 skills the README lists on 2026-10-01.

The agent starts from project state. A specific edit or render on an existing project is done directly; a project with a BRIEF.md resumes its recorded workflow; a fresh request goes through a short intent interview, then one routing step. Workflows include product launch videos from a website, topic explainers, videos from a GitHub pull request, captions on talking-head footage, short motion graphics, beat-synced music videos, slide decks and ports from Remotion.

Domain skills such as hyperframes-core, hyperframes-animation and hyperframes-cli load only when a workflow needs them, and the router installs a workflow skill on demand. The skill also tells the agent to check whether the project's pinned HyperFrames version is behind before rendering, and to upgrade and run a check when it is.

## When to use it

- You want a 30 to 90 second launch video made from your product's website.
- You want a pull request turned into a short changelog video.
- You have talking-head footage and want captions or designed overlays added.
- You have a Remotion composition and want it ported to HTML.

## When to pick something else

- Recording a plain browser session: the skill itself hands that case to other tools.
- Projects that must stay in React video code: Remotion's own skills fit better.

## What it needs

- Node.js 22 or newer
- FFmpeg

## Which agents it works in

HeyGen documents it for Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, OpenCode, GitHub Copilot, Any agent that reads SKILL.md files, through the skills CLI. The open skills CLI also installs it into 78 agents (listed with the CLI on 2026-10-01).

## License

Apache-2.0.

## Related

### Related skills for video, images and media

- [Algorithmic Art](https://cookiesforai.app/skills/anthropics/algorithmic-art): Algorithmic Art is Anthropic's open-source agent skill for generative art: the agent writes a short art philosophy, then builds an interactive p5.js piece with seeds and parameter sliders.
- [Canvas Design](https://cookiesforai.app/skills/anthropics/canvas-design): Canvas Design is Anthropic's open-source agent skill for static visual work: the agent writes a design philosophy, then makes a poster or art piece as a finished PNG or PDF file.
- [Remotion best practices](https://cookiesforai.app/skills/remotion-dev/remotion-best-practices): remotion-best-practices is Remotion's own agent skill and the entry point to its other video skills: it routes an agent to the right guide for creating, previewing, captioning and rendering Remotion videos in React.
- [Slack GIF Creator](https://cookiesforai.app/skills/anthropics/slack-gif-creator): Slack GIF Creator is Anthropic's open-source agent skill for animated GIFs sized for Slack: the agent draws the frames in Python, adds motion and checks the file meets Slack's limits.