CSS Architecture Reviewer

The problem

CSS fails silently through cascade conflicts and specificity wars. Developers often resort to !important or deeper nesting to force styles, creating a fragile codebase where moving an element breaks the UI.

What it does

• Calculates exact specificity scores (ID, class, element) to explain why specific rules are being overridden.
• Identifies architectural anti-patterns like specificity creep, z-index chaos, and magic numbers.
• Audits stylesheets for deep selector nesting and tight DOM coupling that limits reusability.
• Detects redundant or near-duplicate rules that should be abstracted into shared components or utilities.
• Recommends modern CSS features like @layer or :has() to replace legacy workarounds.

Frameworks & tools

Works with Plain CSS, Sass/SCSS, CSS Modules, Tailwind CSS, and CSS-in-JS libraries like styled-components or Emotion.

Why this beats prompting it yourself

Generic LLMs often give "vibe-based" CSS advice or suggest !important as a quick fix. This skill performs technical specificity computations and applies proven methodologies like BEM, ITCSS, or CUBE CSS based on your specific stack and team size.

Use cases

• Debug why a specific CSS rule isn't applying despite being defined last in the file.
• Perform a health audit on a legacy stylesheet to identify high-risk technical debt.
• Plan a migration strategy from monolithic CSS to Tailwind or CSS Modules.
• Refactor arbitrary z-index values into a maintainable stacking context system.

Known limitations

Cannot definitively confirm dead code if classes are generated via complex JS string concatenation. Browser support advice is general unless a target baseline is provided.