component-docs

Name: component-docs
Author: dylantarre

33stars3forks

How to install component-docs?

dylantarre/design-system-skills/component-docs

$npx -y skills add dylantarre/design-system-skills --skill component-docs

Installs into the current project.

Summary

Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.

Files · 1

View on GitHub

SKILL.md

1	# Component Documentation Generator
2
3	## Overview
4
5	Generate comprehensive component documentation including API references, usage examples, accessibility guidelines, and design specifications. Create documentation that serves both designers and developers.
6
7	## When to Use
8
9	- Documenting new components
10	- Creating component API references
11	- Writing usage guidelines
12	- Building a design system documentation site
13
14	## Quick Reference: Documentation Sections
15
16	\| Section \| Purpose \| Audience \|
17	\|---------\|---------\|----------\|
18	\| Overview \| What the component does \| All \|
19	\| When to Use \| Decision guidance \| Designers \|
20	\| Props/API \| Technical reference \| Developers \|
21	\| Examples \| Code snippets \| Developers \|
22	\| Variants \| Visual options \| All \|
23	\| States \| Interactive states \| Designers \|
24	\| Accessibility \| A11y guidelines \| All \|
25	\| Design Specs \| Spacing, tokens used \| Designers \|
26	\| Do/Don't \| Usage guidance \| All \|
27
28	## The Process
29
30	1. Identify component scope: What does it do, what doesn't it do?
31	2. Define props interface: All configurable options
32	3. Create examples: Basic, advanced, edge cases
33	4. Document variants: Visual variations
34	5. Add accessibility: ARIA, keyboard, screen reader
35	6. Include design specs: Spacing, colors, typography tokens
36	7. Write guidelines: When to use, when not to
37
38	---
39
40	## Component Documentation Template
41
42	```markdown
43	# Button
44
45	Buttons allow users to take actions and make choices with a single tap.
46
47	## Overview
48
49	The Button component is used for triggering actions. Use buttons to submit forms,
50	navigate between pages, or trigger in-page functionality.
51
52	## When to Use
53
54	\| Scenario \| Recommendation \|
55	\|----------\|----------------\|
56	\| Primary action \| Use `variant="primary"` \|
57	\| Secondary action \| Use `variant="secondary"` \|
58	\| Destructive action \| Use `variant="danger"` \|
59	\| Navigation \| Consider using a Link instead \|
60	\| In forms \| Use `type="submit"` \|
61
62	## Import
63
64	```tsx
65	import { Button } from '@acme/design-system';
66	```
67
68	## Basic Usage
69
70	```tsx
71	<Button onClick={handleClick}>Click me</Button>
72	```
73
74	## Props
75
76	\| Prop \| Type \| Default \| Description \|
77	\|------\|------\|---------\|-------------\|
78	\| `variant` \| `'primary' \\| 'secondary' \\| 'ghost' \\| 'danger'` \| `'primary'` \| Visual style variant \|
79	\| `size` \| `'sm' \\| 'md' \\| 'lg'` \| `'md'` \| Button size \|
80	\| `disabled` \| `boolean` \| `false` \| Disables the button \|
81	\| `loading` \| `boolean` \| `false` \| Shows loading spinner \|
82	\| `fullWidth` \| `boolean` \| `false` \| Makes button 100% width \|
83	\| `leftIcon` \| `ReactNode` \| - \| Icon before text \|
84	\| `rightIcon` \| `ReactNode` \| - \| Icon after text \|
85	\| `type` \| `'button' \\| 'submit' \\| 'reset'` \| `'button'` \| HTML button type \|
86	\| `onClick` \| `(event: MouseEvent) => void` \| - \| Click handler \|
87	\| `children` \| `ReactNode` \| - \| Button label \|
88
89	## Variants
90
91	### Primary
92	Use for the main action on a page or in a form.
93
94	```tsx
95	<Button variant="primary">Save changes</Button>
96	```
97
98	### Secondary
99	Use for secondary actions that support the primary action.
100
101	```tsx
102	<Button variant="secondary">Cancel</Button>
103	```
104
105	### Ghost
106	Use for tertiary actions or in dense UIs.
107
108	```tsx
109	<Button variant="ghost">Learn more</Button>
110	```
111
112	### Danger
113	Use for destructive actions like delete.
114
115	```tsx
116	<Button variant="danger">Delete account</Button>
117	```
118
119	## Sizes
120
121	```tsx
122	<Button size="sm">Small</Button>
123	<Button size="md">Medium</Button>
124	<Button size="lg">Large</Button>
125	```
126
127	\| Size \| Height \| Font Size \| Use Case \|
128	\|------\|--------\|-----------\|----------\|
129	\| `sm` \| 32px \| 14px \| Compact UIs, tables \|
130	\| `md` \| 40px \| 16px \| Default, most uses \|
131	\| `lg` \| 48px \| 18px \| Hero sections, emphasis \|
132
133	## States
134
135	### Default
136	```tsx
137	<Button>Default</Button>
138	```
139
140	### Hover
141	Slightly darkened background. Applied automatically on mouse hover.
142
143	### Active
144	Pressed state with slight scale reduction.
145
146	### Focus
147	Focus ring appears on keyboard focus (focus-visible).
148
149	### Disabled
150	```tsx
151	<Button disabled>Disabled</Button>
152	```
153	- 50% opacity
154	- Cursor changes to not-allowed
155	- Click events are ignored
156
157	### Loading
158	```tsx
159	<Button loading>Saving...</Button>
160	```
161	- Shows spinner icon
162	- Button is disabled
163	- Label remains for width consistency
164	- `aria-busy="true"` for screen readers
165
166	## With Icons
167
168	```tsx
169	// Icon before text
170	<Button leftIcon={<PlusIcon />}>Add item</Button>
171
172	// Icon after text
173	<Button rightIcon={<ArrowRightIcon />}>Continue</Button>
174
175	// Icon only (use aria-label)
176	<Button aria-label="Settings">
177	<SettingsIcon />
178	</Button>
179	```
180
181	## Full Width
182
183	```tsx
184	<Button fullWidth>Sign up</Button>
185	```
186
187	## Button Groups
188
189	```tsx
190	<div className="button-group">
191	<Button variant="secondary">Cancel</Button>
192	<Button variant="primary">Save</Button>
193	</div>
194	```
195
196	## Accessibility
197
198	### Keyboard Navigation
199
200	\| Key \| Acti

People who liked this also viewed

6 picks

Type

component-docs

33stars3forks

View on GitHub

How to install component-docs?

dylantarre/design-system-skills/component-docs

$npx -y skills add dylantarre/design-system-skills --skill component-docs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Component Documentation Generator
2
3	## Overview
4
5	Generate comprehensive component documentation including API references, usage examples, accessibility guidelines, and design specifications. Create documentation that serves both designers and developers.
6
7	## When to Use
8
9	- Documenting new components
10	- Creating component API references
11	- Writing usage guidelines
12	- Building a design system documentation site
13
14	## Quick Reference: Documentation Sections
15
16	\| Section \| Purpose \| Audience \|
17	\|---------\|---------\|----------\|
18	\| Overview \| What the component does \| All \|
19	\| When to Use \| Decision guidance \| Designers \|
20	\| Props/API \| Technical reference \| Developers \|
21	\| Examples \| Code snippets \| Developers \|
22	\| Variants \| Visual options \| All \|
23	\| States \| Interactive states \| Designers \|
24	\| Accessibility \| A11y guidelines \| All \|
25	\| Design Specs \| Spacing, tokens used \| Designers \|
26	\| Do/Don't \| Usage guidance \| All \|
27
28	## The Process
29
30	1. Identify component scope: What does it do, what doesn't it do?
31	2. Define props interface: All configurable options
32	3. Create examples: Basic, advanced, edge cases
33	4. Document variants: Visual variations
34	5. Add accessibility: ARIA, keyboard, screen reader
35	6. Include design specs: Spacing, colors, typography tokens
36	7. Write guidelines: When to use, when not to
37
38	---
39
40	## Component Documentation Template
41
42	```markdown
43	# Button
44
45	Buttons allow users to take actions and make choices with a single tap.
46
47	## Overview
48
49	The Button component is used for triggering actions. Use buttons to submit forms,
50	navigate between pages, or trigger in-page functionality.
51
52	## When to Use
53
54	\| Scenario \| Recommendation \|
55	\|----------\|----------------\|
56	\| Primary action \| Use `variant="primary"` \|
57	\| Secondary action \| Use `variant="secondary"` \|
58	\| Destructive action \| Use `variant="danger"` \|
59	\| Navigation \| Consider using a Link instead \|
60	\| In forms \| Use `type="submit"` \|
61
62	## Import
63
64	```tsx
65	import { Button } from '@acme/design-system';
66	```
67
68	## Basic Usage
69
70	```tsx
71	<Button onClick={handleClick}>Click me</Button>
72	```
73
74	## Props
75
76	\| Prop \| Type \| Default \| Description \|
77	\|------\|------\|---------\|-------------\|
78	\| `variant` \| `'primary' \\| 'secondary' \\| 'ghost' \\| 'danger'` \| `'primary'` \| Visual style variant \|
79	\| `size` \| `'sm' \\| 'md' \\| 'lg'` \| `'md'` \| Button size \|
80	\| `disabled` \| `boolean` \| `false` \| Disables the button \|
81	\| `loading` \| `boolean` \| `false` \| Shows loading spinner \|
82	\| `fullWidth` \| `boolean` \| `false` \| Makes button 100% width \|
83	\| `leftIcon` \| `ReactNode` \| - \| Icon before text \|
84	\| `rightIcon` \| `ReactNode` \| - \| Icon after text \|
85	\| `type` \| `'button' \\| 'submit' \\| 'reset'` \| `'button'` \| HTML button type \|
86	\| `onClick` \| `(event: MouseEvent) => void` \| - \| Click handler \|
87	\| `children` \| `ReactNode` \| - \| Button label \|
88
89	## Variants
90
91	### Primary
92	Use for the main action on a page or in a form.
93
94	```tsx
95	<Button variant="primary">Save changes</Button>
96	```
97
98	### Secondary
99	Use for secondary actions that support the primary action.
100
101	```tsx
102	<Button variant="secondary">Cancel</Button>
103	```
104
105	### Ghost
106	Use for tertiary actions or in dense UIs.
107
108	```tsx
109	<Button variant="ghost">Learn more</Button>
110	```
111
112	### Danger
113	Use for destructive actions like delete.
114
115	```tsx
116	<Button variant="danger">Delete account</Button>
117	```
118
119	## Sizes
120
121	```tsx
122	<Button size="sm">Small</Button>
123	<Button size="md">Medium</Button>
124	<Button size="lg">Large</Button>
125	```
126
127	\| Size \| Height \| Font Size \| Use Case \|
128	\|------\|--------\|-----------\|----------\|
129	\| `sm` \| 32px \| 14px \| Compact UIs, tables \|
130	\| `md` \| 40px \| 16px \| Default, most uses \|
131	\| `lg` \| 48px \| 18px \| Hero sections, emphasis \|
132
133	## States
134
135	### Default
136	```tsx
137	<Button>Default</Button>
138	```
139
140	### Hover
141	Slightly darkened background. Applied automatically on mouse hover.
142
143	### Active
144	Pressed state with slight scale reduction.
145
146	### Focus
147	Focus ring appears on keyboard focus (focus-visible).
148
149	### Disabled
150	```tsx
151	<Button disabled>Disabled</Button>
152	```
153	- 50% opacity
154	- Cursor changes to not-allowed
155	- Click events are ignored
156
157	### Loading
158	```tsx
159	<Button loading>Saving...</Button>
160	```
161	- Shows spinner icon
162	- Button is disabled
163	- Label remains for width consistency
164	- `aria-busy="true"` for screen readers
165
166	## With Icons
167
168	```tsx
169	// Icon before text
170	<Button leftIcon={<PlusIcon />}>Add item</Button>
171
172	// Icon after text
173	<Button rightIcon={<ArrowRightIcon />}>Continue</Button>
174
175	// Icon only (use aria-label)
176	<Button aria-label="Settings">
177	<SettingsIcon />
178	</Button>
179	```
180
181	## Full Width
182
183	```tsx
184	<Button fullWidth>Sign up</Button>
185	```
186
187	## Button Groups
188
189	```tsx
190	<div className="button-group">
191	<Button variant="secondary">Cancel</Button>
192	<Button variant="primary">Save</Button>
193	</div>
194	```
195
196	## Accessibility
197
198	### Keyboard Navigation
199
200	\| Key \| Acti

People who liked this also viewed

6 picks

Type