Skills
.Work. You
Rest

css-coverage-treemap

Community

Trim CSS bloat with per-stylesheet coverage.

Software Engineering#css#playwright#cdp#web-performance#stylesheet#css-coverage
Authoranouar1991
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css-coverage-treemap
Download link: https://github.com/anouar1991/binaryPetsClaude/archive/main.zip#css-coverage-treemap

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.