All skills
Skillintermediate
/consolidate - Consolidate CSS
Merge and consolidate duplicate CSS rules and redundant stylesheets.
Claude Code Knowledge Pack7/10/2026
Overview
/consolidate - Consolidate CSS
Merge and consolidate duplicate CSS rules and redundant stylesheets.
Steps
- Parse all CSS files and build a map of all rules and their properties
- Identify duplicate selectors with identical property declarations
- Find selectors with overlapping properties that can be merged
- Detect redundant property declarations overridden by later rules
- Identify opportunities to use CSS custom properties for repeated values
- Find color values that differ by less than 5% and could be unified
- Consolidate media queries by grouping same-breakpoint rules together
- Merge small single-purpose CSS files into logical module files
- Extract common patterns into utility classes or mixins
- Verify the consolidated CSS produces identical rendered output
- Run visual regression tests if available to catch rendering changes
- Report: files merged, rules consolidated, size reduction percentage
Rules
- Never change the visual output; consolidation must be invisible to users
- Preserve CSS specificity order when merging selectors
- Keep CSS module boundaries intact; do not merge across component scopes
- Convert repeated magic numbers to CSS custom properties
- Maintain source maps for debugging after consolidation
- Process one logical group at a time for safe incremental changes
- Test in multiple browsers after consolidation