A community-driven registry for the Claude Code ecosystem. Not affiliated with Anthropic.
Are you the author? Sign in to claim
10 applied skills for Claude Code and Cursor that turn the principles of Refactoring UI into structured AI-assisted desi
Ten structured AI skills for evaluating and improving UI designs — covering visual hierarchy, typography, color, spacing, buttons, clutter, empty states, shadows, contrast, and grouping. Use individual skills for targeted fixes or invoke the meta-refactor-ui orchestrator for a full design pass.
Attribution: These skills are based on the principles and methodology in Refactoring UI by Adam Wathan and Steve Schoger (© Tailwind Labs Inc.). This repository is an independent AI skill implementation and is not affiliated with or endorsed by Tailwind Labs.
This plugin packages 10 focused UI design skills plus a refactor-ui meta-skill that runs a full design pass. The skills cover visual hierarchy, typography, color, spacing, button hierarchy, visual clutter, empty states, shadows, contrast, and grouping.
/refactor-ui --design="path/to/design.md"
/establish-visual-hierarchy --input="design-description"
@refactor-ui --design="path/to/design.md"
@apply-typography-scale --context="marketing"
/refactor-ui evaluate --file="design.md"
/refactor-ui fix --issues="visual-hierarchy"
See PLATFORM_GUIDE.md for platform-specific installation and usage.
| # | Skill | Purpose | Type |
|---|---|---|---|
| 01 | Establish Visual Hierarchy | Determine what draws attention first | Evaluative |
| 02 | Apply Typography Scale | Create hierarchy with font sizes, weights, and colors | Generative |
| 03 | Build Color Palette | Define grey, primary, and accent color scales | Generative |
| 04 | Apply Consistent Spacing | Use systematic spacing and rhythm | Generative |
| 05 | Design Button Hierarchy | Separate primary, secondary, and tertiary actions | Generative |
| 06 | Eliminate Visual Clutter | Remove unnecessary decoration | Corrective |
| 07 | Design Empty States | Create useful zero-content states | Generative |
| 08 | Use Shadows Appropriately | Use elevation functionally | Corrective |
| 09 | Manage Color Contrast | Preserve readability and accessibility | Evaluative |
| 10 | Group Related Elements | Use proximity to show relationships | Generative |
.
├── .claude-plugin/plugin.json
├── .codex-plugin/plugin.json
├── .cursor-plugin/plugin.json
├── adapters/
├── examples/
├── skills/
│ ├── 01-establish-visual-hierarchy/SKILL.md
│ ├── ...
│ └── meta-refactor-ui/SKILL.md
├── tests/
├── PLATFORM_GUIDE.md
├── README.md
├── SKILL.md
└── skills.json
Validate the skill layout:
bash tests/validate-skills.sh
Check platform detection:
node -e "console.log(require('./adapters/platform-adapter').getPlatformDisplayName())"
All rights reserved. See LICENSE.
These skills are based on Refactoring UI by Adam Wathan and Steve Schoger (© Tailwind Labs Inc.). This repository is not affiliated with or endorsed by Tailwind Labs.
1000+ skills curated from Anthropic, Vercel, Stripe, and other engineering teams
@user_bdd01887CommunityDesign enforcement with memory — keeps your UI consistent across a project
Universal SEO skill for Claude Code. 25 sub-skills + 18 sub-agents covering technical SEO, E-E-A-T, schema, GEO/AEO, bac
Route Claude Code traffic to any of 17 provider backends including free or local models
