design-system-patterns
Installation
Summary
Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems.
- Covers three-layer token organization: primitive tokens (raw values), semantic tokens (contextual meaning), and component tokens (specific usage)
- Includes theme switching patterns with CSS custom properties, React context providers, system preference detection, and persistent storage
- Provides component architecture patterns including compound components, polymorphic variants, and slot-based composition
- Supports multi-platform token generation via Style Dictionary for CSS, iOS, Android, and SCSS with Figma-to-code synchronization
SKILL.md
Design System Patterns
Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.
When to Use This Skill
- Creating design tokens for colors, typography, spacing, and shadows
- Implementing light/dark theme switching with CSS custom properties
- Building multi-brand theming systems
- Architecting component libraries with consistent APIs
- Establishing design-to-code workflows with Figma tokens
- Creating semantic token hierarchies (primitive, semantic, component)
- Setting up design system documentation and guidelines