design-system-keeper

What problem does it solve?

Hardcoded design values like raw hex colors, pixel sizes, and magic shadows make UI inconsistent and painful to maintain.

Core Features & Use Cases

• Detect hardcoded design literals such as colors, spacing, radii, shadows, durations, easing, z-index, and typography across component and style code.
• Rewrite to token references by converting literals into existing project tokens (or snapping to the nearest scale when needed).
• Propose safe token additions by updating tokens.css first with a diff when the literal has no corresponding token.
• Enforce consistency rules so interactive elements include hover/active/focus-visible/disabled, motion respects prefers-reduced-motion, and dark mode is emitted alongside light.
• Tailwind-aware conversion to map arbitrary values to semantic token-alias classes via tailwind.config.* and tokens.css var names.

Quick Start

Use the design-system-keeper skill while editing your UI files to automatically replace literals with the correct token references and suggest any missing tokens in tokens.css.