/develop

name: develop
description: Implement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID.
argument-hint: "[page URL, page ID, or 'the design I just made']"

Implement Subframe designs in the codebase. Fetch the design via MCP, sync components, and add business logic.

Connect to Subframe MCP before implementing

Before installing dependencies, syncing components, or editing code for a linked design, discover the Subframe `get_page_info` tool (use tool search if your client loads MCP tools on demand). The Subframe Docs MCP server only provides documentation; it cannot fetch the user's designs.

If `get_page_info` is unavailable, tell the user that you cannot access the linked design yet and help them connect the **Subframe MCP server**:

• **Not installed/configured:** Direct them to the [Subframe MCP setup guide](https://docs.subframe.com/agent/mcp-server) for their client. The design server URL is `https://mcp.subframe.com/mcp`.
• **Already configured:** Ask them to enable/connect the server and complete OAuth authentication in their client's MCP settings.
• **Status unknown:** Explain that the server may need installation, enabling, or authentication. Provide the setup guide and ask them to check their client's MCP settings.

Pause the design-dependent work until the tools are available. Do not silently fall back to opening or scraping the design in a browser, guessing from the prompt, or implementing from existing code alone. This also applies when using the design as inspiration in a non-Subframe project; connecting MCP does not require installing Subframe components into that project.

After the user reports that setup is complete, discover the tool again and successfully fetch the requested design with `get_page_info` before implementing it.

Only switch to a workflow without the linked design if the user explicitly chooses that alternative.

Detect Project State

Before starting, check for `package.json` and `.subframe/` folder in the current directory:

| Condition | Action | | ---------------------------------------------- | ------------------------------------------------------------------------- | | No `package.json` | Run `/subframe:install` first — there's no project to implement into yet. | | Has `package.json` AND has `.subframe/` folder | Proceed with the workflow below. | | Has `package.json` but NO `.subframe/` folder | Ask the user (see below). |

Existing non-Subframe project

If the current directory has a `package.json` but no `.subframe/` folder, ask the user which approach they prefer:

• **Use the design as inspiration** — Fetch the design via MCP for reference, but implement the page using the existing styles, components, and patterns already in the repo. Translate the Subframe design's layout and structure into whatever UI framework the project already uses (e.g., existing component library, CSS modules, styled-components). Do NOT install Subframe or sync components. Skip to [Inspiration Workflow](#inspiration-workflow).
• **Use Subframe styles and components** — Install Subframe into the project so the design renders pixel-perfect with Subframe's generated code. Run `/subframe:install` first, then continue with the [Workflow](#workflow) below.

Workflow

1. **Wait for any in-flight design jobs** — see [Awaiting In-Flight Designs](#awaiting-in-flight-designs) 2. **Fetch the design** — `get_page_info` with the URL, ID, or name 3. **Read design documentation** — `get_project_info` and `get_component_info` return any attached design docs; check them for usage guidance, accessibility notes, or constraints before implementing 4. **Sync any missing components** — Only if components don't exist locally. `npx @subframe/cli sync` for the specific components used in the page 5. **Create the page** — put it in the right place per codebase patterns 6. **Add business logic** — data fetching, forms, events, loading/error states

Awaiting In-Flight Designs

If a design was just kicked off in the same conversation (via `/subframe:design`), the underlying AI job is likely still running. Reading the result via `get_*_info` too early returns empty or stale code.

`design_page`, `design_component`, and `edit_component` return a `jobId`. Before the first read, call:

wait_for_jobs({ jobIds: [jobId1, jobId2, ...] })

Each result is `running`, `done` (with a summary — for `design_page` it reports how many requested pages were actually applied), `error` (the job failed or stopped reporting; don't assume the design exists — check the summary), or `not_found`. Call in a loop until every job is `done` or `error`. Surface progress to the user — "Designs are still generating in Subframe…" then "✓ Designs ready, fetching the code now." — so they understand the wait.

You don't need `wait_for_jobs` when:

• The user came in with an existing Subframe URL (no in-flight job)
• You're only working from `id` or `name` and don't need the generated code.

If the user asks to implement immediately after kicking off a design, batch all relevant `jobIds` into a single `wait_for_jobs` call (it accepts up to 10).

Inspiration Workflow

Use this workflow when the user chose to use the design as inspiration in an existing non-Subframe project.

1. **Wait for any in-flight design jobs** — see [Awaiting In-Flight Designs](#awaiting-in-flight-designs). 2. **Fetch the design** — Use `get_page_info` with the URL, ID, or name to get the page's layout and structure. If you encounter Subframe components or tokens you're unfamiliar with, use `get_component_info` to understand a component's props and behavior, or `get_theme` to see the Subframe project's design tokens (colors, fonts, spacing, shado