Skip to main content
Open Skills
design-system-patternsby Seth HobsonDesignGitHub stars: 41.7k

Design System Patterns skill: what it does and how to install it

Builds scalable UI foundations with design tokens, theme switching, component architecture and Figma-to-code workflows.

Summary generated from the skill's documentation.

Install

$ npx skills add wshobson/agents --skill design-system-patterns

Run it in a terminal. If your agent is already running, start a new session so it picks the skill up.

About this skill

What it does. Defines primitive, semantic and component tokens, then applies them through CSS custom properties, theme providers and component patterns. It also covers multi-brand themes, accessibility modes, token transformation and synchronisation with Figma and Style Dictionary.

When to use it. For creating design tokens, theme switching, component libraries, design-to-code workflows or design system documentation across web and mobile applications.

History

Repo stars

41.7k+1.5k since 5 Oct 2026

Stars are counted for the whole repository, which holds 76 skills.

Show as a table
Repo stars by day
DateRepo stars
26 Oct 202641,741
25 Oct 202641,668
24 Oct 202641,623
23 Oct 202641,590
22 Oct 202641,533
21 Oct 202641,400
20 Oct 202641,212
19 Oct 202641,081
18 Oct 202640,990
17 Oct 202640,943
16 Oct 202640,891
15 Oct 202640,824
14 Oct 202640,663
13 Oct 202640,579
12 Oct 202640,457
11 Oct 202640,368
10 Oct 202640,319
9 Oct 202640,307
8 Oct 202640,296
7 Oct 202640,267
6 Oct 202640,238
5 Oct 202640,212

Installs

16.1k+324 since 19 Oct 2026

Installs via skills.sh

Show as a table
Installs by day
DateInstalls
26 Oct 202616,053
25 Oct 202615,994
24 Oct 202615,956
23 Oct 202615,928
22 Oct 202615,875
21 Oct 202615,819
20 Oct 202615,782
19 Oct 202615,729

Similar skills