Skills catalog - HyperFrames

HyperFrames ships AI agent skills via vercel-labs/skills. They teach your agent the framework-specific patterns — data-* attributes, GSAP timeline registration, adapter registries, runtime-owned media playback — that generic web docs don’t cover. Install them before writing compositions and your agent produces valid HyperFrames HTML on the first try. The skills split into three groups:

Router — the entry skill that picks a workflow for any “make me a…” request — usually a video, but also a navigable deck (/slideshow) or a composition port (/remotion-to-hyperframes).
Creation workflows — one per input shape (URL, PR, music track, captions, etc.). Each owns its task end-to-end: project setup, gated steps, and the final deliverable. Read by the router; you can also invoke directly if you already know which one fits.
Domain skills — atomic capabilities (animation, media, CLI, registry) the workflows compose against; they never own the end-to-end task. Load one when you need that specific layer.

Install

Pick what to install (interactive picker)

npx skills add heygen-com/hyperframes --full-depth

Opens a picker so you can choose which skills to add. Keep --full-depth: it installs the current main. Without it, skills add fetches the skills.sh registry blob, which lags main by hours, so you may get an older copy of a skill. Works with Claude Code, Cursor, Gemini CLI, Codex CLI, GitHub Copilot CLI, and Google Antigravity.

Or install everything at once (skip the picker)

npx skills add heygen-com/hyperframes --all --full-depth

Writes every skill to your project in one shot. Recommended when you want the full set without selecting from the picker.

Or install one skill at a time

npx skills add heygen-com/hyperframes --skill <name> --full-depth

Pass the bare skill name (no leading /) — e.g. --skill hyperframes-animation. Useful when you want a single capability without the full set.

Read /hyperframes first

Once installed, invoke /hyperframes in your agent. It’s the capability map for everything below and routes “make me a…” intent — a video, a deck, or a composition port — to the right creation workflow based on your input.

Don’t see a slash command after install? Open a new agent session, or run /skills (Copilot CLI) / restart your agent’s skill loader. Most agents pick up new skills on the next prompt.

Keeping skills current

After the first install, skills stay lean and current on their own — nothing re-pulls the full set behind your back:

Core set — the /hyperframes router, the hyperframes-* domain skills, and /media-use. npx hyperframes init (which every creation workflow runs when scaffolding) refreshes the core set plus anything else you already have installed. It never expands the install — workflow skills you haven’t used are not pulled — and re-running init on an up-to-date machine is a no-op. Offline (or rate-limited) it degrades gracefully and never hard-fails.
Workflow skills (and /figma) — install on demand, when their workflow is first triggered. The /hyperframes router runs npx hyperframes skills update <workflow> before entering a workflow, so the one it routes to is guaranteed present.

Check or refresh manually anytime:

npx hyperframes skills check          # non-zero exit if installed skills are stale or the core set is incomplete
npx hyperframes skills update         # refresh the core set + everything installed (never expands)
npx hyperframes skills update <name>  # also install a specific workflow / domain skill on demand
npx hyperframes skills                # install the full set explicitly

skills check reports workflow skills you haven’t installed as available on demand, not as a failure.

Router

The single entry point. Read /hyperframes before invoking anything else — it knows what’s available and which workflow fits your request.

Skill	Use when
`/hyperframes`	Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills and intent router for the creation workflows below.

Creation workflows

One workflow per input shape. The router (/hyperframes) picks one of these for you — but you can invoke them directly when you already know which fits.

Skill	Use when
`/product-launch-video`	Marketing / launching / promoting a product — from its URL, a brief, or a script (even if the site is only named). Up to ~3 min (sweet spot 30-90s).
`/website-to-video`	Turning a general website into a video — site tour, portfolio / landing-page showcase, social clip from the site’s own visuals.
`/faceless-explainer`	Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz).
`/pr-to-video`	A GitHub pull request (PR URL, `owner/repo#N` ref, or “this PR”) → changelog / feature-reveal / fix / refactor explainer, read via the `gh` CLI.
`/embedded-captions`	Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.
`/talking-head-recut`	Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.
`/motion-graphics`	A short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay.
`/music-to-video`	A music track (audio file, or video to pull audio from) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing.
`/slideshow`	A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
`/general-video`	Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback.
`/remotion-to-hyperframes`	Porting an existing Remotion (React) composition’s source to HyperFrames HTML. One-way migration, not creation.

Domain skills (loaded on demand)

Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.

Skill	Covers
`/hyperframes-core`	The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules.
`/hyperframes-animation`	All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
`/hyperframes-keyframes`	Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion.
`/hyperframes-creative`	Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
`/media-use`	The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking.
`/hyperframes-cli`	CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus AWS Lambda cloud rendering (`lambda deploy / render / progress / destroy / policies`).
`/hyperframes-registry`	Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream.
`/figma`	Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.

Source of truth

The one-line “use when” for each skill comes from its own SKILL.md frontmatter description: field in the hyperframes repo. The same catalog lives in the README’s ## Skills section and the repo CLAUDE.md; all three surfaces are kept in sync when a skill is added or renamed.

Next steps

Quickstart

Install skills, scaffold a project, and render your first video.

Claude Design

Produce a valid first draft in Claude Design, then refine in any AI coding agent.

GitHub Copilot CLI

Install and invoke HyperFrames skills from Copilot CLI in your terminal.

Google Antigravity

Use HyperFrames skills in Google Antigravity.

​Install

​Keeping skills current

​Router

​Creation workflows

​Domain skills (loaded on demand)

​Source of truth

​Next steps

Quickstart

Claude Design

GitHub Copilot CLI

Google Antigravity

Install

Keeping skills current

Router

Creation workflows

Domain skills (loaded on demand)

Source of truth

Next steps