What is the Refactoring UI skill for Claude Code?

It is a specialized plugin that guides Claude in applying professional design principles, specifically using Tailwind CSS and shadcn/ui components, to create polished web interfaces.

Is this skill suitable for SaaS applications?

Absolutely. It contains dedicated patterns for SaaS-specific needs like data tables, complex forms, and administrative dashboards.

Can it help me decide between a modal and a sheet?

Yes, it includes specific decision frameworks to help determine the best UI pattern based on the complexity and context of the user task.

Does this skill work with any CSS framework?

While the design principles are universal, this specific skill is optimized for Tailwind CSS and the shadcn/ui component library.

Refactoring UI for Tailwind & shadcn

Name: Refactoring UI for Tailwind & shadcn
Author: opkod-france

byopkod-france

0•

デザインツール

Applies professional design principles and visual hierarchy to web interfaces using Tailwind CSS and shadcn/ui components.

This skill transforms basic web layouts into polished, production-grade user interfaces by implementing the 'Refactoring UI' methodology. It provides Claude with a deep understanding of visual hierarchy, typography scales, and spacing systems, allowing it to generate professional designs using Tailwind CSS and shadcn/ui. Whether you are building a conversion-focused landing page or a complex SaaS dashboard, this skill ensures your components follow industry best practices for accessibility, aesthetics, and user experience.

主な機能

01Pre-configured patterns for complex forms and CRUD tables

020 GitHub stars

03Standardized shadcn/ui component composition and variants

04UX decision frameworks for modals, sheets, and navigation

05Context-aware design logic for Marketing vs. SaaS applications

06Professional visual hierarchy and typography scaling

ユースケース

01Designing responsive SaaS dashboards with consistent spacing

02Polishing raw React components into professional UI elements

03Creating accessible and user-friendly multi-step web forms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add opkod-france/opkod-claude-code-plugins refactoring-ui

For use in Claude.ai and ChatGPT

Download Skill