{"enrichment":{"faq":[{"a":"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.","q":"How do I create design tokens for consistent UI?"},{"a":"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.","q":"What's the best approach for theming system CSS custom properties?"},{"a":"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.","q":"How can I implement light and dark mode theme switching?"},{"a":"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.","q":"What is component library architecture for scalable UI?"},{"a":"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.","q":"How do I set up a design-to-code token synchronization pipeline?"},{"a":"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.","q":"What are design token naming conventions and hierarchy organization?"}],"shadow_tags":["token-management","theme-switching","component-library","design-infrastructure","ui-consistency","style-architecture","brand-theming","design-automation"],"summary_rewrite":"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."},"files":[{"bytes":4003,"path":"plugins/ui-design/skills/design-system-patterns/SKILL.md","sha256":"618355f0e6c6ba8ca5d231035c9da18302fe6894aedce565743e9181b6c928ee","url":"https://skillfed.io/files/wshobson/agents/design-system-patterns/d08d3a43/SKILL.md"}],"id":"wshobson/agents/design-system-patterns","links":{"html":"https://skillfed.io/wshobson/agents/design-system-patterns","md":"https://skillfed.io/wshobson/agents/design-system-patterns.md","repo":"https://github.com/wshobson/agents"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":4097,"language":"Python","last_updated":"2026-07-22","license":"MIT","name":"design-system-patterns","publisher":"wshobson","stars":38308},"relations":{"similar":[{"id":"Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"wshobson/agents/visual-design-foundations"},{"id":"doccker/cc-use-exp/ui-ux-pro-max"},{"id":"curiositech/some_claude_skills/dark-mode-design-expert"},{"id":"martinholovsky/claude-skills-generator/design-systems"},{"id":"daffy0208/ai-dev-standards/visual-designer"},{"id":"Tomlord1122/tomtom-skill/tailwind-ssr"},{"id":"oakoss/agent-skills/design-system"},{"id":"NickCrew/Claude-Cortex/design-system-architecture"},{"id":"sanky369/vibe-building-skills/color-system"}]},"slug":{"owner":"wshobson","repo":"agents","skill":"design-system-patterns"},"version":"d08d3a43"}