2389-research-css-development-refactor_skill

Overview

This skill refactors existing CSS from inline styles or utility classes into semantic component patterns with dark mode support and tests. It consolidates repeated utility combinations into named classes, preserves behavior, and produces a checklist-driven refactor that is safe to apply incrementally. The output includes semantic classes in components.css, updated markup, dark variants, and test coverage.

How this skill works

The skill analyzes project files to locate inline styles and repeated utility-class patterns, then catalogs frequency and reuse opportunities. It creates semantic classes using @apply, adds dark: variants, updates markup to use the new class names, and adds static and rendering tests to verify the refactor. A Todo checklist guides the work so each step is tracked and behavior remains unchanged.

When to use it

• Converting inline styles to named semantic classes
• Extracting repeated utility combinations from markup
• Migrating from utility-first markup toward component classes
• Adding or standardizing dark mode support
• Cleaning up duplicated or scattered CSS across files

Best practices

• Prefer composing existing classes before creating new ones; only extract high-frequency patterns
• Choose semantic names (e.g., .button-primary) that describe purpose, not color
• Use @apply to centralize utilities and include dark: variants for colors, text and borders
• Add concise CSS comments with usage and migration notes for each new class
• Include both static CSS tests and a simple render test to ensure classes are present and applied

Example use cases

• Replace repeated button utility combinations with .button-primary and update all button markup
• Extract card utility sets into a .card component with dark mode variants
• Migrate occasional inline style props to semantic classes to simplify component props
• Consolidate badge or status utility combinations into .badge-success / .badge-warning classes
• Add test assertions to verify new classes exist and include dark: rules