Agent skills
Install the Areca skills so AI coding agents and chat apps know how to use the site SDK and the MCP server.
@areca-cms/skills installs four Agent Skills into the AI tools your team uses. Skills are plain instruction folders, and the agent loads them only when a task needs them.
| Skill | The agent learns |
|---|---|
areca-sdk | Setting up @areca-cms/site-sdk: tokens and env vars, areca.config.ts, the areca CLI, reading content, rich text, SEO, the preview and health routes, and Go-live builds. |
areca-mcp | Connecting to the site's MCP server and using it well: roles, the draft, ready and live workflow, field formats, SEO, images, and every tool. |
areca-quickstart | Setting up Areca in a new website project, step by step: checking the project, the content model, languages, the SDK wiring and a first release. Run it as /areca-quickstart. See Quickstart with an AI agent. |
areca-visual-editing | Setting up the site for the CMS visual editor: the frame header, live updates, site content pages, click-to-edit markers, the CMS settings, framework recipes and troubleshooting. |
For the full before-and-after workflow, follow Developer setup with Areca skills.
For both installation routes, update commands and agent discovery troubleshooting, see Install and update skills.
Install
Run this in the website project:
npx @areca-cms/skillsPick your agents. Agents found in the project are preselected. Space toggles an agent, and Enter confirms.
Pick the skills and where they go. This project writes them into the repository, so commit them and the whole team gets them. Me, in every project writes them to your user folders instead.
Optionally add the MCP server. Paste the connector URL from Connect AI: https://<your CMS>/api/mcp/<site-slug>. Agency admins can paste the agency connector instead, https://<your CMS>/api/agency/mcp, which is registered as areca-agency (see Agency connector). If the project already has ARECA_CMS_URL and an areca.config.ts, the site URL is prefilled. Only the URL is written, never a secret. Each agent asks you to sign in to Areca in the browser the first time it connects.
Agents that read the same folder share one copy. For example, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode all read .agents/skills. Run the command again to update the skills.
Supported tools
| Kind | Tools |
|---|---|
| Coding agents | Claude Code, Codex, Cursor, GitHub Copilot, OpenCode, Gemini CLI, Windsurf, Antigravity, Cline, Roo Code, Kilo Code, Kiro, Amp, Factory Droid, Goose, JetBrains Junie, Continue, Augment, Zed, Trae, Warp, OpenHands, Qwen Code, and any other agent that reads .agents/skills |
| Chat apps | The Claude app and ChatGPT. The installer writes one .zip per skill for you to upload. In Claude, go to Customize > Skills > + > Upload a skill. In ChatGPT, go to Skills > Create > Upload from your computer. |
For agents that keep their MCP settings outside the project (Windsurf, Cline, Zed, Goose and Augment) or in a settings screen, the installer prints the snippet to add instead of writing a file.
Without prompts
npx @areca-cms/skills add -a claude-code,codex,cursor -y
npx @areca-cms/skills add -a claude-code -s areca-quickstart -y
npx @areca-cms/skills add -a claude-code --mcp-url https://cms.example.com/api/mcp/acme-site -y
npx @areca-cms/skills add -a claude-code --mcp-url https://cms.example.com/api/agency/mcp -y
npx @areca-cms/skills add -a codex --global -y
npx @areca-cms/skills export --out ./zips
npx @areca-cms/skills remove -a claude-code -y
npx @areca-cms/skills listlist prints every agent id with its project and user folders. remove deletes only the areca-* skill folders.
Other install options
- Claude Code plugin: run
/plugin marketplace add seirai-dev/areca-cms, then/plugin install areca@areca-cms. - skills CLI:
npx skills add seirai-dev/areca-cms --skill areca-sdk --skill areca-mcp --skill areca-quickstart --skill areca-visual-editing. - By hand: copy the
skills/areca-sdk,skills/areca-mcp,skills/areca-quickstartandskills/areca-visual-editingfolders from the repository into your agent's skills folder.
Quickstart with an AI agent
Let an AI coding agent set up Areca in a new website project. The agent checks your project, asks a few questions, builds the content model, connects the site SDK and makes a first release.
Install and update skills
Install Areca skills with the Areca installer or skills.sh, update existing copies, add newly released skills, and refresh your agent session.