Design System Patterns Skill by wshobson: Tokens, Themes and Components

Gives Claude patterns for design tokens, light and dark theming and component library structure, for web and mobile UI work.

Installs: 16.4K; on skills.sh
Stars: 42.1K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

Design System Patterns is a guide that Claude reads when you create design tokens, add theme switching or plan a component library. It covers a three-layer token hierarchy (primitive, semantic, component), CSS custom property theming and React component patterns such as compound and polymorphic components (the React code is in references/component-architecture.md and references/theming-architecture.md).

It is a reference and runs nothing. The skill ships as part of the ui-design plugin in the wshobson/agents repo, and its folder holds SKILL.md plus four reference guides.

Good for

Front-end developers building a component library or design system
Designers moving Figma tokens into code
Teams adding dark mode or multi-brand themes

Install design-system-patterns

Claude Code

Copy this prompt.

Install the design-system-patterns skill in Claude Code. Run this command:

/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The plugin installs the whole ui-design plugin: 9 skills, 3 agents (ui-designer, accessibility-expert, design-system-architect) and 4 slash commands (/ui-design:design-review, create-component, accessibility-audit, design-system-setup), per the plugin README. design-system-patterns itself does not call the others. The README shows this install shape with the python-development plugin; the marketplace is claude-code-workflows and lists ui-design. Pick one route, not both.

From the project README. Source.

What's in the skill

When it loads

Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

Sections in SKILL.md

When to Use This Skill
Core Capabilities
1. Design Tokens
2. Theming Infrastructure
3. Component Architecture
4. Token Pipeline
Quick Start
Detailed patterns and worked examples
Best Practices
Common Issues

Key facts

Author: Seth Hobson (wshobson)
License: MIT
Installs on skills.sh: 16,400 (Nov 2, 2026)
GitHub stars: 42,081 for the whole wshobson/agents repo (Nov 2, 2026)
Last commit: Oct 30, 2026
What is inside: 5 files including SKILL.md: references for component architecture, design tokens, theming and detailed patterns. No scripts.
Part of: ui-design plugin (version 1.0.5, MIT) in the wshobson/agents repo

What it includes

Primitive, semantic and component tokens, naming and multi-platform output
Teaches the three token layers, naming conventions and generating tokens for CSS, iOS and Android.
Try: “Set up semantic color tokens for light and dark mode in my React app.”
Design tokens
CSS custom properties, theme providers, system preference and stored choice
Covers prefers-color-scheme detection, dynamic theme switching, saved theme choice, and reduced motion and high contrast modes.
Theming infrastructure
Compound and polymorphic components, variants, slots and headless UI
Compound and polymorphic component patterns, with React and TypeScript examples in references/component-architecture.md.
Component architecture
Figma to code sync with Style Dictionary and CI
Describes transforming and formatting tokens and updating them through CI/CD.
Token pipeline
Seven practices and six pitfalls such as token sprawl and circular references
Name tokens by purpose, version them like an API, test every theme with every component.
Best practices and common issues

From the official docs

Permissions

Low risk

Installing only this skill adds Markdown guides. The plugin route also adds agents and slash commands from the same repo.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

The plugin route adds agents and commands, not just this skill
The ui-design plugin README lists 9 skills, 3 agents and 4 commands. The agent and command files are in the plugin folder, so read them before installing the plugin. Installing the skill alone with the skills CLI avoids them. github.com
This skill bundles no scripts
The folder holds SKILL.md and four reference guides. SKILL.md frontmatter has only a name and description. The token pipeline section names Style Dictionary and Figma, which you would run yourself. github.com

Technical details

Scopes	Plugin route: adds 3 agents and 4 slash commands to Claude Code besides 9 skills Skill-only route: adds markdown guides only

Questions

What does the design-system-patterns skill do?

It gives Claude guidance and code for design tokens, theming and component library patterns, so the system it helps you build has a clear token hierarchy and works in light and dark themes.

How do I install it?

Use the install box at the top of this page. The repo README documents /plugin marketplace add wshobson/agents; the ui-design plugin then adds 9 skills, 3 agents and 4 commands. To take only this skill, use npx skills add wshobson/agents --skill design-system-patterns.

Does it need an API key or any tools?

No key is mentioned in SKILL.md. It bundles no scripts. The token pipeline section names Style Dictionary and Figma, which you would set up yourself.

Is it safe to install?

It is a set of Markdown guides with code examples and no scripts, so installing it only adds instructions for Claude. Review any code Claude writes from it before you run it.

Does it work only with React?

The component examples use React and TypeScript, while the token and CSS custom property parts are plain CSS. SKILL.md says the patterns apply to web and mobile, and mentions iOS and Android token output.

When does Claude open the reference files?

SKILL.md says the detailed patterns live in references/details.md and should be read when the main file is not enough. The other three guides cover component architecture, design tokens and theming in depth.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/ui-design/skills/design-system-patterns

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 8

wshobson/agents README · github.com
ui-design README · github.com
marketplace.json · github.com
skills CLI commands · github.com
SKILL.md · github.com
plugin.json · github.com
component-architecture.md · github.com
theming-architecture.md · github.com