design-system-governance

What problem does it solve? UI components drift into inconsistency when developers add ad-hoc hex values, inline style overrides, or one-off styled buttons instead of using shared design tokens and variants. This Skill provides the rules, token tables, and review checklists needed to keep JoyJoin's web and mini-program interfaces visually consistent and accessible. ## Core Features & Use Cases - Token governance: Defines where CSS custom properties live (index.css :root and .dark blocks) and how to add new tokens for both light and dark modes. - CVA variant management: Standardizes button variants (default, secondary, outline, ghost, destructive) in packages/shared/src/ui/buttonVariants.ts instead of inline Tailwind overrides. - Accessibility and exception discipline: Enforces WCAG AA contrast, 44px touch targets, visible --ring focus indicators, and documented visual exceptions with rationale comments. - Use Case: When asked to add a warning button variant, the Skill directs you to extend the shared CVA config, define tokens in both apps' index.css light and dark blocks, and verify both app builds. ## Quick Start Ask the assistant to review a component for token usage or to add a new button variant following the design system governance rules.