Agent skill · software engineering · aiskillstore
css-development-refactor
This skill should be used when refactoring existing CSS from inline styles or utility classes to semantic patterns. Triggers on "refactor CSS", "extract styles", "consolidate CSS", "convert inline", "clean up styles", "migrate to semantic". Transforms to semantic classes with dark mode and tests.
Why this skill is useful
Adds specific refactoring patterns and automated checklist for transforming CSS into semantic components, which the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Checklist Details Step 1: Analyze Existing CSS Action: Read and understand the CSS that needs refactoring Look for: Inline styles in component files Repeated utility class combinations in markup CSS scattered across multiple files Missing dark mode support Lack of semantic class names Example patterns to refactor: Capture: File locations Pattern frequency (how many times repeated) Current approach (inline, utilities, old CSS) Mark as completed when analysis is done. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/css-development-refactor