design-system-implementationlisted

# Design System Implementation ## Purpose Build and maintain a centralized design system so design implementation is consistent, scalable, and easy for future Claude Code sessions to modify with high confidence. The design system is the source of truth for reusable visual decisions. Components should consume tokens instead of scattering raw values across pages and features. ## When To Use Use this skill without waiting for explicit invocation when the task includes: - Creating or modifying a design system, theme, tokens, CSS variables, Tailwind config, shadcn theme, or UI kit. - Adding, adapting, or cleaning shadcn/ui primitives, registry blocks, component variants, or shared UI components. - Adding ReactBits or custom animated components that need token normalization and reduced-motion handling. - Replacing raw visual values with centralized tokens. - Mapping Figma variables, styles, modes, or semantic names into code. For a full Figma implementation, use it together with `figma-to-code`, `fsd-frontend-architecture`, and `design-validation`. ## Token System Create or update centralized tokens for all relevant categories: - Color: primitive palette, semantic colors, text, background, border, surface, state, brand, destructive, success, warning, info. Prefer OKLCH or perceptually consistent color space when supported by the project. - Typography: font families, sizes, line heights, weights, letter spacing, headings, body, captions, buttons. - Spacing: scale, layout g