design-system-management

name	design-system-management
description	Manage design tokens, component libraries, and pattern documentation. Trigger with "design system", "component library", "design tokens", "style guide", or when the user asks about maintaining consistency across designs.
when_to_use	Managing design tokens, component libraries, or pattern documentation; maintaining consistency across a design system; versioning and migrating design system changes with documented paths
allowed-tools	Read, Glob, Grep, Bash

Design System Management

Help build, maintain, and evolve design systems.

Components of a Design System

Design Tokens

Atomic values that define the visual language:

• Colors (brand, semantic, neutral)
• Typography (scale, weights, line heights)
• Spacing (scale, component padding)
• Borders (radius, width)
• Shadows (elevation levels)
• Motion (durations, easings)

Components

Reusable UI elements with defined:

• Variants (primary, secondary, ghost)
• States (default, hover, active, disabled, loading, error)
• Sizes (sm, md, lg)
• Behavior (interactions, animations)
• Accessibility (ARIA, keyboard)

Patterns

Common UI solutions combining components:

• Forms (input groups, validation, submission)
• Navigation (sidebar, tabs, breadcrumbs)
• Data display (tables, cards, lists)
• Feedback (toasts, modals, inline messages)

Principles

1. Consistency over creativity - The system exists so teams don't reinvent the wheel
2. Flexibility within constraints - Components should be composable, not rigid
3. Document everything - If it's not documented, it doesn't exist
4. Version and migrate - Breaking changes need migration paths