Design System Patterns
Establish design tokens, theme switching, and component-library architecture so web and mobile UIs stay consistent as the product grows.
Overview
design-system-patterns is an agent skill most often used in Build (also Validate, Launch) that defines design tokens, theming infrastructure, and component architecture for consistent UIs.
Install
npx skills add https://github.com/wshobson/agents --skill design-system-patternsWhat is this skill?
- Three-tier token model: primitive, semantic, and component-specific tokens
- Theming with CSS custom properties, React context, and system prefers-color-scheme
- Multi-brand and light/dark switching with persistent user preference storage
- Component library API consistency and design-to-code alignment (e.g. Figma tokens)
- Accessibility-oriented modes: reduced motion and high contrast considerations
- Three token tiers: primitive, semantic, and component
Adoption & trust: 10.2k installs on skills.sh; 36.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Every new screen introduces one-off colors and spacing, so light/dark mode and multi-brand variants become expensive to maintain.
Who is it for?
SaaS and mobile indie products planning more than a handful of screens who want agent-generated UI to respect semantic tokens and themes.
Skip if: One-page landing experiments with no reuse plan, or pure infrastructure tasks like Packer builds with no UI surface.
When should I use this skill?
Creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
What do I get? / Deliverables
You get a documented token hierarchy, theme-switching approach, and component conventions so the agent can generate UI that shares one design language—then extend into Storybook or Figma sync as needed.
- Token naming scheme
- Theme provider or CSS variable layer
- Component API guidelines for agents
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Design systems are first shelved under Build when UI foundations are implemented, even though token decisions also support validate prototypes and launch-facing brand consistency. Frontend is where tokens, themes, and component APIs land in code; this is the primary execution surface for the skill’s patterns.
Where it fits
Define a minimal token set so a clickable prototype matches the brand you will ship.
Wire a React theme provider and semantic color tokens before agents generate dashboard components.
Structure button and card component APIs so new features reuse the same variant props.
Enable dark mode and reduced-motion preferences before screenshots and marketing pages go live.
How it compares
Focuses on system architecture and tokens—not single-platform StyleSheet recipes alone (pair with react-native-design for RN specifics).
Common Questions / FAQ
Who is design-system-patterns for?
Solo builders and small teams establishing or refactoring a shared visual language before agents spawn dozens of similar components.
When should I use design-system-patterns?
During Validate when a prototype needs credible UI; during Build when implementing tokens and themes; at Launch when tightening brand variants, dark mode, or accessibility modes across the app.
Is design-system-patterns safe to install?
Check Prism’s Security Audits panel and read the skill source; theming skills do not require cloud keys but may suggest filesystem changes in your repo.
SKILL.md
READMESKILL.md - Design System Patterns
# 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 ```typescript // Design tokens with CSS custom properties const tokens = { colors: { // Primitive tokens gray: { 50: "#fafafa", 100: "#f5f5f5", 900: "#171717", }, blue: { 500: "#3b82f6", 600: "#2563eb", }, }, // Semantic tokens (reference primitives) semantic: { light: { "text-primary": "var(--color-gray-900)", "text-secondary": "var(--color-gray-600)", "surface-default": "var(--color-white)", "surface-elevated": "var(--color-gray-50)", "border-default": "var(--color-gray-200)", "interactive-primary": "var(--color-blue-500)", }, dark: { "text-primary": "var(--color-gray-50)", "text-secondary": "var(--color-gray-400)", "surface-default": "var(--color-gray-900)", "surface-elevated": "var(--color-gray-800)", "border-default": "var(--color-gray-700)", "interactive-primary": "var(--color-blue-400)", }, }, }; ``` ## Key Patterns ### Pattern 1: Token Hierarchy ```css /* Layer 1: Primitive tokens (raw values) */ :root { --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-gray-50: #fafafa; --color-gray-900: #171717; --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; } /* Layer 2: Semantic tokens (meaning) */ :root { --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --surface-default: white; --interactive-primary: var(--color-blue-500); --interactive-primary-hover: var(--color-blue-600); } /* Layer 3: Component tokens (specific usage) */ :root { --button-bg: var(--interactive-primary); --button-bg-hover: var(--interactive-primary-hover); --button-text: white; --button-radius: var(--radius-md); --button-padding-x: var(--space-4); --button-padding-y: var(--space-2); } ``` ### Pattern 2: Theme Switching with React ```tsx import { createContext, useContext, useEffect, useState } from "react"; type Theme = "light" | "da