> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/guides/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 ↗](https://agentskills.io) and becoming widely adopted throughout the industry.

## Installation

<Tabs>
  <Tab title="Claude Code" icon="https://mintcdn.com/subframe-59800133/5lhHS3N1RqBy--k0/images/logos/claude.png?fit=max&auto=format&n=5lhHS3N1RqBy--k0&q=85&s=0328539c5fcb7c98c9d2ae793efe4387" width="48" height="48" data-path="images/logos/claude.png">
    <Steps>
      <Step title="Install the Subframe plugin">
        ```bash theme={null}
        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.
      </Step>

      <Step title="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**
      </Step>

      <Step title="Verify installation">
        Run `/mcp` to check that the Subframe MCP server is connected, then try asking Claude Code to use Subframe.
      </Step>

      <Step title="Create your first design">
        Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Claude Desktop" icon="https://mintcdn.com/subframe-59800133/5lhHS3N1RqBy--k0/images/logos/claude.png?fit=max&auto=format&n=5lhHS3N1RqBy--k0&q=85&s=0328539c5fcb7c98c9d2ae793efe4387" width="48" height="48" data-path="images/logos/claude.png">
    <Steps>
      <Step title="Add the Subframe connector">
        1. Go to [**Customize > Connectors**](https://claude.ai/customize/connectors)
        2. Click <Icon icon="plus" size={16} /> 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**
      </Step>

      <Step title="Authenticate">
        Find the Subframe connector in your connectors list and click **Connect**. Follow the instructions on the Subframe website to complete authentication.
      </Step>

      <Step title="Create your first design">
        Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Cursor" icon="https://mintcdn.com/subframe-59800133/5lhHS3N1RqBy--k0/images/logos/cursor.webp?fit=max&auto=format&n=5lhHS3N1RqBy--k0&q=85&s=b196ef73b2809e299d77151d18039541" width="72" height="72" data-path="images/logos/cursor.webp">
    <Steps>
      <Step title="Install MCP servers">
        Add the Subframe MCP servers to Cursor. You'll be prompted to authenticate via OAuth.

        * [Add Subframe MCP server to Cursor ↗](https://cursor.com/en-US/install-mcp?name=subframe\&config=eyJ1cmwiOiJodHRwczovL21jcC5zdWJmcmFtZS5jb20vbWNwIn0%3D)
        * (Optional) [Add Subframe Docs MCP server to Cursor ↗](https://cursor.com/en-US/install-mcp?name=subframe-docs\&config=eyJ1cmwiOiJodHRwczovL2RvY3Muc3ViZnJhbWUuY29tL21jcCJ9)

        <Accordion title="Troubleshooting: Manual installation">
          If the install links don't work, make the following changes to `~/.cursor/mcp.json`.

          ```json ~/.cursor/mcp.json theme={null}
          {
            "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.
        </Accordion>
      </Step>

      <Step title="Install agent skills">
        Agent skills are guided workflows that teach Cursor how to best use Subframe. Install them with:

        ```bash theme={null}
        npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent cursor --yes
        ```
      </Step>

      <Step title="Verify installation">
        Check that the Subframe MCP server has successfully connected in **Cursor Settings** > **MCP**, then try asking Cursor to use Subframe.
      </Step>

      <Step title="Create your first design">
        Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Codex" icon="https://mintcdn.com/subframe-59800133/bS35JNxm1CpZNt1T/images/logos/openai.png?fit=max&auto=format&n=bS35JNxm1CpZNt1T&q=85&s=811e805e892ceea086cbc53c154c16b7" width="64" height="64" data-path="images/logos/openai.png">
    <Steps>
      <Step title="Install MCP servers">
        Run the following commands to add the Subframe MCP servers and authenticate:

        ```bash theme={null}
        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
        ```

        <Accordion title="Troubleshooting: Manual installation">
          If the commands above don't work, add the following to `~/.codex/config.toml`:

          ```toml ~/.codex/config.toml theme={null}
          [mcp_servers.subframe]
          url = "https://mcp.subframe.com/mcp"

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

          Then authenticate:

          ```bash theme={null}
          codex mcp login subframe
          ```
        </Accordion>
      </Step>

      <Step title="Install agent skills">
        Agent skills are guided workflows that teach Codex how to best use Subframe. Install them with:

        ```bash theme={null}
        npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent codex --yes
        ```
      </Step>

      <Step title="Verify installation">
        Run `/mcp` in Codex to check that the Subframe MCP server is connected, then try asking Codex to use Subframe.
      </Step>

      <Step title="Create your first design">
        Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other clients">
    <Steps>
      <Step title="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)
      </Step>

      <Step title="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
      </Step>

      <Step title="Install agent skills (optional)">
        If your client supports the [Agent Skills](https://agentskills.io) standard, install the Subframe skills with:

        ```bash theme={null}
        npx skills add https://github.com/SubframeApp/subframe --skill '*' --agent '*' --yes
        ```
      </Step>

      <Step title="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.
      </Step>

      <Step title="Create your first design">
        Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 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](/learn/guides/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:

```bash theme={null}
/reload-plugins
```

If that doesn't work, reinstall the plugin:

```bash theme={null}
claude plugin uninstall subframe@subframe && claude plugin install subframe@subframe
```

### Cursor, Codex, and other clients

Check for available skill updates:

```bash theme={null}
npx skills check
```

Update all skills to the latest versions:

```bash theme={null}
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:

```json .claude/settings.json theme={null}
{
  "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

<AccordionGroup>
  <Accordion title="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](/guides/mcp-server) is running and connected
    2. Update to the latest version — see [Keep skills up to date](#keep-skills-up-to-date)
  </Accordion>
</AccordionGroup>