refactoring-ui

The refactoring-ui skill is designed to audit and enhance the visual quality of web interfaces. It addresses common UI problems such as inconsistent spacing, unclear hierarchy, poor color usage, and insufficient depth, which can make applications appear unpolished or confusing. By guiding the refinement of layout, spacing, color palettes, shadows, and component styling, this skill helps developers and designers create more professional, cohesive, and accessible interfaces. The skill is particularly attentive to visual hierarchy and constrained design scales, ensuring that primary content is emphasized appropriately while secondary content supports rather than competes with it.

Key features of the refactoring-ui skill include a grayscale-first workflow, constrained scales for spacing, typography, color, and shadows, and structured guidance on visual hierarchy. It provides practical patterns for forms, navigation, cards, dashboards, and tables, emphasizing the balance between size, weight, and color to direct attention effectively. Additionally, it offers recommendations for component styling, consistent design tokens, dark mode themes, and improving the clarity of data visualizations. The skill also includes scoring guidelines to evaluate how closely a design aligns with these principles, facilitating iterative improvements and systematic audits.

Refactoring-ui is ideal for frontend developers, UI designers, and product teams looking to polish their interfaces without relying on an in-house designer. Use cases include reviewing existing web pages, generating frontend code with a professional design system in mind, creating or refining design tokens, establishing consistent spacing and type scales, and preparing UIs for launch. It is also suitable for teams working with Tailwind CSS or similar frameworks who want to maintain visual consistency and enhance user experience through deliberate, system-based design choices.