⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
refactoring-ui
Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design, and writing copy that doesn't read like AI wrote it. Use this skill whenever the user is creating new pages, building components, making design additions or changes, reviewing UI code, asking about design decisions (colors, fonts, spacing, layout), writing or editing interface copy, or discussing visual improvements. Trigger for any design-related conversation including "how should this look", "what color", "font size", "spacing", "layout", "responsive", "mobile", "this copy", "headline", "button text", "microcopy", or when reviewing/critiquing existing interfaces.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
// README
Refactoring UI Design Skill
An opinionated agent skill for building professional UI without a designer, based on Refactoring UI principles by Adam Wathan & Steve Schoger.
What This Skill Covers
Design Thinking
- Design Personality & Tone — Formal/casual, reserved/expressive framework with domain anchors
- Color Theory & Psychology — Color wheel, harmony schemes, hue psychology, saturation as a design lever
- Layout Decision Framework — Content-first layout selection, density spectrum, domain layout profiles
- Breaking AI Defaults — Named anti-patterns (purple gradients, SaaS templates) with concrete alternatives
- Component Variation — Same component, different design based on context
Execution
- Visual Hierarchy — Size, weight, and color as tools for emphasis
- Typography — Modular scales, line height, letter spacing, weight strategy
- Color — HSL palettes, UI states, warm/cool grays, accessibility
- Spacing — Consistent scales, proximity relationships
- Layout — Max-width constraints, breathing room, alignment
- Mobile-First — Breakpoint strategy, touch targets, responsive typography
- Depth & Shadows — Elevation systems, natural shadow direction
- Dark Mode — Systematic approach (not just inverted colors)
- Form Patterns — Input styling, labels, errors, field grouping
- Accessibility — Focus states, motion sensitivity, semantic HTML
- Animation — Timing, easing, what to animate
- Design Audit Checklist — Structured review framework
Installation
Claude Code / Warp / Cursor
# Clone to your skills directory
git clone https://github.com/jaywilburn/refactoring-ui-skill.git ~/.agents/skills/refactoring-ui
Or copy skills/refactoring-ui/SKILL.md to your preferred skills location:
- Claude Code:
~/.claude/skills/refactoring-ui/ - Codex CLI:
~/.codex/skills/refactoring-ui/ - Cursor:
.cursor/skills/refactoring-ui/
Via npx (once indexed)
npx skills add jaywilburn/refactoring-ui-skill/refactoring-ui
When It Triggers
The skill activates when you're:
- Creating new pages or components
- Making design additions or changes
- Asking about colors, fonts, spacing, layout
- Discussing "how should this look"
- Reviewing or critiquing existing interfaces
- Working on responsive/mobile design
Example Prompts
"How should I style this card component?"
"What colors should I use for this dashboard?"
"Make this form look more professional"
"Review this page layout"
"Help me set up a consistent spacing system"
Differentiators
Unlike other UI design skills, this one fights AI-generated sameness head-on:
- Design Thinking Layer — Strategic decisions (personality, color theory, layout strategy) before tactical execution
- Anti-AI-Sameness — Explicitly names and provides alternatives to common AI defaults (purple gradients, SaaS templates, uniform card grids)
- Color Theory & Psychology — Full color wheel, harmony schemes, hue psychology, and saturation strategies — not just "pick a palette"
- Domain-Aware Design — Personality profiles and layout patterns for fintech, healthcare, e-commerce, creative tools, dev tools, and more
- Component Variation — Cards, navs, buttons, and tables styled differently based on context, not copied from a template
- Dark Mode Design — Surface hierarchy, saturation shifts, proper dark palettes
- Form Design Patterns — Complete form styling guidance
- Accessibility Section — Beyond contrast ratios (focus, motion, semantics)
- Animation Principles — Timing, easing, what to animate
- Design Audit Checklist — Structured review process including personality and intent checks
Credits
Based on Refactoring UI by Adam Wathan & Steve Schoger.
This skill does not replace the book. If you want to truly understand UI design as a developer, buy and read Refactoring UI — it's one of the most practical design resources available.
License
MIT
// HOW IT'S BUILT
KEY FILES