css-developmentlisted

# CSS Development Skill ## Overview Comprehensive workflow for CSS development using Tailwind + semantic component patterns. This skill automatically routes you to the appropriate specialized workflow based on context. **This skill will invoke one of three sub-skills:** - `css-development:create-component` - Creating new CSS components - `css-development:validate` - Reviewing existing CSS - `css-development:refactor` - Transforming CSS to semantic patterns ## When This Skill Applies Claude Code will automatically load this skill when you: - Create new CSS components or styles - Review or validate existing CSS code - Refactor inline styles or utility classes - Work with component styling in any framework - Need to add dark mode support - Write CSS tests ## CSS Development Patterns All sub-skills follow these core patterns. Reference this section when working with CSS. ### Core Principles 1. **Semantic Naming** - Use descriptive class names (`.button-primary`, `.card-header`) not utility names (`.btn-blue`, `.card-hdr`) 2. **Tailwind Composition** - Leverage Tailwind utilities via `@apply` directive 3. **Dark Mode by Default** - Include `dark:` variants for all colored/interactive elements 4. **Composition Over Creation** - Reuse existing classes before creating new ones 5. **Test Coverage** - Static CSS tests + component rendering tests 6. **Documentation** - Usage comments above each component class ### Component Class Pattern ```css /* Button component - Primary a