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).
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
Add the marketplace
claude/plugin marketplace add anthropics/claude-plugins-officialInstall the skill
claude/plugin install hyperframes@claude-plugins-officialUse 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.
How to install hyperframes in Claude DesktopDesktop app (MCP config)
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitAdd the SKILL.md to your Skills folder
Settings → Capabilities → Skills → add the folder containing SKILL.md. Claude picks it up automatically.
How to install hyperframes in CursorAI-first code editor
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitConvert to a Cursor rule
Create .cursor/rules/hyperframes.mdc and paste the SKILL.md body. Set `alwaysApply` or a glob so the Agent loads it in context.
How to install hyperframes in Codex CLIOpenAI coding agent
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitReference in AGENTS.md
Add the skill's instructions (or a link) to AGENTS.md at your repo root — Codex reads it on every run.
How to install hyperframes in WindsurfCodeium's agentic IDE
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install hyperframes in ClineVS Code autonomous agent
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install hyperframes in VS CodeCopilot / MCP support
Clone the source
bashgit clone https://github.com/heygen-com/hyperframes.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
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:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesTo 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:
npx skills add heygen-com/hyperframesThe 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
- Design & Creative184k
example skills
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
Anthropic Skills12 skillsby anthropics
- Design & Creative184k
academy guide
Recommends relevant Claude Academy courses, tutorials, and use cases when users ask how to use Claude
Anthropic Skills1 skillsby anthropics
- Design & Creative45k
discord
Discord messaging bridge with built-in access control. Manage pairing, allowlists, and policy via /discord:access.
Claude Plugins (Official)by anthropics
- Design & Creative45k
frontend design
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
Claude Plugins (Official)by anthropics
- Design & Creative45k
imessage
iMessage messaging bridge with built-in access control. Reads chat.db directly, sends via AppleScript. Manage pairing, allowlists, and policy via /imessage:access.
Claude Plugins (Official)by anthropics
- Design & Creative45k
mcp server dev
Skills for designing and building MCP servers that work seamlessly with Claude. Guides you through deployment models (remote HTTP, MCPB, local), tool design patterns, auth, and interactive MCP apps.
Claude Plugins (Official)by anthropics
Catalog data refreshed . Something wrong? Report it.