# Design System Patterns (agent skill)

> Design System Patterns is an agent skill (a SKILL.md file) from wshobson/agents. Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. It works with Claude Code, Codex, Cursor, GitHub Copilot and OpenCode and has 41,725 GitHub stars across a repository of 7 listed skills.

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. Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/wshobson/agents |
| Skill path | plugins/ui-design/skills/design-system-patterns/SKILL.md |
| Skill name | design-system-patterns |
| GitHub stars | 41,725 |
| Installs on skills.sh | 3 |
| License | MIT |
| Skills in repo | 7 |
| Plugin marketplace | claude-code-workflows |
| Official | no |
| Works with | Claude Code, Codex, Cursor, GitHub Copilot, OpenCode |
| Category | Design & frontend |
| Last commit | Oct 17, 2026 |

## When it triggers

- Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

## Add this skill

### Claude Code

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

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/wshobson/agents.git
cp -r agents/plugins/ui-design/skills/design-system-patterns .agents/skills/design-system-patterns   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/wshobson/agents.git
cp -r agents/plugins/ui-design/skills/design-system-patterns .cursor/skills/design-system-patterns   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

skills.sh listing: https://www.skills.sh/wshobson/agents/design-system-patterns

---

Canonical page: https://appsgit.com/skills/wshobson-design-system-patterns
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed daily.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.