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

★ 38,308 ⁮ 4,097 MIT updated 2026-07-22 by wshobson

Install

wshobson/agents/design-system-patterns · repository language: Python

Manual (git clone) CLI (skillfed)

git clone https://github.com/wshobson/agents
cp -r agents/plugins/ui-design/skills/design-system-patterns ~/.claude/skills/design-system-patterns

npx skillfed install wshobson/agents/design-system-patterns

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