What is the token hierarchy used in this skill?

This skill utilizes a three-layer hierarchy: Primitives (raw values), Semantic tokens (contextual meaning like 'text-primary'), and Component tokens (specific usage like 'button-bg').

Can I integrate this with Figma design tokens?

Absolutely. The skill includes patterns for setting up Style Dictionary to transform Figma-exported tokens into platform-specific code for web, iOS, and Android.

Does this skill support theme switching?

Yes, it provides patterns for light/dark mode and multi-brand theming using CSS custom properties, React context, and system preference detection.

Which frontend frameworks are supported?

While the core patterns are platform-agnostic, the skill includes specialized implementation guides for React, Tailwind CSS, CSS-in-JS, and native mobile platforms.

Design System Patterns

Name: Design System Patterns
Author: wshobson

bywshobson

•

26,570

디자인 도구

Architects scalable UI foundations using design tokens, multi-brand theming infrastructure, and robust component patterns.

소개

The Design System Patterns skill equips Claude with the expertise to build and maintain professional-grade UI foundations. It focuses on creating maintainable systems through three-tier design token hierarchies (primitive, semantic, and component), dynamic light/dark theme switching, and advanced component architecture patterns like polymorphic and compound components. Whether you are bootstrapping a new library or synchronizing Figma tokens with Style Dictionary, this skill provides the implementation patterns and best practices needed to ensure visual consistency and developer efficiency across web and mobile applications.

주요 기능

Advanced component patterns including Polymorphic and Compound components
Theming infrastructure with CSS custom properties and React context
26,570 GitHub stars
Multi-tier design token implementation (Primitive, Semantic, Component)
System-wide support for accessibility, motion, and high-contrast modes
Automated token pipelines using Style Dictionary and Figma synchronization

사용 사례

Implementing dark mode and multi-brand theming in existing React projects
Establishing a new design system for a multi-platform application
Building a version-controlled component library with consistent API design

소개

주요 기능

Advanced component patterns including Polymorphic and Compound components
Theming infrastructure with CSS custom properties and React context
26,570 GitHub stars
Multi-tier design token implementation (Primitive, Semantic, Component)
System-wide support for accessibility, motion, and high-contrast modes
Automated token pipelines using Style Dictionary and Figma synchronization

사용 사례

Implementing dark mode and multi-brand theming in existing React projects
Establishing a new design system for a multi-platform application
Building a version-controlled component library with consistent API design