# Refactor CSS Into Semantic Components

Scattered inline styles and repeated utility classes make frontend code hard to maintain. This skill guides Claude, Codex, and Claude Code through semantic CSS extraction with dark mode and tests.

## Install

```bash
npx skillstore add 2389-research/css-development-refactor
```

## Metadata

- - Status: approved
- - Slug: 2389-research-css-development-refactor
- - Version: 1.0.0
- - Author: 2389-research
- - GitHub username: 2389-research
- - License: MIT
- - Repository: https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/refactor
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, filesystem
- - Quality score: 79
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/2389-research-css-development-refactor
- - Manifest: https://skillstore.pages.dev/api/skills/2389-research-css-development-refactor/manifest

## Capabilities

- Identifies inline styles and repeated utility class combinations in frontend files.
- Guides extraction of repeated patterns into semantic CSS component classes.
- Encourages reuse of existing component classes before creating new styles.
- Adds dark mode variants to new or refactored CSS classes.
- Updates markup to use semantic class names while preserving extra classes.
- Recommends static CSS and component rendering tests for refactored styles.

## Use Cases

- Consolidate Repeated Utility Classes: Turn repeated button, card, badge, or panel utility combinations into named component classes.
- Migrate Inline Styles Safely: Move inline styling from components into CSS classes while keeping current layout and behavior.
- Add Dark Mode During Cleanup: Refactor existing component styles and add matching dark mode variants in the same pass.

## Prompt Templates

### Find CSS Refactor Targets

```
Use this skill to inspect my frontend files for inline styles and repeated utility class groups. Report the best refactor targets first.
```

### Extract Semantic Classes

```
Refactor the repeated utility classes in these components into semantic classes in the project CSS file. Preserve existing behavior and class-specific overrides.
```

### Add Dark Mode Variants

```
Use this skill to add dark mode variants while extracting semantic CSS classes. Check backgrounds, text colors, borders, and interactive states.
```

### Refactor And Validate

```
Refactor scattered CSS into semantic component patterns, update markup, add focused tests, run available validation, and summarize changed files and behavior checks.
```

## Limitations

- Does not include an executable refactoring script or automated parser.
- Requires the agent to inspect the project structure before choosing file paths.
- Visual equivalence depends on available tests, screenshots, or manual review.
- Tailwind @apply guidance may need adjustment for projects without Tailwind.

## Best Practices

- Start with a pattern inventory and refactor the highest-frequency duplication first.
- Reuse existing component classes before adding new semantic class names.
- Run available tests and inspect light and dark modes after each meaningful change.

## Anti Patterns

- Do not rename classes without checking current markup, variants, and tests.
- Do not remove one-off utility classes that express local layout differences.
- Do not claim visual behavior is unchanged without validation evidence.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-27T16:32:35.562\+00:00
- - Summary: Static analysis reported many command, filesystem, weak-crypto, and network-reconnaissance patterns, but review found these are Markdown examples and normal CSS refactoring instructions. No malicious intent, exfiltration, prompt injection, or executable bundled script was found in SKILL.md.

## Stats

- - Views: 158
- - Downloads: 16
- - Favorites: 0
- - Popularity score: 0