design-system-patterns
Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems.
What it does
- 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
Requirements & configuration
- Creating semantic token hierarchies (primitive, semantic, component)
- Token naming conventions and organization
- Multi-platform token generation (CSS, iOS, Android)
- 4. Token Pipeline
- Token transformation and formatting
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems.
Source
Repository: https://github.com/wshobson/agents
design-system-patterns FAQ
What does the design-system-patterns skill do?
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. Creating design tokens for colors, typography, spacing, and shadows Implementing light/dark theme switching with CSS custom properties
What does design-system-patterns require?
Creating semantic token hierarchies (primitive, semantic, component) Token naming conventions and organization Multi-platform token generation (CSS, iOS, Android) 4. Token Pipeline Token transformation and formatting
How do I install design-system-patterns?
Run: npx -y skills add https://github.com/wshobson/agents --skill design-system-patterns --agent claude-code — the source lives at github.com/wshobson/agents.
Maintain design-system-patterns?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/wshobson-agents-design-system-patterns?ref=badge) npx agentictools info skills/wshobson-agents-design-system-patterns The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
slidev Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations,…
react-state-management Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.
react-native-architecture Production-ready React Native patterns with Expo, navigation, offline-first architecture, and native module integration.
clerk-react-patterns clerk react patterns
fixing-metadata Audit and fix HTML metadata including titles, descriptions, canonical URLs, Open Graph tags, and structured data.
react-native-design Cross-platform mobile apps with React Native styling, navigation, and performant Reanimated animations.