File contents Refactoring UI Skills
Atomic UI/design decision-making skills extracted from the book Refactoring UI by Adam Wathan and Steve Schoger.
Overview
These skills represent atomic transformations that can be composed to improve any interface design. Each skill has:
Clear input/output specifications
Decision criteria and visual signals
Common failure modes
Prerequisites and dependencies
Core Skills (10)
1. Visual Hierarchy
Skill
Purpose
Type
01-establish-visual-hierarchyDetermine what draws attention first, second, third
Evaluative + Generative
2. Typography
Skill
Purpose
Type
02-apply-typography-scaleCreate hierarchy with limited font sizes
Generative + Evaluative
3. Color
Skill
Purpose
Type
03-build-color-paletteCreate functional, limited color system
Generative + Evaluative
09-manage-color-contrastEnsure accessibility and readability
Evaluative + Corrective
4. Spacing & Layout
Skill
Purpose
Type
04-apply-consistent-spacingUse systematic spacing for rhythm
Generative + Evaluative
10-group-related-elementsUse proximity to show relationships
Generative + Evaluative
5. Components
Skill
Purpose
Type
05-design-button-hierarchyCreate clear action distinctions
Generative + Evaluative
07-design-empty-statesCreate helpful zero-content states
Generative + Evaluative
6. Polish & Details
Skill
Purpose
Type
06-eliminate-visual-clutterRemove unnecessary decorations
Corrective + Evaluative
08-use-shadows-appropriatelyAdd depth only when necessary
Corrective + Evaluative
Usage
Apply these skills in sequence:
Start with hierarchy (what matters most?)
Establish layout structure and spacing
Apply typography scale
Build color palette
Design components with proper hierarchy
Polish details (eliminate clutter, appropriate shadows)
Handle edge states (empty states, errors)
1 --- 2 name: refactoring-ui-plugin 3 description: Refactoring UI Skills 4 --- 5 # Refactoring UI Skills 6 7 Atomic UI/design decision-making skills extracted from the book *Refactoring UI* by Adam Wathan and Steve Schoger. 8 9 ## Overview 10 11 These skills represent atomic transformations that can be composed to improve any interface design. Each skill has: 12 - Clear input/output specifications 13 - Decision criteria and visual signals 14 - Common failure modes 15 - Prerequisites and dependencies 16 17 ## Core Skills (10) 18 19 ### 1. Visual Hierarchy 20 | Skill | Purpose | Type | 21 |-------|---------|------| 22 | `01-establish-visual-hierarchy` | Determine what draws attention first, second, third | Evaluative + Generative | 23 24 ### 2. Typography 25 | Skill | Purpose | Type | 26 |-------|---------|------| 27 | `02-apply-typography-scale` | Create hierarchy with limited font sizes | Generative + Evaluative | 28 29 ### 3. Color 30 | Skill | Purpose | Type | 31 |-------|---------|------| 32 | `03-build-color-palette` | Create functional, limited color system | Generative + Evaluative | 33 | `09-manage-color-contrast` | Ensure accessibility and readability | Evaluative + Corrective | 34 35 ### 4. Spacing & Layout 36 | Skill | Purpose | Type | 37 |-------|---------|------| 38 | `04-apply-consistent-spacing` | Use systematic spacing for rhythm | Generative + Evaluative | 39 | `10-group-related-elements` | Use proximity to show relationships | Generative + Evaluative | 40 41 ### 5. Components 42 | Skill | Purpose | Type | 43 |-------|---------|------| 44 | `05-design-button-hierarchy` | Create clear action distinctions | Generative + Evaluative | 45 | `07-design-empty-states` | Create helpful zero-content states | Generative + Evaluative | 46 47 ### 6. Polish & Details 48 | Skill | Purpose | Type | 49 |-------|---------|------| 50 | `06-eliminate-visual-clutter` | Remove unnecessary decorations | Corrective + Evaluative | 51 | `08-use-shadows-appropriately` | Add depth only when necessary | Corrective + Evaluative | 52 53 ## Usage 54 55 Apply these skills in sequence: 56 1. Start with hierarchy (what matters most?) 57 2. Establish layout structure and spacing 58 3. Apply typography scale 59 4. Build color palette 60 5. Design components with proper hierarchy 61 6. Polish details (eliminate clutter, appropriate shadows) 62 7. Handle edge states (empty states, errors)
commit 26e429cfdf
Frequently asked questions How do I install the Refactoring UI Plugin skill? Run npx skillmds@latest add gnurio/refactoring-ui-plugin in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Refactoring UI Plugin skill do? Refactoring UI Skills It is listed under Coding & Dev Tools on SkillMD.
Is Refactoring UI Plugin safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Refactoring UI Plugin? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Refactoring UI Plugin free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Refactoring UI Plugin? gnurio (@gnurio) published this skill. Their other Agent Skills are listed on their SkillMD profile.
gnurio