ux-design-systems_skill

Overview

This skill helps teams build consistent, maintainable design systems with tokens, component patterns, and theming. It provides practical patterns for design tokens (CSS and TypeScript), component variants (example Button with CVA), and dark-mode theming using CSS or a React provider. Use it to accelerate component library creation and enforce UI consistency across products.

How this skill works

The skill inspects your design needs and suggests a token-first approach: centralized color, spacing, typography, radius, and shadow tokens as CSS variables or TypeScript objects. It demonstrates component patterns using class-variance-authority to define variants and sizes, and shows dark-mode handling via CSS data-attributes or a React ThemeProvider that syncs to system preferences. It returns concrete starter code and integration guidance for tokens, components, and theme switching.

When to use it

• Creating a new component library or migrating an existing one to a token-driven system
• Defining or normalizing design tokens (colors, spacing, typography, radius, shadows) across apps
• Implementing variant-driven components (buttons, inputs, cards) with predictable APIs
• Adding reliable dark-mode support that follows system preferences
• Ensuring design consistency across teams and platforms

Best practices

• Define a single source of truth for tokens (CSS variables + TypeScript mapping) to enable both runtime theming and compile-time checks
• Use variant systems (CVA or similar) to encode visual variants and sizes, keeping markup simple and predictable
• Keep tokens semantic (primary, surface, foreground) rather than purely numeric to ease theme swaps
• Expose a compact ThemeProvider API that supports 'light', 'dark', and 'system' and persists user choice where appropriate
• Document token usage and component variants with examples and visual snapshots to reduce integration friction

Example use cases

• Bootstrap a new design system: export CSS variables and a typed tokens object for component libraries
• Build a reusable Button component with variant and size props using CVA for consistent behavior
• Implement dark mode by toggling a data-theme attribute and swapping CSS variables at runtime
• Migrate legacy styles by mapping old values to new tokens and refactoring components incrementally
• Provide theme-aware utilities for spacing, typography, and shadows consumed by both web and design tools