design-system-patterns
Master design system architecture by organizing design tokens across primitive, semantic, and component layers, then implement dynamic theming with CSS custom properties and multi-brand support. This skill covers component library architecture, design-to-code workflows, and best practices for maintaining token hierarchies without sprawl.
Design System Patterns helps you build and organize design tokens for consistent UI across applications.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-22
Design System Patterns helps you build and organize design tokens for consistent UI across applications. Master design system architecture by organizing design tokens across primitive, semantic, and component layers, then implement dynamic theming with CSS custom properties and multi-brand support. This skill covers component library architecture, design-to-code workflows, and best practices for maintaining token hierarchies without sprawl.
Use it when
- design-system-patterns recommends using CSS custom properties as your theming infrastructure foundation.
- design-system-patterns covers dynamic theming by structuring tokens so light and dark variants override the same CSS variable names.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
wshobson/agents/design-system-patterns · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create design tokens for consistent UI?
design-system-patterns teaches you to organize tokens across three layers: primitives (base colors, spacing, typography), semantics (contextual aliases like primary-action-bg), and component tokens (button-primary-bg). Start by defining your primitive palette, then create semantic tokens that reference primitives, enabling single-point updates. Use tools like Style Dictionary to generate platform-specific outputs from a single token source.
What's the best approach for theming system CSS custom properties?
design-system-patterns recommends using CSS custom properties as your theming infrastructure foundation. Define token hierarchies as CSS variables at the root level, then override them in theme-specific selectors (e.g., [data-theme="dark"]). This enables runtime theme switching without recompilation. Layer your variables: primitives at :root, semantics in component scopes, and theme overrides in theme-specific classes or data attributes.
How can I implement light and dark mode theme switching?
design-system-patterns covers dynamic theming by structuring tokens so light and dark variants override the same CSS variable names. Use a theme provider that toggles a data attribute or class, then scope your token overrides accordingly. Store user preference in localStorage and apply it on load. This approach keeps component code theme-agnostic while centralizing color logic in your token layer.
What is component library architecture for scalable UI?
design-system-patterns emphasizes variant and size systems as core to scalable component libraries. Define components with explicit props for variants (e.g., primary, secondary) and sizes, then map these to semantic tokens. Use composition patterns to avoid duplication; let smaller components combine into larger ones. Document each variant with Storybook or similar, and version your library independently from consuming applications.
How do I set up a design-to-code token synchronization pipeline?
design-system-patterns outlines establishing design-to-code workflows using tools like Style Dictionary or Tokens Studio. Export tokens from Figma or your design tool as JSON, then run a build step that generates CSS, JavaScript, and platform-specific outputs. Integrate this into CI/CD so token updates automatically propagate. Version your token outputs and document breaking changes in a changelog.
What are design token naming conventions and hierarchy organization?
design-system-patterns advocates a hierarchical naming structure: {category}-{subcategory}-{property}. For example, color-primary-500 or spacing-lg. Use semantic names for contextual tokens (action-primary-bg, text-secondary) that reference primitives. Avoid sprawl by limiting token depth and reusing primitives across contexts. Document your naming system so teams stay consistent, and review token inventory regularly to consolidate redundant values.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 5 files
plugins/ui-design/skills/design-system-patterns/SKILL.md
plugins/ui-design/skills/design-system-patterns/references/component-architecture.md
plugins/ui-design/skills/design-system-patterns/references/design-tokens.md
plugins/ui-design/skills/design-system-patterns/references/details.md
plugins/ui-design/skills/design-system-patterns/references/theming-architecture.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build and organize design tokens for consistent UI across applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.
Visual Designer guides you through establishing design systems grounded in color theory, type scales, and spacing principles. It covers palette creation using the 60-30-10 rule, WCAG contrast requirements, font pairing strategies, and responsive layout techniques to ensure every visual decision serves your users.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
Tailwind Design System guides you through building production-ready design systems with Tailwind CSS v4, covering CSS-first configuration, design tokens, component variants, and accessibility. Learn v4's key changes from v3, including @theme syntax, semantic color tokens with OKLCH, and class-based dark mode setup.
Learn to architect microservices by decomposing monoliths, defining service boundaries, and choosing between synchronous and asynchronous communication. This skill covers data management strategies like the saga pattern and resilience techniques including circuit breakers and bulkheads to build fault-tolerant distributed systems.
Architecture guides you through designing complete system architectures—from monolithic and microservices to event-driven and serverless approaches. It covers design patterns, quality attributes like performance and security, technology selection, and provides frameworks for documenting architectural decisions. Use it to evaluate trade-offs, plan scalability, and ensure your systems are maintainable and resilient.