Design System Patterns
This generates the full infrastructure for design systems, from primitive color tokens to CSS custom properties to React theme providers. It creates the three-layer token hierarchy (primitive, semantic, component) that scales across platforms, sets up Style Dictionary configs for multi-platform output, and builds variant systems with class-variance-authority. The theme switching implementation handles system preferences and persistence properly. Most design system tutorials skip the hard parts like token naming conventions and the CSS architecture that actually works in production. This gives you the complete foundation that design teams at companies like GitHub and Shopify actually use.
- skills.sh installs
- 16.7K
- GitHub stars
- 42.4K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add wshobson/agents --skill design-system-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
More from wshobson/agents
All 174- Terraform Module Library16.1K
- React Native Design16.1K
- React State Management15.9K
- Solidity Security15.8K
- Uv Package Manager15.7K
- React Native Architecture15.6K
- Gdpr Data Handling15.4K
- Python Project Structure15.4K
- Accessibility Compliance15.2K
- K8s Security Policies15.1K
- Monorepo Management15K
- Python Error Handling14.7K
- Rag Implementation14.4K
- Deployment Pipeline Design14.2K
- Changelog Automation14.2K
- Bash Defensive Patterns14.1K
- Visual Design Foundations14.1K
- Debugging Strategies13.9K
- Python Anti Patterns13.8K
- Stripe Integration13.8K
- Microservices Patterns13.7K
- Secrets Management13.6K
- Web Component Design13.6K
- Gitlab Ci Patterns13.6K
Recommended
More Frontend Development
clerk-tanstack-patternsclerk/skillsTanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, crea16.1Kskills.sh installs
baoyu-diagramjimliu/baoyu-skillsCreate professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, ill15.9Kskills.sh installs
agentationbenjitaylor/agentationAdd Agentation visual feedback toolbar to a Next.js project13.9Kskills.sh installs
slidevantfu/skillsCreate and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use 13.8Kskills.sh installs
tanstack-query-best-practicesdeckardger/tanstack-agent-skillsTanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applica13.2Kskills.sh installs
agentselevenlabs/skillsBuild voice AI agents with ElevenLabs. Use when creating voice assistants, voice-based customer service bots, interactive voice characters, or any real-time voi12.9Kskills.sh installs