frontend-refactoring-ui

What problem does it solve?

This Skill helps designers and frontend engineers quickly audit and improve UI design quality by standardizing visual hierarchy, spacing, color, and depth across interfaces. It supports grayscale-first workflow, constrained design scales, and consistent shadows to ensure professional results.

Core Features & Use Cases

• Visual hierarchy enforcement: ensure primary content stands out via size, weight, and color.
• Spacing & scale governance: apply fixed spacing scales to create predictable layouts.
• Color and depth guidance: build grayscale-first palettes and elevation rules for accessible UI design.
• Use case: when evaluating Tailwind-based interfaces or Figma prototypes, apply the framework to diagnose and propose design improvements.

Quick Start

Audit a UI mockup and propose a grayscale-first refactor that improves hierarchy, spacing, and elevation.