frames/docs/guides/skills.mdx

---
title: Skills catalog
description: "Every Frames skill agents load on demand — what each one is for, and how to install them."
---

Frames ships AI agent skills via [vercel-labs/skills](https://github.com/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 Frames HTML on the first try.

The skills split into three groups:

- **Router** — the entry skill that confirms the brief up front (the intent layer) and picks a workflow for any "make me a…" request — usually a video, but also a navigable deck (`/slideshow`) or a composition port (`/remotion-to-frames`).
- **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

<Steps>
  <Step title="Install the core set (default)">
    ```bash
    npx @hanzo/frames skills update
    ```

    Installs exactly the core set — the `/frames` router, the `frames-*` domain skills, and `media-use` — and the router installs each creation workflow on demand the first time it routes there. Always installs from the repo's current `main`. Works with [Claude Code](https://claude.ai/claude-code), [Cursor](https://cursor.sh), [Gemini CLI](https://github.com/google-gemini/gemini-cli), [Codex CLI](https://github.com/openai/codex), [GitHub Copilot CLI](/guides/copilot-cli), and [Google Antigravity](/guides/antigravity).
  </Step>
  <Step title="Or pick what to install (interactive picker)">
    ```bash
    npx skills add hanzoai/frames --full-depth
    ```

    In a terminal this opens a picker — the core set under the "Core Skills" group, the on-demand creation workflows under "Other", nothing pre-selected. Keep `--full-depth`: it installs the current `main`; without it `skills add` fetches the skills.sh registry blob, which lags `main` by hours. The picker is interactive-only: a non-interactive or agent run without `--skill` installs all 19, so agents should use `npx @hanzo/frames skills update` above.
  </Step>
  <Step title="Or install everything at once (skip the picker)">
    ```bash
    npx skills add hanzoai/frames --all --full-depth
    ```

    Writes every skill to your project in one shot. Use this only when you explicitly want the full set up front — the router installs workflows on demand otherwise.
  </Step>
  <Step title="Or install one skill at a time">
    ```bash
    npx skills add hanzoai/frames --skill <name> --full-depth
    ```

    Pass the bare skill name (no leading `/`) — e.g. `--skill frames-animation`. Useful when you want a single capability without the full set.
  </Step>
  <Step title="Read /frames first">
    Once installed, invoke `/frames` 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.
  </Step>
</Steps>

<Tip>
  **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.
</Tip>

## 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 `/frames` router, the `frames-*` domain skills, and `/media-use`. `npx @hanzo/frames 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 `/frames` router runs `npx @hanzo/frames skills update <workflow>` before entering a workflow, so the one it routes to is guaranteed present.

Check or refresh manually anytime:

```bash
npx @hanzo/frames skills check          # non-zero exit if installed skills are stale or the core set is incomplete
npx @hanzo/frames skills update         # refresh the core set + everything installed (never expands)
npx @hanzo/frames skills update <name>  # also install a specific workflow / domain skill on demand
npx @hanzo/frames 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 `/frames` before invoking anything else — it knows what's available and which workflow fits your request.

| Skill          | Use when                                                                                                                                                                                                  |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/frames` | **Read first** for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below. |

## Creation workflows

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

| Skill                      | Use when                                                                                                                                                                                |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/product-launch-video`    | Any **website** — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s).                                |
| `/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, and the home of companion mode (co-create with the full toolbox).                              |
| `/remotion-to-frames` | **Porting an existing Remotion** (React) composition's source to Frames 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                                                                                                                                                                |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/frames-core`      | The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules.        |
| `/frames-animation` | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).         |
| `/frames-keyframes` | Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `frames keyframes` diagnostics for rendered motion. |
| `/frames-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.          |
| `/frames-cli`       | CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus hosted cloud rendering (`cloud render / list / get / delete`) and AWS Lambda rendering (`lambda deploy / render / progress / destroy / policies`). |
| `/frames-registry`  | Install and wire registry blocks and components into compositions via `frames 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 [frames repo](https://github.com/hanzoai/frames/tree/main/skills). The same catalog lives in the [README's `## Skills` section](https://github.com/hanzoai/frames#skills) and the repo `CLAUDE.md`; all three surfaces are kept in sync when a skill is added or renamed.

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Install skills, scaffold a project, and render your first video.
  </Card>
  <Card title="Claude Design" icon="palette" href="/guides/claude-design">
    Produce a valid first draft in Claude Design, then refine in any AI coding agent.
  </Card>
  <Card title="GitHub Copilot CLI" icon="terminal" href="/guides/copilot-cli">
    Install and invoke Frames skills from Copilot CLI in your terminal.
  </Card>
  <Card title="Google Antigravity" icon="atom" href="/guides/antigravity">
    Use Frames skills in Google Antigravity.
  </Card>
</CardGroup>