When should I trigger the refactoring-ui skill?

Trigger it whenever your UI looks 'off', when a user mentions fixing the design, or when you need to implement a new layout from scratch using best practices.

What is the Refactoring UI skill?

It is a specialized capability for Claude Code that applies systematic design principles to improve the visual quality, hierarchy, and professionalism of web interfaces.

How does this skill help with Tailwind CSS?

It provides specific guidance on using Tailwind's utility classes for spacing, typography, and color to achieve consistent results based on professional design scales.

Does it support accessibility standards?

Absolutely. The skill follows core accessibility principles, including contrast ratio requirements for text and avoiding color-only information markers.

Can it help me design without a professional designer?

Yes, it uses a rules-based framework to help developers make better aesthetic decisions regarding layout, contrast, and depth without relying on pure creativity.

Refactoring UI Design System

Name: Refactoring UI Design System
Author: micsapp

bymicsapp

0•

设计工具

Audits and improves web interfaces by applying systematic principles for visual hierarchy, spacing, typography, and color.

This skill empowers Claude to act as an expert UI designer by applying an opinionated, system-based approach to frontend development. Based on the Refactoring UI framework, it focuses on transforming 'developer-designed' UIs into professional interfaces using constrained scales, a grayscale-first workflow, and deliberate depth modeling. It is particularly useful for developers using Tailwind CSS or modern CSS frameworks who need to fix layout issues, improve readability, or create polished components without a dedicated designer.

主要功能

01Systematic spacing implementation using constrained linear scales

020 GitHub stars

03Typography optimization with modular scales and context-aware line heights

04Visual hierarchy auditing using size, weight, and color levers

05Elevation and depth modeling using multi-part shadow systems

06Accessible color palette generation with HSL-based shade adjustments

使用场景

01Polishing a rough MVP dashboard to look professional and enterprise-ready

02Fixing cluttered forms and tables by improving white space and data hierarchy

03Auditing existing Tailwind CSS codebases for design consistency and accessibility

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills refactoring-ui

For use in Claude.ai and ChatGPT

主要功能

01Systematic spacing implementation using constrained linear scales

020 GitHub stars

03Typography optimization with modular scales and context-aware line heights

04Visual hierarchy auditing using size, weight, and color levers

05Elevation and depth modeling using multi-part shadow systems

06Accessible color palette generation with HSL-based shade adjustments

使用场景

01Polishing a rough MVP dashboard to look professional and enterprise-ready

02Fixing cluttered forms and tables by improving white space and data hierarchy

03Auditing existing Tailwind CSS codebases for design consistency and accessibility

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills refactoring-ui

For use in Claude.ai and ChatGPT