Summary
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.
Install to Claude Code
npx -y skills add pproenca/dot-skills --skill tailwind-ui-refactor --agent claude-codeInstalls into .claude/skills of the current project.
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.md
Select a file.
Featured
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →First SeenJun 3, 2026
