# Build Design System Patterns

Teams need consistent UI foundations across products and platforms. This skill guides token architecture, theme infrastructure, and component patterns that scale.

## Install

```bash
npx skillstore add wshobson/design-system-patterns
```

## Metadata

- Status: approved
- Slug: wshobson-design-system-patterns
- Skillstore revision: r1
- Version status: missing
- Tree hash: 0557542a2aa10e47977184220c1b0933a7abde22e70202703f86a65302a9ad8e
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/design-system-patterns/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-design-system-patterns
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-design-system-patterns/manifest

## Capabilities

- Explains primitive, semantic, and component token hierarchies.
- Provides React theme provider and theme toggle patterns.
- Shows Style Dictionary configuration for multi-platform token output.
- Describes compound, polymorphic, slot-based, and headless component patterns.
- Covers accessibility theming for reduced motion, high contrast, and forced colors.
- Gives guidance for token documentation, versioning, and migration.

## Use Cases

- Plan a Token Foundation: Create a clear token hierarchy for colors, type, spacing, radius, and component-specific values.
- Implement Theme Switching: Add light, dark, and system themes with persistent user preferences and accessible color modes.
- Standardize Component APIs: Choose component patterns that support variants, composition, accessibility, and long-term maintenance.

## Prompt Templates

### Create a Basic Token Plan

```
Create a design token hierarchy for a small web app. Include colors, spacing, typography, radius, and semantic usage names.
```

### Design Theme Switching

```
Design a React theme switching approach for light, dark, and system modes. Include persistence, hydration concerns, and accessibility checks.
```

### Review Component Architecture

```
Review our component library plan. Recommend compound, polymorphic, slot-based, or headless patterns for each component group.
```

### Plan a Multi-Platform Pipeline

```
Propose a token pipeline from design source to web, iOS, and Android outputs. Include versioning, review gates, and migration guidance.
```

## Limitations

- It provides guidance and examples, not a complete design system package.
- It does not inspect Figma files or synchronize tokens automatically.
- It does not enforce accessibility compliance without project-specific testing.
- Examples must be adapted to the application framework and build pipeline.

## Best Practices

- Name tokens by purpose, then map them to platform-specific implementation details.
- Treat token and component API changes as versioned contracts with migration notes.
- Test every theme against contrast, focus, motion, and high contrast requirements.

## Anti Patterns

- Using raw color and spacing values directly in product components.
- Creating many tokens without ownership, naming rules, or deprecation paths.
- Shipping theme changes without testing real components in each supported mode.

## Security Audit

- Audited at: 2026-07-07T07:30:59.961\+00:00
- Summary: All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.

## Stats

- Views: 290
- Downloads: 16
- Favorites: 0
- Popularity score: 0