Can it help with web accessibility?

Absolutely. It enforces WCAG contrast ratios and includes ethical boundaries to ensure that visual hierarchy isn't used to hide important information.

Is this skill compatible with Tailwind CSS?

Yes, it is highly optimized for Tailwind CSS, providing specific utility class recommendations for spacing, colors, shadows, and typography scales.

Does it provide advice on font selection?

While this skill focuses on typographic hierarchy and scales, it suggests using the 'web-typography' skill for specific typeface selection and pairings.

How does the 0-10 scoring system work?

The skill evaluates your UI code against seven core design principles and provides a numerical score alongside specific, actionable steps to reach a perfect 10/10.

What is the 'grayscale-first' principle?

It is a workflow that forces you to build proper hierarchy using only spacing, contrast, and typography before adding color, ensuring the design is functionally sound.

Refactoring UI Design System

Name: Refactoring UI Design System
Author: wondelai

bywondelai

•

214

•

Design Tools

Audits and improves web interfaces using a systematic approach to visual hierarchy, spacing, and color systems.

This skill implements the principles of the Refactoring UI framework within Claude Code, allowing the agent to transform functional but unpolished interfaces into professional, high-quality designs. It focuses on a systems-based approach rather than arbitrary aesthetic choices, utilizing grayscale-first workflows, constrained scales for spacing and typography, and a 0-10 scoring system to evaluate design quality. Whether you are building from scratch or refactoring existing Tailwind CSS code, this skill provides the domain-specific guidance needed to achieve perfect visual hierarchy and depth.

Key Features

01Constrained spacing and sizing scales for layout consistency

02214 GitHub stars

03Grayscale-first design workflow for optimal visual hierarchy

04Modular typography scales and contextual line-height optimization

05Depth and elevation modeling using a standardized shadow system

06Systematic color palette generation with accessible contrast ratios

Use Cases

01Auditing existing frontend code for design system inconsistencies

02Fixing 'off' visual hierarchy and spacing in complex web dashboards

03Polishing raw HTML/Tailwind prototypes into production-ready interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wondelai/skills refactoring-ui

For use in Claude.ai and ChatGPT

Download Skill