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
Design enforcement with memory — keeps your UI consistent across a project
Detects 37 AI writing patterns and rewrites text with human rhythm across 5 voice profiles
WCAG accessibility audit — automated scanning, manual review, remediation