# Install the skills

> Install the framefields agent skills in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and 70+ other agents — per project, per user, or for a whole team.

The skills live in [`plugins/framefields`](https://github.com/gatewai-dev/framefields/tree/main/plugins/framefields) in the framefields repo. They are Markdown instructions only. The engine itself is the `framefields` npm package, which the skills tell your agent to install into your project.

## Install

**Claude Code**

Inside an interactive `claude` session:

```text
/plugin install framefields
```

Or from a shell:

```bash
claude plugin install framefields@claude-plugins-official
```

It comes from Anthropic's official plugin directory, which Claude Code adds for you, and updates automatically. Restart Claude Code or run `/reload-plugins` afterwards. In the desktop app's Code tab, use the shell form or **+ → Plugins → Add plugin → Framefields**.

**Track `main` instead of the directory release:**

```text
/plugin marketplace add gatewai-dev/framefields
/plugin install framefields@framefields-plugins
```

**Codex**

```bash
npx skills add gatewai-dev/framefields -a codex
```

**Cursor**

```bash
npx skills add gatewai-dev/framefields -a cursor
```

**Gemini CLI**

```bash
npx skills add gatewai-dev/framefields -a gemini-cli
```

**Copilot**

```bash
npx skills add gatewai-dev/framefields -a github-copilot
```

VS Code / Copilot can also load the portable [`plugin.json`](https://github.com/gatewai-dev/framefields/blob/main/plugins/framefields/plugin.json) through its plugin UI.

**Other**

```bash
npx skills add gatewai-dev/framefields
```

The [`skills`](https://skills.sh) CLI detects the agents on your machine and asks where to install. Agent ids include `windsurf`, `opencode`, `goose`, `cline`, `roo`, `amp`, `kiro-cli` and `hermes-agent`.

## Choose the scope

| Goal | Command |
| --- | --- |
| This project only (default) | `npx skills add gatewai-dev/framefields` |
| Every project, for your user | `npx skills add gatewai-dev/framefields -g` |
| Several agents at once | `npx skills add gatewai-dev/framefields -a codex -a cursor` |
| No prompts (CI, scripts, agents installing for you) | add `-y` |
| One skill only | add `-s framefields-render` |
| See what's in the package first | `npx skills add gatewai-dev/framefields --list` |
| Copy instead of symlink | add `--copy` |

## Set it up for a team

**Claude Code.** Commit this to `.claude/settings.json`; Claude Code offers the plugin to teammates when they trust the folder:

```json title=".claude/settings.json"
{
  "enabledPlugins": {
    "framefields@claude-plugins-official": true
  }
}
```

Or install with `claude plugin install framefields@claude-plugins-official --scope project`, which writes the same entry.

**Other agents.** Install per project (no `-g`) and commit the skill folders the CLI creates (for example `.agents/skills/`), so everyone who clones the repo gets them.

## Keep them current

```bash
npx skills update        # update installed skills
npx skills ls            # list what's installed
npx skills remove        # remove them
```

Claude Code updates plugins from the official directory automatically. The skills' version follows the `framefields` npm package.

## Install by hand

Copy each folder from [`plugins/framefields/skills/`](https://github.com/gatewai-dev/framefields/tree/main/plugins/framefields/skills) into one of:

- `.claude/skills/` (Claude Code, project)
- `.agents/skills/` (project, most other agents)
- `~/.agents/skills/` (your user)

## Check it worked

Ask your agent: *"Which framefields skills do you have?"* It should list `framefields`, `framefields-compose`, `framefields-effects` and `framefields-render`. Skills load on their own when a task matches, so you never need to name them.

## Your project still needs the package

The skills don't install the engine. On the first task, the `framefields` skill has your agent add it to your project — Node.js 22+, an ES module `package.json`, and approval for the one install script it needs. You can do it yourself with [Getting started](/docs/getting-started/).