# The skills

> What each of the four framefields skills teaches an agent, and the kind of request that loads it.

Four skills, each loaded automatically when a request matches its description. They hand off to each other, so an agent starting a project ends up with all four.

| Skill | Teaches | Loads on requests like |
| --- | --- | --- |
| `framefields` | Checking Node/GPU, writing `package.json` with the right install-script approvals, installing, scaffolding `theme.ts` / `film.ts` / `render.ts`, Git LFS for media, a first verified render | *"Make a video with framefields"*, *"set up framefields in this repo"* |
| `framefields-compose` | Compositions and layer trees, flex layout, typography and fonts, keyframes and easing, text animators, scenes on a beat grid, transitions, mattes, 3D looks, charts | *"Add a title sequence"*, *"animate these cards in on the beat"*, *"make the logo spin in 3D"* |
| `framefields-effects` | Attaching effects to layers, whole films and regions; grading, grain, blur, LUTs, keying; signals on effect props; on-device vision (tracking, cutouts, pose) | *"Add film grain and a vignette"*, *"put the headline behind the dancer"*, *"blur the faces"* |
| `framefields-render` | The verification ladder: lint, single frames, frame grids, pixel tests, live preview and pinned notes, MP4 export with QA, diagnosing blank frames | *"Render a frame grid of the intro"*, *"why is frame 40 black?"*, *"export the final MP4"* |

## What they make an agent do differently

- **Verify cheapest first.** Typecheck and `comp.lint()` before any GPU work; frames and grids before a full render.
- **Look at its own output.** Render a PNG, open it, and compare against intent — not assume.
- **Keep tokens in one place.** Colors, sizes, fonts and the beat grid live in `theme.ts`.
- **Avoid the classic breakages.** Fonts registered first, local integer keyframes, absolute vs flex positioning, `durationFrames` on audio, `process.exit()` after rendering. See [Authoring rules](/docs/reference/rules/).
- **Bring a person in before exporting.** Start the preview, share the URL, and act on pinned notes.

## Where they come from

The skills are versioned with the `framefields` package and live in the framefields repo at [`plugins/framefields/skills/`](https://github.com/gatewai-dev/framefields/tree/main/plugins/framefields/skills). `framefields-effects` includes a generated catalog of every effect and prop. If a skill gets something wrong, [open an issue](https://github.com/gatewai-dev/framefields/issues).