develop

SKILL.md

Implement Subframe designs with business logic into your codebase.

Fetches designs via MCP from Subframe by URL, page ID, or name, then syncs required components locally

Detects project state and guides you through either full Subframe integration or using designs as inspiration in existing non-Subframe projects

Handles component syncing, page creation in the correct directory structure, and preservation of existing business logic when updating designs

Provides patterns for adding data fetching, form handling, event handlers, and loading/error states to generated presentational code

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

MCP Authentication

If you cannot find the get_page_info tool (or any Subframe MCP tools), the MCP server likely needs to be authenticated. Ask the user to authenticate the Subframe MCP server. If the user is using Claude Code, instruct them to run /mcp to view and authenticate their MCP servers, and then say "done" when they're finished.

Detect Project State

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

Condition
Action

No package.json
Run /subframe:setup 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: