CSS Auditor

Bloated stylesheets slow down builds and increase production bundle sizes. This skill audits CSS, SCSS, and Less files to identify unused selectors, maintainability issues, and inconsistent design tokens across your codebase. ## What it does - **Unused Selector Detection** scans HTML, JSX, TSX, Vue, Svelte, and PHP files to find dead class and ID selectors. - **Specificity Analysis** flags high-risk selectors like IDs, overqualified elements, and long descendant chains that cause style overrides. - **Maintainability Audit** counts `!important` usage, duplicate declarations, obsolete vendor prefixes, and @import chains. - **Token Extraction** lists unique colors, font sizes, spacing, and z-index values to identify near-duplicate variables. - **Breakpoint Inventory** aggregates media queries to help standardize responsive design break-points. ## How it works 1. **Target Styles** by providing paths to CSS, SCSS, or Less files for analysis. 2. **Scan Content** by pointing the auditor to your component or template directory for usage matching. 3. **Apply Safelists** for dynamic classes like `is-active` or `js-*` patterns that static analysis might miss. 4. **Review Report** to identify specific lines for refactoring or deletion based on the generated audit logs. ## Frameworks & tools Works with CSS, SCSS, and Less syntax. Supports content scanning for HTML, React (JSX/TSX), Vue, Svelte, Angular, and PHP templates. ## Why this beats prompting it yourself Generic LLM prompts often hallucinate selector usage or miss complex specificity rules. this skill uses targeted logic to normalize colors and detect exact duplicate declarations that manual reviews overlook in large files. ## Use cases - **Dead Code Elimination** during a refactor to safely remove hundreds of lines of unused CSS. - **Design System Migration** by extracting existing colors and spacing to define new design tokens. - **Performance Optimization** to reduce the CSS payload by removing vendor prefixes and duplicate rules. - **Code Review** to catch `!important` flags or ID selectors before they reach production. ## Known limitations Unused selector detection is static. Dynamic classes built via string concatenation require manual safelisting to avoid false positives.