kb-design-tokens

To convert hardcoded CSS values into semantic design tokens, you remap raw hex colors, pixel paddings, and custom shadows to a two-layer primitive-to-semantic pipeline. This ensures components consume intent-based tokens rather than raw values, keeping styling auditable and theme-ready.

Anti-tokens are enforcement rules that reject raw hex, rgb, px, shadow, radius, and typography literals in application code. During UI auditing, these rules identify arbitrary utilities outside token definitions and flag them for remapping to approved semantic tokens or discrete tiered scales.

Auditing a feature branch for inline hex colors and pixel paddings involves scanning component code for hardcoded visual literals. The Skill identifies these raw values and remaps them to the nearest semantic tokens or proposes approved scale extensions to maintain visual consistency.

Yes, the design token pipeline supports theme swapping via CSS variables by remapping semantic tokens to different primitive values. This token remapping allows components to switch themes seamlessly without altering the underlying application code or violating anti-token rules.

You should extend the discrete tiered scale for spacing and typography only with explicit, approved proposals when existing tokens cannot satisfy a design requirement. This discipline prevents UI drift and ensures visuals remain coherent across the product during component refactors.

Yes, you can use this token system pattern with any stack that uses CSS variables or theme configuration. The two-layer primitive and semantic token model applies universally to design-system authoring, UI audits, and component refactors regardless of the specific framework.