Permissions

Just instructions. No commands, network, or file access.

Files

SKILL.md

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.

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

5 files · 47 KB4 KB

Install

It’s free, and every skill you add syncs into every AI tool on your computer, instantly.

Get the Skillet appor

npx skilletmd add @wshobson/design-system-patterns -y

Version history

Design System Patterns

Design System Patterns

When to Use This Skill

Core Capabilities

1. Design Tokens

2. Theming Infrastructure

3. Component Architecture

4. Token Pipeline

Quick Start

Detailed patterns and worked examples

Best Practices

Common Issues