How does the skill identify unused selectors?

The skill extracts all selectors from your CSS files and performs a comprehensive search across your project's HTML and JavaScript files to verify if those selectors are being utilized in the DOM.

Can this help reduce my CSS bundle size?

Yes. By identifying unused rules and duplicate declarations, it provides clear instructions on what code can be safely removed or consolidated to minimize file size.

Does this tool require complex configuration?

No, it uses pattern-based analysis and standard project directory structures, making it fast and easy to run without requiring an AST parser or complex build steps.

Does it support modern CSS variables and design tokens?

Absolutely. It specifically checks for hardcoded values (like hex codes or pixel measurements) and suggests replacing them with your project's defined CSS variables or design tokens.

CSS Quality Audit

Name: CSS Quality Audit
Author: astro44

byastro44

•

设计工具

Audits styling files to optimize performance and maintainability by detecting unused selectors, specificity issues, and design token violations.

The css-audit skill provides a comprehensive analysis of your project's styling layer to ensure clean, performant, and scalable CSS. It automatically identifies technical debt like unused selectors and duplicate rules, warns against high specificity that causes maintenance challenges, and enforces design system consistency by flagging hardcoded values that should be replaced with design tokens. This is an essential tool for frontend developers looking to reduce bundle sizes and maintain a strict visual design language across large applications.

主要功能

01Design token compliance auditing to enforce consistent variable usage

02Specificity analysis to flag high-risk or overly complex selectors

03Actionable cleanup suggestions and performance impact summaries

04Automatic detection of unused CSS selectors across HTML and JS files

052 GitHub stars

06Identification of duplicate property declarations to reduce code redundancy

使用场景

01Refactoring legacy codebases to remove dead CSS and minimize technical debt

02Migrating hardcoded hex values to a centralized design token system

03Pre-deployment performance checks to optimize CSS delivery and bundle size

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add astro44/autonom8-agents css-audit

For use in Claude.ai and ChatGPT