design-system

Name: design-system
Author: anthropics

2.8kinstalls2.7kforks

How to install design-system?

anthropics/knowledge-work-plugins/design-system

$npx -y skills add anthropics/knowledge-work-plugins --skill design-system

Installs into the current project.

Summary

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

Files · 1

View on GitHub

SKILL.md

1	# /design-system
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Manage your design system — audit for consistency, document components, or design new patterns.
6
7	## Usage
8
9	```
10	/design-system audit # Full system audit
11	/design-system document [component] # Document a component
12	/design-system extend [pattern] # Design a new component or pattern
13	```
14
15	## Components of a Design System
16
17	### Design Tokens
18	Atomic values that define the visual language:
19	- Colors (brand, semantic, neutral)
20	- Typography (scale, weights, line heights)
21	- Spacing (scale, component padding)
22	- Borders (radius, width)
23	- Shadows (elevation levels)
24	- Motion (durations, easings)
25
26	### Components
27	Reusable UI elements with defined:
28	- Variants (primary, secondary, ghost)
29	- States (default, hover, active, disabled, loading, error)
30	- Sizes (sm, md, lg)
31	- Behavior (interactions, animations)
32	- Accessibility (ARIA, keyboard)
33
34	### Patterns
35	Common UI solutions combining components:
36	- Forms (input groups, validation, submission)
37	- Navigation (sidebar, tabs, breadcrumbs)
38	- Data display (tables, cards, lists)
39	- Feedback (toasts, modals, inline messages)
40
41	## Principles
42
43	1. Consistency over creativity — The system exists so teams don't reinvent the wheel
44	2. Flexibility within constraints — Components should be composable, not rigid
45	3. Document everything — If it's not documented, it doesn't exist
46	4. Version and migrate — Breaking changes need migration paths
47
48	## Output — Audit
49
50	```markdown
51	## Design System Audit
52
53	### Summary
54	Components reviewed: [X] \| Issues found: [X] \| Score: [X/100]
55
56	### Naming Consistency
57	\| Issue \| Components \| Recommendation \|
58	\|-------\|------------\|----------------\|
59	\| [Inconsistent naming] \| [List] \| [Standard to adopt] \|
60
61	### Token Coverage
62	\| Category \| Defined \| Hardcoded Values Found \|
63	\|----------\|---------\|----------------------\|
64	\| Colors \| [X] \| [X] instances of hardcoded hex \|
65	\| Spacing \| [X] \| [X] instances of arbitrary values \|
66	\| Typography \| [X] \| [X] instances of custom fonts/sizes \|
67
68	### Component Completeness
69	\| Component \| States \| Variants \| Docs \| Score \|
70	\|-----------\|--------\|----------\|------\|-------\|
71	\| Button \| ✅ \| ✅ \| ⚠️ \| 8/10 \|
72	\| Input \| ✅ \| ⚠️ \| ❌ \| 5/10 \|
73
74	### Priority Actions
75	1. [Most impactful improvement]
76	2. [Second priority]
77	3. [Third priority]
78	```
79
80	## Output — Document
81
82	```markdown
83	## Component: [Name]
84
85	### Description
86	[What this component is and when to use it]
87
88	### Variants
89	\| Variant \| Use When \|
90	\|---------\|----------\|
91	\| [Primary] \| [Main actions] \|
92	\| [Secondary] \| [Supporting actions] \|
93
94	### Props / Properties
95	\| Property \| Type \| Default \| Description \|
96	\|----------\|------\|---------\|-------------\|
97	\| [prop] \| [type] \| [default] \| [description] \|
98
99	### States
100	\| State \| Visual \| Behavior \|
101	\|-------\|--------\|----------\|
102	\| Default \| [description] \| — \|
103	\| Hover \| [description] \| [interaction] \|
104	\| Active \| [description] \| [interaction] \|
105	\| Disabled \| [description] \| Non-interactive \|
106	\| Loading \| [description] \| [animation] \|
107
108	### Accessibility
109	- Role: [ARIA role]
110	- Keyboard: [Tab, Enter, Escape behavior]
111	- Screen reader: [Announced as...]
112
113	### Do's and Don'ts
114	\| ✅ Do \| ❌ Don't \|
115	\|------\|---------\|
116	\| [Best practice] \| [Anti-pattern] \|
117
118	### Code Example
119	[Framework-appropriate code snippet]
120	```
121
122	## Output — Extend
123
124	```markdown
125	## New Component: [Name]
126
127	### Problem
128	[What user need or gap this component addresses]
129
130	### Existing Patterns
131	\| Related Component \| Similarity \| Why It's Not Enough \|
132	\|-------------------\|-----------\|---------------------\|
133	\| [Component] \| [What's shared] \| [What's missing] \|
134
135	### Proposed Design
136
137	#### API / Props
138	\| Property \| Type \| Default \| Description \|
139	\|----------\|------\|---------\|-------------\|
140	\| [prop] \| [type] \| [default] \| [description] \|
141
142	#### Variants
143	\| Variant \| Use When \| Visual \|
144	\|---------\|----------\|--------\|
145	\| [Variant] \| [Scenario] \| [Description] \|
146
147	#### States
148	\| State \| Behavior \| Notes \|
149	\|-------\|----------\|-------\|
150	\| Default \| [Description] \| — \|
151	\| Hover \| [Description] \| [Interaction] \|
152	\| Disabled \| [Description] \| Non-interactive \|
153	\| Loading \| [Description] \| [Animation] \|
154
155	#### Tokens Used
156	- Colors: [Which tokens]
157	- Spacing: [Which tokens]
158	- Typography: [Which tokens]
159
160	### Accessibility
161	- Role: [ARIA role]
162	- Keyboard: [Expected interactions]
163	- Screen reader: [Announced as...]
164
165	### Open Questions
166	- [Decision that needs design review]
167	- [Edge case to resolve]
168	```
169
170	## If Connectors Available
171
172	If ~~design tool is connected:
173	- Audit components di

