back
loading skill details...
Implement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID.
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:
don't have the plugin yet? install it then click "run inline in claude" again.