Design System Enforcer

Design System Enforcer audits your frontend codebase by inventorying every real component variant and CSS value it finds, then classifying each deviation as an intentional variant, accidental drift, or a gap the design system itself never covered. It maps raw hex codes, hardcoded spacing, and rogue font sizes to your existing tokens, sequences consolidation by page traffic so high-impact fixes come first, and produces governance rules and lint-level enforcement configs to stop drift from returning.

To get started, share your stack context — for example: a Tailwind-based React app with a partial token set, 14 button variants found in production, and a Figma library that defines three. The skill then works through your components and token file, identifying which of those 14 buttons are safe to merge, which serve a genuine use case, and which exist because someone copy-pasted a component on a deadline.

A typical output excerpt looks like this — Variant Inventory (Button): 14 found in codebase / 3 defined in system. Classification: 3 intentional (primary, secondary, destructive), 2 accidental duplicates (btn-blue, btn-primary-v2 — map to 'primary'), 9 undocumented variants pending review. Hardcoded values flagged: #1D4ED8 appears 23 times — maps to token color.brand.600. Consolidation priority: Button (used on 47 routes) before DatePicker (used on 2). Proposed ESLint rule: no-hardcoded-color — block raw hex in className strings.