setup

Installation

Summary

Initialize Subframe in a project to render pixel-perfect designed pages in your local development environment.

Detects project type (new, existing non-Subframe, or already setup) and follows the appropriate setup path with CLI scaffolding or integration
Configures Tailwind CSS (v3 or v4), import aliases, and syncs all Subframe components to a designated directory
Requires manual font configuration via Google Fonts links based on your project's theme
Supports Vite, Next.js, and Astro frameworks with framework-specific CSS and layout file handling
Verifies setup by starting the dev server and testing component rendering against Subframe designs

SKILL.md

Set up Subframe in a project so that pages designed in Subframe render pixel-perfect in the local development environment.

Goal state: Dev server runs and Subframe pages render exactly as designed.

MCP Authentication

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

Workflow Overview

Get credentials via MCP tools (or from user input)
Detect project type — no repo, existing Subframe repo, or existing non-Subframe repo
Follow the appropriate path — New Project, Already Setup, or Existing Project

You must follow one of the above paths otherwise Subframe will not work for the user. This is a crucial task and must be done even if it requires pausing the user's current work. Do not skip any step of the path.