People who liked this also viewed

6 picks

Type

design-system

2.8kinstalls2.7kforks

View on GitHub

How to install design-system?

anthropics/knowledge-work-plugins/design-system

$npx -y skills add anthropics/knowledge-work-plugins --skill design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /design-system
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Manage your design system — audit for consistency, document components, or design new patterns.
6
7	## Usage
8
9	```
10	/design-system audit # Full system audit
11	/design-system document [component] # Document a component
12	/design-system extend [pattern] # Design a new component or pattern
13	```
14
15	## Components of a Design System
16
17	### Design Tokens
18	Atomic values that define the visual language:
19	- Colors (brand, semantic, neutral)
20	- Typography (scale, weights, line heights)
21	- Spacing (scale, component padding)
22	- Borders (radius, width)
23	- Shadows (elevation levels)
24	- Motion (durations, easings)
25
26	### Components
27	Reusable UI elements with defined:
28	- Variants (primary, secondary, ghost)
29	- States (default, hover, active, disabled, loading, error)
30	- Sizes (sm, md, lg)
31	- Behavior (interactions, animations)
32	- Accessibility (ARIA, keyboard)
33
34	### Patterns
35	Common UI solutions combining components:
36	- Forms (input groups, validation, submission)
37	- Navigation (sidebar, tabs, breadcrumbs)
38	- Data display (tables, cards, lists)
39	- Feedback (toasts, modals, inline messages)
40
41	## Principles
42
43	1. Consistency over creativity — The system exists so teams don't reinvent the wheel
44	2. Flexibility within constraints — Components should be composable, not rigid
45	3. Document everything — If it's not documented, it doesn't exist
46	4. Version and migrate — Breaking changes need migration paths
47
48	## Output — Audit
49
50	```markdown
51	## Design System Audit
52
53	### Summary
54	Components reviewed: [X] \| Issues found: [X] \| Score: [X/100]
55
56	### Naming Consistency
57	\| Issue \| Components \| Recommendation \|
58	\|-------\|------------\|----------------\|
59	\| [Inconsistent naming] \| [List] \| [Standard to adopt] \|
60
61	### Token Coverage
62	\| Category \| Defined \| Hardcoded Values Found \|
63	\|----------\|---------\|----------------------\|
64	\| Colors \| [X] \| [X] instances of hardcoded hex \|
65	\| Spacing \| [X] \| [X] instances of arbitrary values \|
66	\| Typography \| [X] \| [X] instances of custom fonts/sizes \|
67
68	### Component Completeness
69	\| Component \| States \| Variants \| Docs \| Score \|
70	\|-----------\|--------\|----------\|------\|-------\|
71	\| Button \| ✅ \| ✅ \| ⚠️ \| 8/10 \|
72	\| Input \| ✅ \| ⚠️ \| ❌ \| 5/10 \|
73
74	### Priority Actions
75	1. [Most impactful improvement]
76	2. [Second priority]
77	3. [Third priority]
78	```
79
80	## Output — Document
81
82	```markdown
83	## Component: [Name]
84
85	### Description
86	[What this component is and when to use it]
87
88	### Variants
89	\| Variant \| Use When \|
90	\|---------\|----------\|
91	\| [Primary] \| [Main actions] \|
92	\| [Secondary] \| [Supporting actions] \|
93
94	### Props / Properties
95	\| Property \| Type \| Default \| Description \|
96	\|----------\|------\|---------\|-------------\|
97	\| [prop] \| [type] \| [default] \| [description] \|
98
99	### States
100	\| State \| Visual \| Behavior \|
101	\|-------\|--------\|----------\|
102	\| Default \| [description] \| — \|
103	\| Hover \| [description] \| [interaction] \|
104	\| Active \| [description] \| [interaction] \|
105	\| Disabled \| [description] \| Non-interactive \|
106	\| Loading \| [description] \| [animation] \|
107
108	### Accessibility
109	- Role: [ARIA role]
110	- Keyboard: [Tab, Enter, Escape behavior]
111	- Screen reader: [Announced as...]
112
113	### Do's and Don'ts
114	\| ✅ Do \| ❌ Don't \|
115	\|------\|---------\|
116	\| [Best practice] \| [Anti-pattern] \|
117
118	### Code Example
119	[Framework-appropriate code snippet]
120	```
121
122	## Output — Extend
123
124	```markdown
125	## New Component: [Name]
126
127	### Problem
128	[What user need or gap this component addresses]
129
130	### Existing Patterns
131	\| Related Component \| Similarity \| Why It's Not Enough \|
132	\|-------------------\|-----------\|---------------------\|
133	\| [Component] \| [What's shared] \| [What's missing] \|
134
135	### Proposed Design
136
137	#### API / Props
138	\| Property \| Type \| Default \| Description \|
139	\|----------\|------\|---------\|-------------\|
140	\| [prop] \| [type] \| [default] \| [description] \|
141
142	#### Variants
143	\| Variant \| Use When \| Visual \|
144	\|---------\|----------\|--------\|
145	\| [Variant] \| [Scenario] \| [Description] \|
146
147	#### States
148	\| State \| Behavior \| Notes \|
149	\|-------\|----------\|-------\|
150	\| Default \| [Description] \| — \|
151	\| Hover \| [Description] \| [Interaction] \|
152	\| Disabled \| [Description] \| Non-interactive \|
153	\| Loading \| [Description] \| [Animation] \|
154
155	#### Tokens Used
156	- Colors: [Which tokens]
157	- Spacing: [Which tokens]
158	- Typography: [Which tokens]
159
160	### Accessibility
161	- Role: [ARIA role]
162	- Keyboard: [Expected interactions]
163	- Screen reader: [Announced as...]
164
165	### Open Questions
166	- [Decision that needs design review]
167	- [Edge case to resolve]
168	```
169
170	## If Connectors Available
171
172	If ~~design tool is connected:
173	- Audit components di

People who liked this also viewed

6 picks

Type