css-development:refactor
OfficialTurn CSS into semantic, dark-ready components.
Author2389-research
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill helps teams transform scattered CSS and inline styles into semantic, reusable component classes, streamlining maintenance and consistency across the codebase.
Core Features & Use Cases
- Semantic naming: Replace non-descriptive class names with meaningful component-based names.
- Dark mode support: Add dark: variants for all new components.
- Test coverage: Provide static and rendering tests for refactored styles.
- Use Case: When existing markup uses many utility classes, convert them into a small set of semantic components and update markup.
Quick Start
Use the css-development:refactor skill to analyze and refactor CSS from inline styles and utilities into semantic classes with dark mode and tests.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: css-development:refactor Download link: https://github.com/2389-research/claude-plugins/archive/main.zip#css-development-refactor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.