Organize long React className attributes into semantic multi-line groups.
npx skills add https://github.com/ahkohd/dotfiles --skill react-classlist
Please help me install this Agent Skill. Skill: react-classlist Source: https://github.com/ahkohd/dotfiles/tree/main/claude/.claude/skills/react-classlist Command: npx skills add https://github.com/ahkohd/dotfiles --skill react-classlist
This Skill helps organize long or disorganized className attributes in React components into semantic groups, improving readability and maintainability.
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().
High-intent search queries and answers about installing and using this skill.
Organize long className attributes by grouping them semantically—layout, spacing, sizing, display, typography, colors, borders, positioning, and transitions—then break into multiple lines with each group under ~80 characters. Use cn() if already imported, otherwise className, to keep code readable and maintainable.
Refactor classNames when a single line exceeds 80–100 characters, when cn() or classList() usage is scattered across components, or during code reviews. Semantic grouping improves readability and makes future changes easier without altering functionality.
Yes. Use cn() if it's already imported in your component; otherwise use className. Both support multi-line semantic grouping. The choice depends on whether your project already uses a classnames utility, not on the grouping strategy.
Group in this order: layout (flex, grid), spacing (margin, padding), sizing (width, height), display properties, typography, colors and backgrounds, borders and effects, positioning, transitions, then responsive variants (md:, lg:). This order improves scannability and consistency.
Keep responsive variants (md:, lg:, etc.) grouped at the end after all base utility classes. Break lines so each group—base utilities and responsive prefixes together—stays under ~80 characters, maintaining semantic clarity across all breakpoints.
tnunamakSort Tailwind CSS class lists in JSX className and CVA base strings.
ianyimiEnforce global coding style guidelines across multi-language codebases.
avvaleStandardize Tailwind CSS 4 class usage in React and Vue components.
KilloconQCodify Tailwind 4 className composition patterns with cn() and style props.
