How does UI Refactor improve my existing code?

It analyzes your CSS or framework-specific styling (like Tailwind) and suggests specific code changes to improve spacing, typography, and hierarchy based on professional design principles.

Does it support Tailwind CSS?

Absolutely. The skill specifically references Tailwind as a primary use case and provides recommendations compatible with utility-first CSS workflows.

What are the 'Quick Wins' in the output?

Quick Wins are high-impact, low-effort styling changes identified by the skill that provide the most immediate improvement to your UI's professional appearance.

Can I use this skill with screenshots?

Yes, the skill is designed to handle design reviews of screenshots, providing structured feedback on what works, what principles are violated, and how to fix them.

UI Refactor & Design Review

Name: UI Refactor & Design Review
Author: timbrinded

bytimbrinded

0•

デザインツール

Reviews frontend interfaces and provides actionable CSS improvements to enhance visual hierarchy, spacing, and professional polish.

UI Refactor is a specialized Claude Code skill designed to act as an automated design partner for frontend developers. It systematically analyzes screenshots, code snippets, or layout descriptions across six critical dimensions—hierarchy, spacing, typography, color, depth, and polish—to transform amateur interfaces into professional-grade products. By applying a core philosophy of constrained choices and functional-first design, the skill provides specific, code-ready recommendations for HTML, CSS, Tailwind, and modern JavaScript frameworks like React, Svelte, and Vue.

主な機能

01Constrained system recommendations for colors, shadows, and type scales

02Automated design hierarchy evaluation to prioritize primary user actions

030 GitHub stars

04Systematic 6-point design audit covering hierarchy, spacing, and typography

05Actionable CSS and Tailwind code fixes for identified UI issues

06Visual polish guidance for empty states, borders, and professional finishing

ユースケース

01Reviewing a raw screenshot or wireframe to identify layout and spacing improvements

02Refactoring existing CSS or Tailwind code to implement a cohesive design system

03Polishing a nearly-finished feature to ensure accessible contrast and professional typography

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add timbrinded/kiln ui-refactor

For use in Claude.ai and ChatGPT

Download Skill