Skip to main content
Agent skills are structured instructions that teach AI assistants how to use tools correctly. While the MCP server gives your AI the ability to access Subframe, skills give it the knowledge of how to use it well. Skills are an open standard ↗ and becoming widely adopted throughout the industry.

​
Installation

The Subframe plugin for Claude Code sets up the MCP server and skills in one install.
1

Start Claude Code

claude
2

Register Subframe plugin

/plugin marketplace add SubframeApp/subframe
This makes the Subframe plugin discoverable in Claude Code.
3

Install the plugin

/plugin install subframe@subframe
This installs the MCP server and skills from the catalog you just added.

​
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 in Subframe. Use when you want to build new UI, iterate on existing UI, explore design options, or get a visual starting point to refine. Gathers context from your codebase, generates variations, and returns a review URL to preview and select. /subframe:develop — Implements designs with business logic. Fetches the design via get_page_info, syncs components if needed, 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
Last modified on February 9, 2026