AddThisFeature

Dead CSS Detection

Find the selectors that no route or component still renders, and remove them safely.

involved Developer Experience

What it adds

An audit of the app's stylesheets separating selectors still reachable at runtime from those nothing renders.

What your agent is told to do

5
  1. 1

    Enumerate the selectors the app ships and match them against the class names and structures the components actually produce, including every route, not only the ones that render on first load.

  2. 2

    Drive the audit from a real render of the app across its routes, breakpoints, and themes, rather than from static text matching alone. Static matching alone cannot see what a component composes at runtime.

  3. 3

    Classify each selector as confidently used, confidently unused, or unknown, and require a human decision on everything in the unknown bucket.

  4. 4

    Remove in small, reviewable batches, each one shippable and revertible on its own, so a regression can be traced to a specific removal instead of to a thousand-line deletion.

  5. 5

    Do not treat this as the same job as Unused Token Detection. That feature owns the token definitions and their references; this one owns the rules and selectors in the stylesheets, and the two reports must not both claim authority over the same file.

Edge cases it handles

7
  • Class names composed at runtime from variables, and class names arriving inside content authored elsewhere such as a CMS body or a user-supplied rich text field, will never appear literally in the source. Both must be treated as live unless proven otherwise.
  • Routes that load on demand are the classic false positive: a selector used only by a screen that is never visited during the audit will be reported as dead. Exercise every lazy route, or exclude their stylesheets from the sweep entirely.
  • States that are rare or hard to reach — an error banner, a print layout, a disabled control, a high-contrast or reduced-motion variant, an empty result set — are used but almost never rendered during a crawl. Protect them explicitly rather than relying on coverage.
  • Every removal batch must go through visual comparison against the previous build across the routes and breakpoints that matter, because the failure mode here is silent and cosmetic rather than a thrown error.
  • Selectors that exist purely to override a third-party or vendor stylesheet look unused when the vendor markup is absent from the audit environment, and deleting them breaks the page the moment that widget loads.
  • Print styles, email styles, and anything served to a context the audit never renders must be listed as out of scope in the report rather than silently swept.
  • Server-rendered markup and client-rendered markup can produce different class sets for the same screen, so an audit run against only one of them is incomplete.

Definition of done

8
  • The audit covers every route, including those loaded on demand, plus every theme and breakpoint the app supports.
  • Selectors are classified as used, unused, or unknown, and unknown is never removed automatically.
  • Dynamically composed class names and class names from authored content are excluded from removal.
  • Rare states such as errors, empty states, print, and accessibility variants are explicitly protected.
  • Each removal batch is independently revertible and passes a visual comparison against the previous build.
  • The report states which contexts were out of scope.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.