Install the skills

The skills live in 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:

/plugin install framefields

Or from a shell:

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:

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

Codex

npx skills add gatewai-dev/framefields -a codex

Cursor

npx skills add gatewai-dev/framefields -a cursor

Gemini CLI

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

Copilot

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

VS Code / Copilot can also load the portable plugin.json through its plugin UI.

Other

npx skills add gatewai-dev/framefields

The skills 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:

.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

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