skills.rest
anouar1991
anouar1991COMMUNITY
Explore all skills by this author →
GitHub

css-coverage-treemap

Measure CSS rule usage per stylesheet via CDP and report dead rules.

1|Updated Jan 9, 2026
Search Tags:#css#playwright#cdp#web-performance#stylesheet#css-coverage
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill css-coverage-treemap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-coverage-treemap
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/css-coverage-treemap
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill css-coverage-treemap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps developers pinpoint and reduce unused CSS by measuring actual rule usage across stylesheets using the Chrome DevTools Protocol (CDP). It reports a per-stylesheet breakdown of used versus unused rules, highlights top unused selectors, and estimates potential file-size savings.

Core Features & Use Cases

  • Per-stylesheet coverage: maps usage data to each stylesheet to identify waste.
  • Top unused selectors: surfaces selectors that contribute most to bloat for targeted cleanup.
  • Size savings estimates: projects potential transfer-size reductions based on unused rules.
  • Cross-route comparison: compare CSS usage across routes in SPA-like contexts to guide refactoring.

Quick Start

Run the tool on a page to generate a per-stylesheet CSS coverage report.

Frequently Asked Questions about css-coverage-treemap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find unused CSS rules in my stylesheets?▼

Yes, you can compare CSS coverage across routes in single-page or multi-page apps. By running the tool on different pages, you map usage data per stylesheet to identify waste and guide refactoring decisions for each route.

How does CSS coverage measurement work with CDP?▼

CSS coverage reports include a per-stylesheet breakdown of used versus unused rules, top unused selectors that contribute most to bloat, and estimates of potential transfer-size reductions based on those unused rules.

Does this CSS coverage tool work with Playwright?▼

You need Playwright and a browser environment supporting the Chrome DevTools Protocol. The tool uses CDP to read CSS rules, measure actual usage per stylesheet, and compute coverage metrics without additional dependencies.

What is the best way to reduce CSS bloat from unused selectors?▼

The best way to reduce CSS bloat is to measure per-stylesheet coverage to pinpoint unused selectors. Surfaces the top unused selectors contributing most to bloat and estimates potential file-size savings for targeted cleanup.

Related Skills

Explore More Software Engineering Skills→
MuduiClawMuduiClaw
11

webapp-testing

Automate local web app testing via Playwright and Chrome CDP instances.

Community
Intermediate
roderikroderik
2

knip

Identify and remove unused files, dependencies, and exports in JavaScript/TypeScript projects.

Community
Intermediate
anouar1991anouar1991
1

page-efficiency-score

Compute a weighted 0-100 page efficiency score from JS/CSS coverage, render-blocking resources, transfer size, and navigation timing.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced