react

Name: react
Author: dylantarre

33stars3forks

How to install react?

dylantarre/design-system-skills/react

$npx -y skills add dylantarre/design-system-skills --skill react

Installs into the current project.

Summary

Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.

Files · 1

View on GitHub

SKILL.md

1	# React Component Patterns
2
3	## Overview
4
5	Build accessible, token-driven React components following modern patterns. Covers styling approaches, TypeScript integration, composition patterns, and how to consume design tokens from the token skills.
6
7	## When to Use
8
9	- Creating a React component library
10	- Building components that use design tokens
11	- Setting up a design system in React/Next.js
12	- Converting designs to React components
13
14	## The Process
15
16	1. Identify component type: Primitive, composite, or layout?
17	2. Choose styling approach: CSS Modules, Tailwind, styled-components, or CSS-in-JS?
18	3. Define props interface: TypeScript types with sensible defaults
19	4. Implement with tokens: Use CSS custom properties or theme context
20	5. Add accessibility: ARIA, keyboard handling, focus management
21	6. Export properly: Named exports, types, and variants
22
23	## Styling Approaches
24
25	\| Approach \| When to Use \| Token Integration \|
26	\|----------\|-------------\|-------------------\|
27	\| CSS Modules \| Build-time CSS, SSR-friendly \| Import CSS with `var(--token)` \|
28	\| Tailwind \| Utility-first, rapid development \| Extend config with tokens \|
29	\| styled-components \| Runtime theming, dynamic styles \| ThemeProvider with tokens \|
30	\| Vanilla Extract \| Type-safe, zero-runtime \| Import tokens as TS objects \|
31	\| CSS Custom Properties \| Framework-agnostic, simple \| Direct `var(--token)` usage \|
32
33	## Project Structure
34
35	```
36	src/
37	├── components/
38	│ ├── primitives/ # Base components
39	│ │ ├── Button/
40	│ │ │ ├── Button.tsx
41	│ │ │ ├── Button.module.css
42	│ │ │ ├── Button.test.tsx
43	│ │ │ └── index.ts
44	│ │ ├── Input/
45	│ │ └── Text/
46	│ ├── composite/ # Composed components
47	│ │ ├── Card/
48	│ │ ├── Modal/
49	│ │ └── Dropdown/
50	│ └── layout/ # Layout components
51	│ ├── Stack/
52	│ ├── Grid/
53	│ └── Container/
54	├── tokens/
55	│ ├── colors.css
56	│ ├── spacing.css
57	│ └── index.css
58	├── hooks/
59	│ └── useTheme.ts
60	└── index.ts # Public exports
61	```
62
63	## Component Patterns
64
65	### Button Component
66
67	Button.tsx:
68	```tsx
69	import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
70	import styles from './Button.module.css';
71	import { clsx } from 'clsx';
72
73	export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
74	/** Visual style variant */
75	variant?: 'primary' \| 'secondary' \| 'ghost' \| 'danger';
76	/** Size of the button */
77	size?: 'sm' \| 'md' \| 'lg';
78	/** Full width button */
79	fullWidth?: boolean;
80	/** Loading state - disables button and shows spinner */
81	loading?: boolean;
82	/** Icon before text */
83	leftIcon?: ReactNode;
84	/** Icon after text */
85	rightIcon?: ReactNode;
86	children: ReactNode;
87	}
88
89	export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
90	(
91	{
92	variant = 'primary',
93	size = 'md',
94	fullWidth = false,
95	loading = false,
96	leftIcon,
97	rightIcon,
98	disabled,
99	className,
100	children,
101	...props
102	},
103	ref
104	) => {
105	const isDisabled = disabled \|\| loading;
106
107	return (
108	<button
109	ref={ref}
110	className={clsx(
111	styles.button,
112	styles[variant],
113	styles[size],
114	fullWidth && styles.fullWidth,
115	loading && styles.loading,
116	className
117	)}
118	disabled={isDisabled}
119	aria-busy={loading}
120	{...props}
121	>
122	{loading && <span className={styles.spinner} aria-hidden="true" />}
123	{leftIcon && <span className={styles.icon}>{leftIcon}</span>}
124	<span className={styles.label}>{children}</span>
125	{rightIcon && <span className={styles.icon}>{rightIcon}</span>}
126	</button>
127	);
128	}
129	);
130
131	Button.displayName = 'Button';
132	```
133
134	Button.module.css:
135	```css
136	.button {
137	/* Layout */
138	display: inline-flex;
139	align-items: center;
140	justify-content: center;
141	gap: var(--spacing-xs);
142
143	/* Typography */
144	font-family: inherit;
145	font-weight: 500;
146	line-height: 1;
147	white-space: nowrap;
148
149	/* Interaction */
150	cursor: pointer;
151	user-select: none;
152	transition:
153	background-color 150ms ease,
154	border-color 150ms ease,
155	transform 100ms ease;
156
157	/* Reset */
158	border: 1px solid transparent;
159	border-radius: var(--radius-md);
160	}
161
162	.button:focus-visible {
163	outline: 2px solid var(--color-primary-500);
164	outline-offset: 2px;
165	}
166
167	.button:active:not(:disabled) {
168	transform: scale(0.98);
169	}
170
171	.button:disabled {
172	cursor: not-allowed;
173	opacity: 0.5;
174	}
175
176	/* Variants */
177	.primary {
178	background-color: var(--color-primary-500);
179	color: white;
180	}
181
182	.primary:hover:not(:disabled) {
183	background-color: var(--color-primary-600);
184	}
185
186	.secondary {
187	background-color: transparent;
188	border-color: var(--color-gray-300);

People who liked this also viewed

6 picks

Type

react

33stars3forks

View on GitHub

How to install react?

dylantarre/design-system-skills/react

$npx -y skills add dylantarre/design-system-skills --skill react

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Component Patterns
2
3	## Overview
4
5	Build accessible, token-driven React components following modern patterns. Covers styling approaches, TypeScript integration, composition patterns, and how to consume design tokens from the token skills.
6
7	## When to Use
8
9	- Creating a React component library
10	- Building components that use design tokens
11	- Setting up a design system in React/Next.js
12	- Converting designs to React components
13
14	## The Process
15
16	1. Identify component type: Primitive, composite, or layout?
17	2. Choose styling approach: CSS Modules, Tailwind, styled-components, or CSS-in-JS?
18	3. Define props interface: TypeScript types with sensible defaults
19	4. Implement with tokens: Use CSS custom properties or theme context
20	5. Add accessibility: ARIA, keyboard handling, focus management
21	6. Export properly: Named exports, types, and variants
22
23	## Styling Approaches
24
25	\| Approach \| When to Use \| Token Integration \|
26	\|----------\|-------------\|-------------------\|
27	\| CSS Modules \| Build-time CSS, SSR-friendly \| Import CSS with `var(--token)` \|
28	\| Tailwind \| Utility-first, rapid development \| Extend config with tokens \|
29	\| styled-components \| Runtime theming, dynamic styles \| ThemeProvider with tokens \|
30	\| Vanilla Extract \| Type-safe, zero-runtime \| Import tokens as TS objects \|
31	\| CSS Custom Properties \| Framework-agnostic, simple \| Direct `var(--token)` usage \|
32
33	## Project Structure
34
35	```
36	src/
37	├── components/
38	│ ├── primitives/ # Base components
39	│ │ ├── Button/
40	│ │ │ ├── Button.tsx
41	│ │ │ ├── Button.module.css
42	│ │ │ ├── Button.test.tsx
43	│ │ │ └── index.ts
44	│ │ ├── Input/
45	│ │ └── Text/
46	│ ├── composite/ # Composed components
47	│ │ ├── Card/
48	│ │ ├── Modal/
49	│ │ └── Dropdown/
50	│ └── layout/ # Layout components
51	│ ├── Stack/
52	│ ├── Grid/
53	│ └── Container/
54	├── tokens/
55	│ ├── colors.css
56	│ ├── spacing.css
57	│ └── index.css
58	├── hooks/
59	│ └── useTheme.ts
60	└── index.ts # Public exports
61	```
62
63	## Component Patterns
64
65	### Button Component
66
67	Button.tsx:
68	```tsx
69	import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
70	import styles from './Button.module.css';
71	import { clsx } from 'clsx';
72
73	export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
74	/** Visual style variant */
75	variant?: 'primary' \| 'secondary' \| 'ghost' \| 'danger';
76	/** Size of the button */
77	size?: 'sm' \| 'md' \| 'lg';
78	/** Full width button */
79	fullWidth?: boolean;
80	/** Loading state - disables button and shows spinner */
81	loading?: boolean;
82	/** Icon before text */
83	leftIcon?: ReactNode;
84	/** Icon after text */
85	rightIcon?: ReactNode;
86	children: ReactNode;
87	}
88
89	export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
90	(
91	{
92	variant = 'primary',
93	size = 'md',
94	fullWidth = false,
95	loading = false,
96	leftIcon,
97	rightIcon,
98	disabled,
99	className,
100	children,
101	...props
102	},
103	ref
104	) => {
105	const isDisabled = disabled \|\| loading;
106
107	return (
108	<button
109	ref={ref}
110	className={clsx(
111	styles.button,
112	styles[variant],
113	styles[size],
114	fullWidth && styles.fullWidth,
115	loading && styles.loading,
116	className
117	)}
118	disabled={isDisabled}
119	aria-busy={loading}
120	{...props}
121	>
122	{loading && <span className={styles.spinner} aria-hidden="true" />}
123	{leftIcon && <span className={styles.icon}>{leftIcon}</span>}
124	<span className={styles.label}>{children}</span>
125	{rightIcon && <span className={styles.icon}>{rightIcon}</span>}
126	</button>
127	);
128	}
129	);
130
131	Button.displayName = 'Button';
132	```
133
134	Button.module.css:
135	```css
136	.button {
137	/* Layout */
138	display: inline-flex;
139	align-items: center;
140	justify-content: center;
141	gap: var(--spacing-xs);
142
143	/* Typography */
144	font-family: inherit;
145	font-weight: 500;
146	line-height: 1;
147	white-space: nowrap;
148
149	/* Interaction */
150	cursor: pointer;
151	user-select: none;
152	transition:
153	background-color 150ms ease,
154	border-color 150ms ease,
155	transform 100ms ease;
156
157	/* Reset */
158	border: 1px solid transparent;
159	border-radius: var(--radius-md);
160	}
161
162	.button:focus-visible {
163	outline: 2px solid var(--color-primary-500);
164	outline-offset: 2px;
165	}
166
167	.button:active:not(:disabled) {
168	transform: scale(0.98);
169	}
170
171	.button:disabled {
172	cursor: not-allowed;
173	opacity: 0.5;
174	}
175
176	/* Variants */
177	.primary {
178	background-color: var(--color-primary-500);
179	color: white;
180	}
181
182	.primary:hover:not(:disabled) {
183	background-color: var(--color-primary-600);
184	}
185
186	.secondary {
187	background-color: transparent;
188	border-color: var(--color-gray-300);

People who liked this also viewed

6 picks

Type