class-extraction-guard

Installation
SKILL.md

class-extraction-guard

What this is

A deterministic, parse-once gate that flags utility-class soup: the same long run of utility classes pasted inline across many call-sites instead of extracted into a named class (@apply / a CSS component) or a shared UI component.

It exists because of a real gap. design-token-guard checks which values styling uses — it catches a hardcoded #07090c that should be var(--token). But a string like flex items-center gap-1.5 text-bone-faint hover:text-rune uses perfectly valid tokens, so design-token-guard passes it by construction. Repeat that string 9× across the codebase and you have a maintenance problem the value gate was never built to see. And because the repeated version renders identically to an extracted one, the pixel gates (render-sanity, ux-review) can't see it either. The duplication lives only in source — exactly in the seam between the value gate and the pixel gates. This is the missing organization gate that closes that seam.

Installs
1
GitHub Stars
11
First Seen
Sep 4, 2026