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

•

Design Tools

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.

Key Features

01Advanced component patterns including Polymorphic and Compound components

02Theming infrastructure with CSS custom properties and React context

0326,570 GitHub stars

04Multi-tier design token implementation (Primitive, Semantic, Component)

05System-wide support for accessibility, motion, and high-contrast modes

06Automated token pipelines using Style Dictionary and Figma synchronization

Use Cases

01Implementing dark mode and multi-brand theming in existing React projects

02Establishing a new design system for a multi-platform application

03Building a version-controlled component library with consistent API design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wshobson/agents design-system-patterns

For use in Claude.ai and ChatGPT

Download Skill