Design
This bridges visual design and code by teaching Claude when to use Subframe's design tools instead of writing UI code directly. It handles the full design surface: pages, components, snippets, theme tokens, and design docs. The standout piece is theme verification. Before any design call, it compares your codebase's actual tokens against Subframe's to catch role mismatches, like when your "brand" only paints focus rings but Subframe's paints button backgrounds. It then asks whether to align them first. The skill enforces a workflow: design in Subframe, then implement with /subframe:develop, so your React/Tailwind output stays locked to your design system. Useful if you want design tools that respect existing token conventions rather than guessing.
- skills.sh installs
- 793
- GitHub stars
- 465
- last updated
- Aug 21, 2026
Install
$ npx -y skills add subframeapp/subframe --skill design --agent claude-codeInstalls into .claude/skills of the current project.
Files
This bridges visual design and code by teaching Claude when to use Subframe's design tools instead of writing UI code directly. It handles the full design surface: pages, components, snippets, theme tokens, and design docs. The standout piece is theme verification. Before any design call, it compares your codebase's actual tokens against Subframe's to catch role mismatches, like when your "brand" only paints focus rings but Subframe's paints button backgrounds. It then asks whether to align them first. The skill enforces a workflow: design in Subframe, then implement with /subframe:develop, so your React/Tailwind output stays locked to your design system. Useful if you want design tools that respect existing token conventions rather than guessing.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/subframeapp/subframe
- Categories
- Backend & APIs, Documentation, AI & Agent Building, Design & UI/UX
- First seen
- Jun 3, 2026
More from subframeapp/subframe
All 4Recommended
More Backend & APIs
react-refactorpproenca/dot-skillsArchitectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and791skills.sh installs
vitesthairyf/skillsVitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filteri789skills.sh installs
vue-best-practicesuni-helper/skillsMUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-787skills.sh installs
newrailwayapp/railway-skillsThis skill should be used when the user says "setup", "deploy to railway", "initialize", "create project", "create service", or wants to deploy from GitHub. Han786skills.sh installsopenapi-specification-v2hairyf/skillsOpenAPI (Swagger) 2.0 specification for describing REST APIs. Use when writing, validating, or interpreting Swagger 2.0 specs, generating clients/docs, or worki781skills.sh installs
order-lifecyclejoellewis/finance_skillsGuide the design and implementation of order lifecycle management in trading systems. Owns FIX application-layer message flows (NewOrderSingle, ExecutionReport,780skills.sh installs