subframeapp/subframe▌
3 approved skills in this repository
setup
Productivity
Initialize Subframe in a project to render pixel-perfect designed pages in your local development environment. \n \n Detects project type (new, existing non-Subframe, or already setup) and follows the appropriate setup path with CLI scaffolding or integration \n Configures Tailwind CSS (v3 or v4), import aliases, and syncs all Subframe components to a designated directory \n Requires manual font configuration via Google Fonts links based on your project's theme \n Supports Vite, Next.js, and Ast
develop
Productivity
Implement Subframe designs with business logic into your codebase. \n \n Fetches designs via MCP from Subframe by URL, page ID, or name, then syncs required components locally \n Detects project state and guides you through either full Subframe integration or using designs as inspiration in existing non-Subframe projects \n Handles component syncing, page creation in the correct directory structure, and preservation of existing business logic when updating designs \n Provides patterns for adding
design
Frontend
Design UI pages in Subframe with AI-generated variations, then implement with code. \n \n Create new pages or redesign existing UI with multiple design variations to explore options before committing to code \n Use design_page for new designs and edit_page for targeted changes to existing Subframe pages \n Generates production-ready React/Tailwind code that matches your design system; refine visually in the Subframe editor before implementation \n Update project theme globally with edit_theme to