Skip to content
Get packs

Design System Patterns

Guides the agent to build design tokens, light/dark theming, and reusable component architecture.

Source Download skill
Repository
wshobson/agents
Stars
42,095
Licence
MIT
Files
5 files

What it does

Once installed, the agent approaches UI styling as a system: it organises colours, spacing, typography and shadows into named design tokens (raw values, then meaning-based semantic names, then component-specific names). It can set up light and dark themes with CSS custom properties, detect system colour-scheme preferences, and structure component libraries with patterns such as compound components, variants and headless UI. The skill's own files cover these patterns in more depth, so the agent can reach for worked examples when needed.

Great for

  • Front-end developers starting or tidying a component library
  • Designers and engineers agreeing on a shared token naming scheme
  • Teams adding light/dark or multi-brand theming to an existing app

Skip it if

  • Quick one-off styling of a single page, where the full token architecture would be overkill
  • Teams whose tooling is not web or mobile UI code, since the patterns target UI frameworks and CSS

Try asking

  • “Create a semantic token hierarchy for our app's colours and spacing, with light and dark themes”
  • “Add dark mode switching that respects prefers-color-scheme and saves the user's choice”
  • “Plan a component library API with variants, sizes and polymorphic 'as' props for our buttons and cards”
  • “Set up a Style Dictionary pipeline that outputs CSS and iOS tokens from our Figma variables”
Step-by-step guide: how to use Design System PatternsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    design-system-patterns.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-system-patterns.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-system-patterns.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the framework you use (React, Vue, Tailwind, etc.) so the agent picks matching theming and component patterns.
  • Share your existing colour or spacing values so the agent builds tokens from your real design rather than placeholders.
  • Treat the generated token structure as a starting point and check it against your design team's naming conventions.

What's inside

  • references/component-architecture.md
  • references/design-tokens.md
  • references/details.md
  • references/theming-architecture.md
  • SKILL.md

Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.