Agent skills

Guided workflows that teach AI assistants how to design and implement UIs with Subframe.

Agent skills are structured instructions that teach AI assistants how to use tools correctly. While the MCP server gives your AI the ability to access Subframe, skills give it the knowledge of how to use it well.

Skills are an open standard ↗ and becoming widely adopted throughout the industry.

Installation

Claude Code

The Subframe plugin for Claude Code sets up the MCP server and agent skills in one install.

1. Install the Subframe plugin

   claude plugin marketplace add https://github.com/SubframeApp/subframe && claude plugin install subframe@subframe
   

   The Subframe plugin for Claude Code sets up the MCP server and agent skills in one install.

2. Enable auto-update (recommended)

   Keep the Subframe plugin up to date automatically:

   1. Run /plugin to open the plugin manager
   2. Select the Marketplaces tab
   3. Choose the subframe marketplace
   4. Select Enable auto-update
3. Verify installation

   Run /mcp to check that the Subframe MCP server is connected, then try asking Claude Code to use Subframe.

4. Create your first design

   Follow the Working with AI agents guide to design and implement your first page.

Cursor

1. Install MCP servers

   Add the Subframe MCP servers to Cursor. You’ll be prompted to authenticate via OAuth.

   • Add Subframe MCP server to Cursor ↗
   • (Optional) Add Subframe Docs MCP server to Cursor ↗

   Troubleshooting: Manual installation

   If the install links don’t work, make the following changes to ~/.cursor/mcp.json.

   ~/.cursor/mcp.json

   {
     "mcpServers": {
       "subframe": {
         "url": "https://mcp.subframe.com/mcp"
       },
       "subframe-docs": {
         "url": "https://docs.subframe.com/mcp"
       }
     }
   }
   

   Cursor will handle OAuth authentication automatically when you first connect.

2. Install agent skills

   Agent skills are guided workflows that teach Cursor how to best use Subframe. Install them with:

   npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent cursor --yes
   
3. Verify installation

   Check that the Subframe MCP server has successfully connected in Cursor Settings > MCP, then try asking Cursor to use Subframe.

4. Create your first design

   Follow the Working with AI agents guide to design and implement your first page.

Codex

1. Install MCP servers

   Run the following commands to add the Subframe MCP servers and authenticate:

   codex mcp add subframe --url https://mcp.subframe.com/mcp && codex mcp add subframe-docs --url https://docs.subframe.com/mcp && codex mcp login subframe
   

   Troubleshooting: Manual installation

   If the commands above don’t work, add the following to ~/.codex/config.toml:

   ~/.codex/config.toml

   [mcp_servers.subframe]
   url = "https://mcp.subframe.com/mcp"
   
   [mcp_servers.subframe-docs]
   url = "https://docs.subframe.com/mcp"
   

   Then authenticate:

   codex mcp login subframe
   
2. Install agent skills

   Agent skills are guided workflows that teach Codex how to best use Subframe. Install them with:

   npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent codex --yes
   
3. Verify installation

   Run /mcp in Codex to check that the Subframe MCP server is connected, then try asking Codex to use Subframe.

4. Create your first design

   Follow the Working with AI agents guide to design and implement your first page.

Other clients

1. Configure the Subframe MCP Server

   Configure your MCP client to connect to the Subframe MCP server:

   • URL: https://mcp.subframe.com/mcp
   • Transport: HTTP
   • Authentication: OAuth (your client will handle the authentication flow)
2. Configure the Subframe Docs MCP Server (optional)

   Optionally add the Subframe Docs MCP server for documentation access:

   • URL: https://docs.subframe.com/mcp
   • Transport: HTTP
   • Authentication: None required
3. Install agent skills (optional)

   If your client supports the Agent Skills standard, install the Subframe skills with:

   npx skills add https://github.com/SubframeApp/subframe --skill '*' --agent '*' --yes
   
4. Verify installation

   Restart your MCP client, then check that the Subframe MCP server has successfully connected and try asking your AI assistant to use Subframe.

5. Create your first design

   Follow the Working with AI agents guide to design and implement your first page.

Available skills

/subframe:design — Designs UI pages in Subframe. Use when you want to build new UI, iterate on existing UI, explore design options, or get a visual starting point to refine. Gathers context from your codebase, generates variations, and returns a review URL to preview and select.

/subframe:develop — Implements designs with business logic. Fetches the design via get_page_info, syncs components if needed, places the page in your codebase, and wires up data fetching, forms, event handlers, and loading/error states.

/subframe:setup — Initializes Subframe in a new or existing project. Detects the framework, runs the CLI, configures Tailwind and fonts, and syncs components.

Next steps

See these skills in action in the Working with AI agents guide, which walks through the full design-to-code workflow.

Keep skills up to date

Claude Code

The Subframe plugin for Claude Code bundles the MCP server and skills together. To enable auto-updates:

1. Run /plugin to open the plugin manager
2. Select the Marketplaces tab
3. Choose the subframe marketplace
4. Select Enable auto-update

To manually update the plugin:

/plugin update subframe@subframe

Cursor, Codex, and other clients

Check for available skill updates:

npx skills check

Update all skills to the latest versions:

npx skills update

Or re-run the original install command to get the latest version.

Enable for your team

If you use Claude Code, you can add Subframe to your project settings so team members are automatically prompted to install the plugin when they open the project.

Add the following to .claude/settings.json in your repository root:

.claude/settings.json

{
  "enabledPlugins": {
    "subframe@subframe": true
  },
  "extraKnownMarketplaces": {
    "subframe": {
      "source": {
        "source": "github",
        "repo": "SubframeApp/subframe"
      }
    }
  }
}

Commit this file to your repository. When a team member opens the project in Claude Code, they’ll be prompted to install the Subframe marketplace and plugin.