class-extraction-guard
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.