design-token-guard

The problem this solves

A hardcoded color renders identically to the token it should have used. style={{ background: "#07090c" }} and style={{ background: "var(--tl-tooltip)" }} produce the same pixels. So every render-level gate — visual review, e2e, screenshots, "console is clean" — passes a component that has silently bypassed the design system. The violation only exists in source.

That is why inline styles and hardcoded CSS accumulate invisibly until someone eyeballs the code weeks later and burns hours on a token refactor. The fix is a source-level gate: a deterministic check that reads the diff for styling that bypasses the token system, run before the code is declared done, and wired into the repo so it can't regress.

This skill is that gate. It does two things: