0134-design-system-patterns
CommunityDesign scalable UI foundations with tokens and theming.
System Documentation
What problem does it solve?
It helps teams prevent inconsistent UI styling and slow component development by establishing a shared design-token, theming, and component-architecture foundation.
Core Features & Use Cases
- Design token architecture: Create primitive, semantic, and component-level tokens with clear naming and hierarchy (e.g., colors, spacing, typography).
- Theming infrastructure: Implement reliable light/dark switching using CSS custom properties, theme providers, system preference detection, and persistence.
- Component architecture patterns: Build scalable component APIs using compound components, polymorphic “as” patterns, and slot-based composition.
- Token pipeline automation: Configure a Figma-to-code workflow using Style Dictionary for multi-platform token generation and CI/CD updates.
Use cases include creating multi-brand theming systems, establishing design-to-code token pipelines, and documenting component and token guidelines for long-term maintainability.
Quick Start
Ask the AI to generate a token hierarchy (primitive → semantic → component) and wire up light/dark theme switching using CSS custom properties and a theme provider for a React component library.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: 0134-design-system-patterns Download link: https://github.com/MrJmpl3/codex_____data_____configuration/archive/main.zip#0134-design-system-patterns Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.