What frontend files does it support?

The skill automatically discovers and analyzes HTML, CSS, SCSS, Less, JSX/TSX (React), Vue, Svelte, Astro, and more.

Can it actually modify my code or just give advice?

It can do both. It provides actionable suggestions and can use Claude's editing capabilities to apply those design improvements directly to your files.

Is it based on a specific design methodology?

Yes, it is heavily inspired by the 'Refactoring UI' framework by Adam Wathan and Steve Schoger, focusing on practical tactics for developers to make better design decisions.

Does this skill work with Tailwind CSS?

Yes, it specifically detects Tailwind and provides recommendations using utility classes and config-compatible values instead of raw CSS.

Refactoring UI Assistant

Name: Refactoring UI Assistant
Author: eugener

byeugener

•

デザインツール

Refactors and polishes frontend code using professional visual design principles to improve hierarchy, spacing, and typography.

This skill transforms functional but unpolished interfaces into professional-grade designs by applying the proven principles from 'Refactoring UI'. It automatically scans your frontend files—including React, Vue, Svelte, and Tailwind CSS—to identify common design smells like over-reliance on font size for hierarchy, poor color contrast on backgrounds, and inconsistent spacing systems. Whether you need a full CSS audit or minor visual polish, this tool provides actionable code changes and suggestions that enhance clarity, balance, and aesthetic appeal without requiring a dedicated designer.

主な機能

01Visual Hierarchy Audit to improve element weight, contrast, and label usage

02Color Palette Refinement with HSL-based shade definitions and saturation balancing

032 GitHub stars

04Automated Frontend Discovery across HTML, CSS, and modern JavaScript frameworks

05Spacing System Standardization using constrained, non-linear scales

06Typography Optimization covering type scales, line heights, and letter spacing

ユースケース

01Polishing a 'developer-designed' dashboard to look like a high-end SaaS product

02Improving interface readability and accessibility through better typography and contrast ratios

03Auditing a legacy CSS codebase to replace arbitrary values with a consistent design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eugener/cc-marketplace refactoring-ui

For use in Claude.ai and ChatGPT

Download Skill