react-classlist

What problem does it solve?

This Skill helps organize long or disorganized className attributes in React components into semantic groups, improving readability and maintainability.

Core Features & Use Cases

• Automatic grouping by category order: Layout, Spacing, Sizing, Display, Typography, Colors & backgrounds, Borders & effects, Positioning, Transitions, and responsive variants.
• Support for cn() or className: Use cn() if already imported, otherwise standard className.
• Consistent multi-line formatting: Breaks lines so each group is readable and cohesive.
• Use Case: Refactor a messy className like "flex items-center justify-between w-full md:w-auto p-2 md:p-4 bg-white" into a clean, grouped, multi-line form.

Quick Start

Refactor a long className in a React component by applying this Skill to the file, then replace the original string with the formatted className using cn().