design-system-keeper

To replace hardcoded design literals with Tailwind tokens, the skill detects raw hex colors, pixel sizes, and magic shadows in component code and rewrites them into semantic token-alias classes mapped via tailwind.config and tokens.css.

Design tokens are semantic references for colors, spacing, radii, shadows, durations, and typography. You need them for UI consistency because hardcoded design values like raw hex codes make component styling inconsistent and difficult to maintain across a project.

To add a missing design token when converting hardcoded CSS values, the skill proposes safe token additions by generating a diff for tokens.css first, ensuring the new token exists before rewriting your component styling to reference it.

Yes, this approach enforces accessibility by requiring interactive elements to include hover, active, focus-visible, and disabled states, while mandating that all motion respects prefers-reduced-motion compliance and emits dark mode alongside light mode.

Yes, you can use this tokenization method with existing Tailwind theme files. It is Tailwind-aware and maps arbitrary values to semantic token-alias classes by reading your tailwind.config and tokens.css var names during UI development.

When snapping to the nearest token scale, hardcoded z-index and typography values are converted into existing project tokens, or proposed as safe token additions in tokens.css if no corresponding token exists, ensuring consistent layering and typography.