Agent skill · design visual · aiskillstore
design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
Why this skill is useful
Provides specific patterns and implementations for scalable design systems that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Core Capabilities 1. Design Tokens Primitive tokens (raw values: colors, sizes, fonts) Semantic tokens (contextual meaning: text-primary, surface-elevated) Component tokens (specific usage: button-bg, card-border) Token naming conventions and organization Multi-platform token generation (CSS, iOS, Android) 2. Theming Infrastructure CSS custom properties architecture Theme context providers in React Dynamic theme switching System preference detection (prefers-color-scheme) Persistent theme storage Reduced motion and high contrast modes 3. Component Architecture Compound component patterns Polymorphic components (as prop) Variant and size systems Slot-based composition Headless UI patterns Style props and responsive variants 4. Token Pipeline Figma to code synchronization Style Dictionary configuration Token transformation and formatting CI/CD integration for token updates Quick Start Key Patterns Pattern 1: Token Hierarchy Pattern 2: Theme Switching with React Pattern 3: Variant System with CVA Pattern 4: Style Dictionary Configuration Best Practices 1. Name Tokens by Purpose: Use semantic names (text-primary) not visual descriptions (dark-gray) 2. Maintain Token Hierarchy: Primitives > Semantic > Component tokens 3. Document Token Usage: Include usage guidelines with token definitions 4. Version Tokens: Treat token changes as API changes with semver 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-system-patterns