css-development-refactorlisted

# CSS Development: Refactor ## Overview Transforms existing CSS into semantic component patterns: - Extract inline styles to semantic classes - Consolidate utility classes from markup into `@apply` compositions - Add dark mode variants - Add test coverage - Preserve existing functionality (behavior-neutral refactoring) **This is a sub-skill of `css-development`** - typically invoked automatically via the main skill. ## When This Skill Applies Use when: - Converting inline styles to semantic classes - Extracting repeated utility combinations from markup - Migrating from pure utility-first to semantic components - Adding dark mode to existing CSS - Cleaning up scattered or duplicated CSS ## Pattern Reference This skill refactors toward patterns documented in the main `css-development` skill: **Semantic naming:** `.button-primary` not `.btn-blue` **Tailwind composition:** Use `@apply` to compose utilities **Dark mode:** Include `dark:` variants **Composition first:** Reuse existing classes before creating new **Test coverage:** Static CSS + component rendering tests ## Workflow When this skill is invoked, create a TodoWrite checklist and refactor systematically. ### Announce Usage "I'm using the css-development:refactor skill to transform this CSS into semantic component patterns." ### Create TodoWrite Checklist Use the TodoWrite tool: ``` Refactoring CSS: - [ ] Analyze existing CSS (identify what needs refactoring) - [ ] Find repeated patterns (look for duplicate