skill
Hyperframes
Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or mus...
About
**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
# HyperFrames entry point
HyperFrames **renders video from HTML** — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML. Brief, storyboard, review, production, dispatch, and frame-worker contracts live in this skill's `references/`.
## 1. Start from project state
Apply the first matching row; do not evaluate lower state rows:
| State | Action | | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Explicit port of existing Remotion source to HyperFrames | Read `references/routes/remotion-to-hyperframes.md`, then route directly to that workflow. Skip the intent layer. | | Specific operation on an existing HyperFrames project: inspect, diagnose, validate, preview, render, publish, or batch-render | Perform only that operation. Skip intent and workflow routing; load `/hyperframes-cli` and any required domain skills. | | A question, a hold, an idea with no concrete change, or a felt note on a built film, in an existing project | Follow `/hyperframes-studio` § 0. | | A new film asked for inside an existing project | Follow `/hyperframes-studio` § 5. | | Specific edit to an existing project | Make the edit. Do not run the intent layer. To know what is on a project's timeline (tracks, clips, starts, ends, what plays), run `npx hyperframes timeline [--json]` instead of reading `index.html` and every sub-composition file. | | `BRIEF.md` exists | Read `workflow` and `flow`. Execute that workflow; `flow: companion` always executes in `/general-video`. Ask no brief questions. | | No brief, but `hyperframes.json` or `STORYBOARD.md` exists | Resume from project files and recorded preferences. Infer the owning workflow from existing artifacts. If it cannot be determined uniquely, ask one routing-only question; do not run the intent interview. | | Fresh creation | Run the intent layer — `references/intent-interview.md` — then route once using § 2's table. |
<!-- history (trial): remove this block together with the command -->
When you edit an existing project, bracket your edits with project history (`/hyperframes-cli`, Project history in your turn).
<!-- /history (trial) -->
If a fresh request does not identify the subject or input, ask what the video is about before routing. Check preferences and recipes before asking anything (`references/intent-interview.md`, step 1). A `figma.com` input or a named recipe changes intake, not routing — the interview's "Adapt orthogonal inputs" section handles both.
### Keep the project's CLI curr
Install
Run this command
npx skills add heygen-com/hyperframesWorks with
Manual steps
Install with `npx skills add heygen-com/hyperframes`, or clone the repository and copy the `skills/hyperframes` folder into your Claude skills directory.
Frequently asked questions
What is the Hyperframes skill?
Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a websit…
How do I install Hyperframes?
Run this in your terminal:
npx skills add heygen-com/hyperframesWhich AI tools does Hyperframes work with?
It works with claude_app, claude_code, claude_api, cursor, codex, windsurf, cline, zed.
Who made Hyperframes?
heygen-com.
Is Hyperframes free?
Yes, it is free to use.
npx skills add mattpocock/skills
npx skills add vercel-labs/agent-browser
npx skills add mattpocock/skills
npx skills add mattpocock/skills
npx skills add vercel-labs/agent-skills
npx skills add heygen-com/hyperframes
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
Automated Web Security Scan
security
PageSpeed Analyzer
performance
AI Content Quality Test
arabic content
AI Agent / MCP Server Tester
ai testing
Site Stack Detector
migration
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Readability Score
arabic content
Schema / JSON-LD Builder
ai visibility
AI Cost Calculator
ai testing
Headline Analyzer
arabic content