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. The 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 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

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

Cursor and other clients

Install skills with:

npx skills add SubframeApp/subframe