SubframeApp · adam-subframe · Feb 2, 2026
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
@@ -0,0 +1,27 @@
+{
+  "name": "subframe",
+  "owner": {
+    "name": "Subframe",
+    "email": "support@subframe.com"
+  },
+  "metadata": {
+    "description": "Official Subframe marketplace - design and implement UIs with AI directly in Claude Code",
+    "version": "1.0.0"
+  },
+  "plugins": [
+    {
+      "name": "subframe",
+      "source": "./plugins/claude/subframe",
+      "description": "Design and implement UIs with Subframe - an AI design tool that outputs production-ready React code",
+      "version": "1.0.0",
+      "author": {
+        "name": "Subframe"
+      },
+      "homepage": "https://subframe.com",
+      "repository": "https://github.com/SubframeApp/subframe",
+      "keywords": ["design", "ui", "react", "tailwind", "components"],
+      "category": "design",
+      "tags": ["design", "ui", "react", "frontend", "components"]
+    }
+  ]
+}
diff --git a/packages/docs/docs.json b/packages/docs/docs.json
@@ -47,6 +47,7 @@
             "group": "Guides",
             "pages": [
               "guides/mcp-server",
+              "guides/skills",
               "guides/dark-mode",
               "guides/component-docs",
               "guides/accessibility",

diff --git a/packages/docs/guides/mcp-server.mdx b/packages/docs/guides/mcp-server.mdx
@@ -33,6 +33,7 @@ You can get the MCP link for any design by either:
 | `get_component_info` | Gets the code and metadata for a component   | `id`, `name`, or `url`<br/>`projectId` (optional) | `id`, `name`, `files`                        |
 | `get_page_info`      | Gets the code for a page                     | `id`, `name`, or `url`<br/>`projectId` (optional) | `id`, `name`, `files`                        |
 | `get_theme`          | Generates the Tailwind theme for the project | `projectId` (optional)<br/>`cssType` (optional)   | `theme` config                               |
+| `design_page`        | Designs multiple page variations using AI    | `description`, `variations` (1–4 strings), `flowName`<br/>`projectId` (optional), `codeContext` (optional) | `pageId`, `reviewUrl` |
 
 If `projectId` is not specified, the tool will use the first project you have access to.
 
@@ -125,13 +126,11 @@ Get my Subframe theme configuration
 <AccordionGroup>
 <Accordion title="Authentication failed">
 
-Check that:
+The MCP server uses OAuth for authentication. If you're seeing authentication errors:
 
-- Your API token is correct and hasn't expired
-- You copied the entire token without extra spaces
-- The token is in the `Authorization` header as `Bearer YOUR_AUTH_TOKEN`
-
-Generate a new token at [app.subframe.com/settings/tokens](https://app.subframe.com/settings/tokens).
+- Try re-authenticating by reconnecting to the MCP server in your client
+- Check that you have the correct permissions for the project you're trying to access
+- Make sure your browser session is active when authenticating
 
 </Accordion>
 <Accordion title="AI not calling the server">

diff --git a/packages/docs/guides/skills.mdx b/packages/docs/guides/skills.mdx
@@ -0,0 +1,43 @@
+---
+title: Skills
+description: Guided workflows that teach AI assistants how to design and implement UIs with Subframe.
+---
+
+[Agent Skills](https://agentskills.io) are structured instructions that teach AI assistants how to use tools correctly. The [MCP server](/guides/mcp-server) gives your AI assistant the _ability_ to access Subframe — skills give it the _knowledge_ of how to use Subframe well.
+
+Skills are an [open standard](https://agentskills.io) adopted by companies like Supabase, Vercel, and Cloudflare.
+
+## Available skills
+
+**`/subframe:setup`** — Initializes Subframe in a new or existing project. Detects the framework, runs the CLI, configures Tailwind and fonts, and syncs components.
+
+**`/subframe:design`** — Designs UI pages. Gathers context from your codebase, calls `design_page` to generate multiple variations, and returns a review URL where you can preview and select a variation.
+
+**`/subframe:develop`** — Implements designs with business logic. Fetches the design via `get_page_info`, syncs components, places the page in your codebase, and wires up data fetching, forms, event handlers, and loading/error states.
+
+## Typical workflow
+
+1. Run `/subframe:setup` to initialize Subframe in your project (one-time)
+2. Run `/subframe:design` to create a page design with multiple variations
+3. Review and select a variation in Subframe
+4. Run `/subframe:develop` to implement the selected design with business logic
+
+## Installing skills
+
+<Tabs>
+  <Tab title="Claude Code">
+    Skills are bundled with the Subframe plugin and installed automatically. Run the following commands in Claude Code:
+
+    ```
+    /plugin marketplace add SubframeApp/subframe
+    /plugin install subframe@subframe
+    ```
+  </Tab>
+  <Tab title="Cursor and other clients">
+    Install skills with:
+
+    ```bash
+    npx skills add SubframeApp/subframe
+    ```
+  </Tab>
+</Tabs>
diff --git a/packages/docs/installation.mdx b/packages/docs/installation.mdx
@@ -85,11 +85,25 @@ Your Subframe theme may use a Google Font or an [uploaded custom font](/learn/th
   </Step>
 </Steps>
 
-## Set up Subframe MCP (recommended)
+## Set up Subframe MCP and Skills (recommended)
 
-Subframe's MCP server lets AI tools like Cursor and Claude Code fetch your designs directly. Instead of copying code manually, AI can access your components, pages, and theme automatically.
+The MCP server lets AI tools like Cursor and Claude Code fetch your designs directly. Skills teach your AI assistant how to use Subframe well — setting up projects, designing pages, and implementing with business logic.
 
 <Tabs>
+  <Tab title="Claude Code">
+    The Subframe plugin for Claude Code sets up the MCP server and Skills in one install.
+
+    <Steps>
+      <Step title="Install the Subframe plugin">
+        Run the following commands in Claude Code:
+
+        ```
+        /plugin marketplace add SubframeApp/subframe
+        /plugin install subframe@subframe
+        ```
+      </Step>
+    </Steps>
+  </Tab>
   <Tab title="Cursor">
     <Steps>
       <Step title="Open the editor in Subframe">
@@ -99,21 +113,25 @@ Subframe's MCP server lets AI tools like Cursor and Claude Code fetch your desig
         Go to **Code** \> **Installation** \> **Cursor MCP server**
       </Step>
       <Step title="Install MCP server">
-        Click on **Add to Cursor**. Your auth token will be automatically applied.
+        Click on **Add to Cursor**. You'll be prompted to authenticate via OAuth.
+      </Step>
+      <Step title="Install Skills">
+        Skills are guided workflows that teach Cursor how to best use Subframe. Install them with:
+
+        ```bash
+        npx skills add SubframeApp/subframe
+        ```
       </Step>
     </Steps>
     **Manual installation**
 
-    Create a new auth token at [app.subframe.com/settings/tokens](https://app.subframe.com/settings/tokens) and add the following to `~/.cursor/mcp.json`:
+    Add the following to `~/.cursor/mcp.json`. Cursor will handle OAuth authentication automatically when you first connect.
 
     ```json ~/.cursor/mcp.json
     {
       "mcpServers": {
         "subframe": {
-          "url": "https://mcp.subframe.com/mcp",
-          "headers": {
-            "Authorization": "Bearer YOUR_AUTH_TOKEN"
-          }
+          "url": "https://mcp.subframe.com/mcp"
         },
         "subframe-docs": {
           "url": "https://docs.subframe.com/mcp"
@@ -122,40 +140,14 @@ Subframe's MCP server lets AI tools like Cursor and Claude Code fetch your desig
     }
     ```
   </Tab>
-  <Tab title="Claude Code">
-    <Steps>
-      <Step title="Create a new auth token">
-        You can create and manage your auth tokens at [app.subframe.com/settings/tokens](https://app.subframe.com/settings/tokens)
-      </Step>
-      <Step title="Install the Subframe MCP server">
-        Run the following command with `YOUR_AUTH_TOKEN` replaced with your auth token:
-
-        ```bash
-        claude mcp add --transport http subframe https://mcp.subframe.com/mcp \
-          --header "Authorization: Bearer YOUR_AUTH_TOKEN"
-        ```
-      </Step>
-      <Step title="Install the Subframe Docs MCP server (optional)">
-        You can install the Subframe Docs MCP server (recommended) to give AI access to this docs site:
-
-        ```bash
-        claude mcp add --transport http subframe-docs https://docs.subframe.com/mcp
-        ```
-      </Step>
-    </Steps>
-  </Tab>
   <Tab title="Other clients">
     <Steps>
-      <Step title="Create a new auth token">
-        You can create and manage your auth tokens at [app.subframe.com/settings/tokens](https://app.subframe.com/settings/tokens)
-      </Step>
       <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:** Bearer token in header
-        - **Header:** `Authorization: Bearer YOUR_AUTH_TOKEN`
+        - **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:
@@ -164,14 +156,21 @@ Subframe's MCP server lets AI tools like Cursor and Claude Code fetch your desig
         - **Transport:** HTTP
         - **Authentication:** None required
       </Step>
+      <Step title="Install Skills (optional)">
+        If your client supports the [Agent Skills](https://agentskills.io) standard, install the Subframe skills with:
+
+        ```bash
+        npx skills add SubframeApp/subframe
+        ```
+      </Step>
       <Step title="Verify installation">
-        Restart your MCP client, then verify the MCP servers are available in your AI assistant.
+        Restart your MCP client, then verify the MCP servers and skills are available in your AI assistant.
       </Step>
     </Steps>
   </Tab>
 </Tabs>
 
-See our [MCP server guide](/guides/mcp-server) for more information on how to use the MCP server.
+See our [MCP server guide](/guides/mcp-server) and [Skills guide](/guides/skills) for more details.
 
 ## FAQ
 

diff --git a/packages/docs/learn/admin/auth-tokens.mdx b/packages/docs/learn/admin/auth-tokens.mdx
@@ -1,9 +1,9 @@
 ---
 title: Auth tokens
-description: Create and manage auth tokens for CLI and MCP server.
+description: Create and manage auth tokens for the Subframe CLI.
 ---
 
-Auth tokens let team members authenticate the Subframe CLI and MCP server with their accounts.
+Auth tokens let team members authenticate the Subframe CLI with their accounts.
 
 ## Create a token
 

diff --git a/plugins/claude/subframe/.claude-plugin/plugin.json b/plugins/claude/subframe/.claude-plugin/plugin.json
@@ -0,0 +1,14 @@
+{
+  "name": "subframe",
+  "description": "Design and implement UIs with Subframe - an AI design tool that outputs production-ready React code",
+  "version": "1.0.0",
+  "author": {
+    "name": "Subframe"
+  },
+  "homepage": "https://subframe.com",
+  "repository": "https://github.com/SubframeApp/subframe",
+  "license": "MIT",
+  "keywords": ["design", "ui", "react", "tailwind", "components"],
+  "skills": "./skills/",
+  "mcpServers": "./.mcp.json"
+}
diff --git a/plugins/claude/subframe/.mcp.json b/plugins/claude/subframe/.mcp.json
@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "subframe": {
+      "type": "http",
+      "url": "${SUBFRAME_MCP_URL:-https://mcp.subframe.com/mcp}"
+    },
+    "subframe-docs": {
+      "type": "http",
+      "url": "https://docs.subframe.com/mcp"
+    }
+  }
+}
diff --git a/plugins/claude/subframe/skills/design/SKILL.md b/plugins/claude/subframe/skills/design/SKILL.md
@@ -0,0 +1,61 @@
+---
+name: design
+description: Design UI pages using Subframe. Use proactively whenever a task involves creating or updating UI - don't write UI code directly.
+argument-hint: "[description of what to design]"
+---
+
+Design pages using the `design_page` MCP tool.
+
+**Don't write UI code directly.** Subframe generates production-ready React/Tailwind code that matches the design system. Design first, then implement with `/subframe:develop`.
+
+## Subframe Basics
+
+- **Components** (buttons, inputs, cards): Synced via CLI. Source of truth in Subframe. Don't modify locally.
+- **Pages** (screens): Exported via MCP. Add business logic after export.
+
+Subframe knows about the design system and theme. Your job is to provide context from the user's codebase.
+
+## Workflow
+
+1. **Understand the request** - If vague, ask clarifying questions first. What data? What actions? Who uses it?
+2. **Find the projectId** - Check `.subframe/sync.json`
+3. **Gather context and decide variations** - Scale to the task (see below)
+4. **Call `design_page`**
+5. **Share results** - Present the review URL as a clickable link — this is the primary output for the user. Note the pageId for later.
+
+## Context and Variations
+
+How much context to gather and how many variations to generate depends on the task:
+
+| Task                           | Context                                                           | Variations                           |
+| ------------------------------ | ----------------------------------------------------------------- | ------------------------------------ |
+| **New page**                   | Similar pages, data types                                         | 4 — explore the design space         |
+| **Adding or edit existing UI** | The existing page, relevant data types                            | 2 — match the pattern, offer options |
+| **Redesigning existing UI**    | The current page (note what to keep vs change in the description) | 2-4 — depending on how open-ended    |
+
+**Always include when available:**
+
+- Similar existing pages (the single most valuable context)
+- Components or patterns the user explicitly mentions
+- Data types/interfaces for what the page will display
+
+### Variations
+
+Each variation is a prompt that drives a unique design direction. Make them meaningfully different:
+
+- "Compact data table with inline actions and bulk operations"
+- "Card-based layout with visual hierarchy and quick filters"
+- "Minimal single-column design focused on the primary action"
+
+More variations = more exploration. Fewer = more focused. Don't overthink it.
+
+## Multi-Page Requests
+
+When designing multiple related pages (flows, CRUD, etc.):
+
+1. Design the primary page first with more variations to establish the direction
+2. After user approves, design remaining pages using the first as context
+
+## After Designing
+
+Always present the `reviewUrl` as a clickable markdown link — it's the most important thing for the user to see. They need it to preview and select a variation in Subframe. Also note the `pageId` — they'll need it for `/subframe:develop` to implement the page with business logic.