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

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.

Claude Desktop

1. Add the Subframe connector

   1. Go to Customize > Connectors
   2. Click and select Add custom connector
   3. Set the name to Subframe
   4. For Remote MCP Server URL, paste the following URL:
      https://mcp.subframe.com/mcp
      
   5. Click Add
2. Authenticate

   Find the Subframe connector in your connectors list and click Connect. Follow the instructions on the Subframe website to complete authentication.

3. 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 and edits anything in Subframe: pages, components, snippets, design documents, and the theme. Also handles deletion of those resources except theme. Gathers context from your codebase, kicks off background AI jobs in Subframe, and returns URLs where each design appears live as it generates. Use this for new UI, design system additions, written design docs, theme tweaks, and cleanup.

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

/subframe:install — Installs Subframe into a codebase so you can implement designs locally. Detects the framework, runs the CLI, configures Tailwind and fonts, and syncs components. You don’t need to install to create designs.

/subframe:bulk-import — Uploads many components from an existing codebase to Subframe in one CLI batch. This is purely a throughput option for when you want to migrate many components at once instead of one at a time. Available for select teams. For most import use cases, use /subframe:design which is generally available.

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

Manually update the plugin

Reload the plugin to pick up the latest version:

/reload-plugins

If that doesn’t work, reinstall the plugin:

claude plugin uninstall subframe@subframe && claude plugin install 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.

FAQ

A skill can't be found or doesn't work as expected

Skills depend on the MCP server being properly connected. Check these:

1. Make sure the MCP server is running and connected
2. Update to the latest version — see Keep skills up to date