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.
主な機能
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)
ユースケース
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
