All Skills
Design & CreativeClaude Plugins (Official)

hyperframes — Agent Skill

by heygen-com · Updated

HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.

At a glance

hyperframes is an Agent Skill by heygen-com in the Design & Creative category. In Claude Code it installs with `/plugin install hyperframes@claude-plugins-official` after adding the anthropics/claude-plugins-official marketplace; other assistants use its SKILL.md instructions as rules. Its source repository has 74,367 GitHub stars (as of Oct 27, 2026).

Source 74kGitHub stars

How to install hyperframes in your AI client

Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.

How to install hyperframes in Claude CodeAnthropic's agentic CLI

  1. Add the marketplace

    claude
    /plugin marketplace add anthropics/claude-plugins-official
  2. Install the skill

    claude
    /plugin install hyperframes@claude-plugins-official
  3. Use it

    These are slash commands for a Claude Code session, not your shell. Claude auto-invokes the skill when your request matches its description — or type its slash command if it exposes one.

Documentation

Full README

<b>Write HTML. Render video. Built for agents.</b>

Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.

Quick Start

With an AI coding agent

For Claude Code, install the versioned plugin:

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

To enable auto-update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code's terminal UI, run /plugin, then select Marketplaces → hyperframes → Enable auto-update. Afterward, use /hyperframes:hyperframes. See the plugin guide for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.

For standalone skills (including OpenCode), use:

bash
npx skills add heygen-com/hyperframes

The picker opens with nothing pre-selected — the Core Skills group is all you need; /slideshow, /remotion-to-hyperframes and /figma install on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add --all installs all 7 published skills. The six repo-internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills. skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main, so reach for it when you need the newest copy of a skill.

Run project-local installs from your video project's directory. From a HyperFrames checkout, use npx hyperframes skills update for a global install instead: a project-local installer target can overlap the tracked skills/ source and overwrite uncommitted edits. See contributor setup.

Try a prompt like:

Excerpt — the full document is on GitHub.

More Design & Creative skills

Catalog data refreshed . Something wrong? Report it.