Tailwind Ui Refactor

This is the Refactoring UI book systematized into 52 prioritized rules for Tailwind CSS. It's built for refactoring existing components or writing new ones when you don't have a designer. The rules span nine categories from critical (design intent, hierarchy, spacing) down to polish details, all with Tailwind v4 syntax and fallbacks for v3. What's smart here is the "think first, style second" approach: it forces you to audit what elements actually communicate before touching CSS. If you've read Refactoring UI, this codifies those principles into something Claude can apply consistently. If you haven't, it's a crash course in visual hierarchy through utility classes.

skills.sh installs: 467
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add pproenca/dot-skills --skill tailwind-ui-refactor --agent claude-code

Installs into .claude/skills of the current project.

Files

Refactoring UI Tailwind CSS Best Practices

Comprehensive UI refactoring guide based on Refactoring UI by Adam Wathan & Steve Schoger, implemented with Tailwind CSS utility classes. Contains 52 rules across 9 categories, prioritized by design impact to guide automated refactoring and code generation. Uses Tailwind CSS v4 syntax (v3 notes provided where syntax differs).

Important: Think first, style second. Before applying any visual rule, understand the UI's purpose, identify what matters to the user, and remove unnecessary elements. The Design Intent category (priority 1) must be considered before any styling changes. A simpler component with fewer elements always beats a decorated component with unnecessary markup.