Can this skill analyze CSS-in-JS libraries?

Yes, CDP tracks rules injected via JavaScript, though they may not appear in standard stylesheet enumerations if they are not attached to the DOM in a traditional link tag.

Why do some of my active styles appear as unused in the report?

Styles such as :hover states, active modals, or hidden accordions only register as 'used' if they are triggered during the tracking session. You must interact with those elements to get accurate data.

Does this work with Firefox or Safari browsers?

No, this skill specifically requires the Chrome DevTools Protocol (CDP) for rule tracking, which is currently only available in Chromium-based browsers.

How are the estimated KB savings calculated?

Savings are estimated proportionally by comparing the ratio of unused rules to total rules against the total CSS transfer size reported by the browser's resource timing API.

CSS Coverage & Optimization Tool

Name: CSS Coverage & Optimization Tool
Author: anouar1991

byanouar1991

•

Analytics & Monitoring

Analyzes CSS usage via Chrome DevTools to identify dead code and optimize frontend performance.

This skill leverages the Chrome DevTools Protocol (CDP) and Playwright to provide a deep-dive analysis of CSS rule usage on any web page. It tracks which styles are actually rendered and used during user interactions, producing a detailed report that highlights unused selectors, calculates per-stylesheet coverage percentages, and estimates potential file size savings. It is an essential tool for developers looking to purge bloated CSS frameworks, audit legacy stylesheets, or implement critical CSS strategies by identifying exactly which rules are redundant.

Key Features

01Detection of dynamic CSS triggered by hover, click, and scroll interactions

021 GitHub stars

03Per-stylesheet coverage breakdown with used vs. unused rule counts

04Estimated transfer size savings in KB based on unused selectors

05Automated identification of bloat in frameworks like Bootstrap or Tailwind

06Real-time CSS rule usage tracking via Chrome DevTools Protocol (CDP)

Use Cases

01Auditing CSS framework usage to determine which utility classes are actually necessary

02Reducing page weight by identifying and removing dead CSS from production environments

03Validating the impact of CSS refactoring or tree-shaking efforts on web performance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude css-coverage-treemap

For use in Claude.ai and ChatGPT

Download Skill