# framefields for agents

> Why framefields is built for coding agents, how to give your agent the skills in one command, and the loop it follows to ship a video.

framefields is made to be driven by a coding agent. A film is a TypeScript file, every check is a function that returns data, and every review step produces a file the agent can open and look at. You describe the video; the agent writes, renders, inspects and fixes it.

## Install the skills

**Claude Code**

```text
/plugin install framefields
```

**Any other agent**

```bash
npx skills add gatewai-dev/framefields
```
Works with Codex, Cursor, Gemini CLI, GitHub Copilot, Windsurf, OpenCode, Goose, Cline and 70+ others.

Then ask for a video:

```text
Set up framefields in this project and render a 3-second title card that says "Hello".
```

The skills are instructions only: no MCP servers, hooks or executables, and they send no data anywhere. Details per agent are on [Install the skills](/docs/agents/install/).

## Why it suits agents

| | |
| --- | --- |
| **Plain code** | A video is a `Composition` in TypeScript. Diffs, reviews, tests and git all work. |
| **Deterministic** | `(composition, frame) → pixels`. The same frame renders the same way every time, so checks are repeatable. |
| **Checks return data** | `comp.lint()` and `renderVideo({ qa })` return `{ severity, code, message }` objects, not logs to parse. |
| **Cheap feedback** | One PNG frame or a contact-sheet grid in seconds, long before a full render. |
| **People in the loop** | The live preview saves notes a person pins on the picture to `notes.json` — exact feedback an agent can act on. |
| **No creative suite** | One npm package; no browser, no desktop apps, no licenses. |

## The loop

1. **Write** `film.ts` exporting `buildFilm()`.
2. **Check** — `tsc --noEmit`, then `comp.lint()`.
3. **Look** — render key frames to PNG and open them.
4. **Look at motion** — render a frame grid.
5. **Show** — start the live preview; read the person's pinned notes.
6. **Ship** — `renderVideo({ qa: true })`; stop if `qa.passed` is false.

Full detail in [The agent workflow](/docs/agents/workflow/).

- [Install the skills](/docs/agents/install/): Claude Code, Codex, Cursor, Gemini CLI, Copilot and more; project or global; team setup.
- [The skills](/docs/agents/skills/): What each of the four skills teaches and when it loads.
- [The agent workflow](/docs/agents/workflow/): Write → check → look → show → ship, with code.
- [Example prompts](/docs/agents/prompts/): Prompts that work well, from first render to vision effects.
- [Docs for agents](/docs/agents/llms/): llms.txt, Markdown pages, and an AGENTS.md snippet.