What is the design-system-patterns skill?
The design-system-patterns skill is a SKILL.md inside the ui-design plugin of the wshobson/agents repository. It guides an AI coding agent through primitive, semantic and component tokens, theme switching with CSS custom properties, component API patterns and a Figma to code token pipeline.
Primitive, semantic and component tokens form the spine of this skill. It lives at plugins/ui-design/skills/design-system-patterns in the wshobson/agents repository, and its description promises scalable design systems with tokens, theming and component architecture.
The SKILL.md is deliberately short. It holds the navigation tier and a quick start, then points to references/details.md for worked examples when the main file is not enough.
Four capability areas
- Design tokens: primitive, semantic and component tiers, naming conventions and multi-platform output for CSS, iOS and Android.
- Theming: CSS custom properties, React theme context, dynamic switching, prefers-color-scheme detection, persistent storage, reduced motion and high contrast.
- Component architecture: compound components, polymorphic as prop, variants and sizes, slots, headless patterns and responsive style props.
- Token pipeline: Figma to code sync, Style Dictionary configuration, transformation and CI/CD updates.
What goes wrong without it
The skill names its own failure modes: token sprawl, mixed naming conventions, tokens that ignore dark mode, hardcoded values, circular references and platforms missing tokens. Its seven practices answer them, such as versioning token changes with semver.
Who the design-system-patterns skill is for
Best for
- Starting a token set where semantic names such as text-primary sit between raw values and components.
- Adding light and dark themes to a codebase that hardcodes hex values.
- Related: tailwind-design-system and design-md.
Not for
- Extracting tokens from a live site. Related: extract-design-system.
- Choosing type, colour or spacing values. It structures the system and does not pick the numbers.
- Accessibility audits of the finished UI, which need a separate review skill.
Use it with UiChemy
A token system makes the Figma file consistent before conversion. UiChemy's Figma to WordPress turns that file into Elementor or Gutenberg pages, and Composer adjusts them visually afterwards. AI generated sites route through Figma or Composer first. Click Get Started on uichemy.com.
How to install Design System Patterns Skill for Tokens and Theming
gh skill install wshobson/agents design-system-patternsCheck GitHub CLI
The
gh skillcommand requires GitHub CLI 2.90 or later. Rungh --versionand upgrade first if your version is older.Install the skill
Run
gh skill install wshobson/agents design-system-patternsand select your coding tool when prompted. The README says this reads the skill from GitHub without cloning the repository.Or install the whole plugin
Inside Claude Code run
/plugin marketplace add wshobson/agents, then/plugin install ui-design@claude-code-workflows. This adds the ui-design plugin that contains the skill, with its agents, commands and hooks.Invoke it
Try a prompt such as: use design-system-patterns to add light and dark theming to this project. Name the stylesheet so the agent edits real files.
Check that it loaded
Ask the agent to set up tokens for a small app. It should create primitive, semantic and component tiers, name them by purpose and give light and dark values to every semantic token.
Key features
- Three tier token hierarchyPrimitive tokens hold raw values, semantic tokens carry meaning such as text-primary or surface-default and component tokens cover usage such as button-bg.
- Naming conventionsGuidance on token naming and organisation, with the rule to name by purpose and not by visual description.
- Multi-platform generationTokens can be generated for CSS, iOS and Android so web and mobile share one source.
- Theme switchingCSS custom properties, React theme context providers and dynamic switching with system preference detection and persistent storage.
- Reduced motion and contrastTheming covers reduced motion and high contrast modes alongside light and dark.
- Component patternsCompound and polymorphic components, variant and size systems, slot composition and headless UI patterns.
- Token pipelineFigma to code synchronisation, Style Dictionary configuration, transformation and formatting, plus CI/CD for token updates.
- Seven best practicesPurpose names, a kept hierarchy, usage docs, semver for tokens, theme combination tests, an automated pipeline and gradual deprecation.
- Four reference filescomponent-architecture.md, design-tokens.md, details.md and theming-architecture.md hold deeper material for the agent to read on demand.
Frequently asked questions
What is the design-system-patterns skill?
It is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It guides an AI coding agent on design tokens, theming infrastructure, component architecture and a token pipeline, so a design system stays consistent, maintainable and scalable across web and mobile.
How do I install the design-system-patterns skill?
Run gh skill install wshobson/agents design-system-patterns and choose your coding tool when asked. It needs GitHub CLI 2.90 or later. The other route is the plugin: /plugin marketplace add wshobson/agents, then /plugin install ui-design@claude-code-workflows.
What token tiers does it describe?
Three: primitive tokens for raw values, semantic tokens for contextual meaning and component tokens for specific usage. The quick start shows semantic tokens referencing primitives through CSS variables, with separate light and dark maps.
Does it handle dark mode?
Yes. The theming section covers CSS custom property architecture, React theme providers, dynamic switching, prefers-color-scheme detection and persistent theme storage. It also lists missing dark mode as a common issue, so tokens should adapt to theme changes.
Which common problems does it warn about?
Token sprawl, inconsistent naming such as camelCase mixed with kebab-case, missing dark mode, hardcoded values, circular references between tokens and platform gaps where web has a token and mobile does not.
Which AI coding agents can use the skill?
The repository README describes support for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, Google Antigravity and Pi through different install routes. Skills-only installs ask which coding tool you use, so pick yours at the prompt.
What license does the skill use?
GitHub lists the wshobson/agents repository as MIT licensed, and the design-system-patterns skill sits inside its ui-design plugin. Confirm the license in the repository before copying the folder into a product of your own.