react-expert

Name: react-expert
Author: Jeffallan

11kstars971forks

How to install react-expert?

jeffallan/claude-skills/react-expert

$npx -y skills add Jeffallan/claude-skills --skill react-expert

Installs into the current project.

Summary

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Serv

Files · 1

View on GitHub

SKILL.md

1	# React Expert
2
3	Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.
4
5	## When to Use This Skill
6
7	- Building new React components or features
8	- Implementing state management (local, Context, Redux, Zustand)
9	- Optimizing React performance
10	- Setting up React project architecture
11	- Working with React 19 Server Components
12	- Implementing forms with React 19 actions
13	- Data fetching patterns with TanStack Query or `use()`
14
15	## Core Workflow
16
17	1. Analyze requirements - Identify component hierarchy, state needs, data flow
18	2. Choose patterns - Select appropriate state management, data fetching approach
19	3. Implement - Write TypeScript components with proper types
20	4. Validate - Run `tsc --noEmit`; if it fails, review reported errors, fix all type issues, and re-run until clean before proceeding
21	5. Optimize - Apply memoization where needed, ensure accessibility; if new type errors are introduced, return to step 4
22	6. Test - Write tests with React Testing Library; if any assertions fail, debug and fix before submitting
23
24	## Reference Guide
25
26	Load detailed guidance based on context:
27
28	\| Topic \| Reference \| Load When \|
29	\|-------\|-----------\|-----------\|
30	\| Server Components \| `references/server-components.md` \| RSC patterns, Next.js App Router \|
31	\| React 19 \| `references/react-19-features.md` \| use() hook, useActionState, forms \|
32	\| State Management \| `references/state-management.md` \| Context, Zustand, Redux, TanStack \|
33	\| Hooks \| `references/hooks-patterns.md` \| Custom hooks, useEffect, useCallback \|
34	\| Performance \| `references/performance.md` \| memo, lazy, virtualization \|
35	\| Testing \| `references/testing-react.md` \| Testing Library, mocking \|
36	\| Class Migration \| `references/migration-class-to-modern.md` \| Converting class components to hooks/RSC \|
37
38	## Key Patterns
39
40	### Server Component (Next.js App Router)
41	```tsx
42	// app/users/page.tsx — Server Component, no "use client"
43	import { db } from '@/lib/db';
44
45	interface User {
46	id: string;
47	name: string;
48	}
49
50	export default async function UsersPage() {
51	const users: User[] = await db.user.findMany();
52
53	return (
54	<ul>
55	{users.map((user) => (
56	<li key={user.id}>{user.name}</li>
57	))}
58	</ul>
59	);
60	}
61	```
62
63	### React 19 Form with `useActionState`
64	```tsx
65	'use client';
66	import { useActionState } from 'react';
67
68	async function submitForm(_prev: string, formData: FormData): Promise<string> {
69	const name = formData.get('name') as string;
70	// perform server action or fetch
71	return `Hello, ${name}!`;
72	}
73
74	export function GreetForm() {
75	const [message, action, isPending] = useActionState(submitForm, '');
76
77	return (
78	<form action={action}>
79	<input name="name" required />
80	<button type="submit" disabled={isPending}>
81	{isPending ? 'Submitting…' : 'Submit'}
82	</button>
83	{message && <p>{message}</p>}
84	</form>
85	);
86	}
87	```
88
89	### Custom Hook with Cleanup
90	```tsx
91	import { useState, useEffect } from 'react';
92
93	function useWindowWidth(): number {
94	const [width, setWidth] = useState(() => window.innerWidth);
95
96	useEffect(() => {
97	const handler = () => setWidth(window.innerWidth);
98	window.addEventListener('resize', handler);
99	return () => window.removeEventListener('resize', handler); // cleanup
100	}, []);
101
102	return width;
103	}
104	```
105
106	## Constraints
107
108	### MUST DO
109	- Use TypeScript with strict mode
110	- Implement error boundaries for graceful failures
111	- Use `key` props correctly (stable, unique identifiers)
112	- Clean up effects (return cleanup function)
113	- Use semantic HTML and ARIA for accessibility
114	- Memoize when passing callbacks/objects to memoized children
115	- Use Suspense boundaries for async operations
116
117	### MUST NOT DO
118	- Mutate state directly
119	- Use array index as key for dynamic lists
120	- Create functions inside JSX (causes re-renders)
121	- Forget useEffect cleanup (memory leaks)
122	- Ignore React strict mode warnings
123	- Skip error boundaries in production
124
125	## Output Templates
126
127	When implementing React features, provide:
128	1. Component file with TypeScript types
129	2. Test file if non-trivial logic
130	3. Brief explanation of key decisions
131
132	## Knowledge Reference
133
134	React 19, Server Components,

People who liked this also viewed

6 picks

Type

react-expert

11kstars971forks

View on GitHub

How to install react-expert?

jeffallan/claude-skills/react-expert

$npx -y skills add Jeffallan/claude-skills --skill react-expert

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Expert
2
3	Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.
4
5	## When to Use This Skill
6
7	- Building new React components or features
8	- Implementing state management (local, Context, Redux, Zustand)
9	- Optimizing React performance
10	- Setting up React project architecture
11	- Working with React 19 Server Components
12	- Implementing forms with React 19 actions
13	- Data fetching patterns with TanStack Query or `use()`
14
15	## Core Workflow
16
17	1. Analyze requirements - Identify component hierarchy, state needs, data flow
18	2. Choose patterns - Select appropriate state management, data fetching approach
19	3. Implement - Write TypeScript components with proper types
20	4. Validate - Run `tsc --noEmit`; if it fails, review reported errors, fix all type issues, and re-run until clean before proceeding
21	5. Optimize - Apply memoization where needed, ensure accessibility; if new type errors are introduced, return to step 4
22	6. Test - Write tests with React Testing Library; if any assertions fail, debug and fix before submitting
23
24	## Reference Guide
25
26	Load detailed guidance based on context:
27
28	\| Topic \| Reference \| Load When \|
29	\|-------\|-----------\|-----------\|
30	\| Server Components \| `references/server-components.md` \| RSC patterns, Next.js App Router \|
31	\| React 19 \| `references/react-19-features.md` \| use() hook, useActionState, forms \|
32	\| State Management \| `references/state-management.md` \| Context, Zustand, Redux, TanStack \|
33	\| Hooks \| `references/hooks-patterns.md` \| Custom hooks, useEffect, useCallback \|
34	\| Performance \| `references/performance.md` \| memo, lazy, virtualization \|
35	\| Testing \| `references/testing-react.md` \| Testing Library, mocking \|
36	\| Class Migration \| `references/migration-class-to-modern.md` \| Converting class components to hooks/RSC \|
37
38	## Key Patterns
39
40	### Server Component (Next.js App Router)
41	```tsx
42	// app/users/page.tsx — Server Component, no "use client"
43	import { db } from '@/lib/db';
44
45	interface User {
46	id: string;
47	name: string;
48	}
49
50	export default async function UsersPage() {
51	const users: User[] = await db.user.findMany();
52
53	return (
54	<ul>
55	{users.map((user) => (
56	<li key={user.id}>{user.name}</li>
57	))}
58	</ul>
59	);
60	}
61	```
62
63	### React 19 Form with `useActionState`
64	```tsx
65	'use client';
66	import { useActionState } from 'react';
67
68	async function submitForm(_prev: string, formData: FormData): Promise<string> {
69	const name = formData.get('name') as string;
70	// perform server action or fetch
71	return `Hello, ${name}!`;
72	}
73
74	export function GreetForm() {
75	const [message, action, isPending] = useActionState(submitForm, '');
76
77	return (
78	<form action={action}>
79	<input name="name" required />
80	<button type="submit" disabled={isPending}>
81	{isPending ? 'Submitting…' : 'Submit'}
82	</button>
83	{message && <p>{message}</p>}
84	</form>
85	);
86	}
87	```
88
89	### Custom Hook with Cleanup
90	```tsx
91	import { useState, useEffect } from 'react';
92
93	function useWindowWidth(): number {
94	const [width, setWidth] = useState(() => window.innerWidth);
95
96	useEffect(() => {
97	const handler = () => setWidth(window.innerWidth);
98	window.addEventListener('resize', handler);
99	return () => window.removeEventListener('resize', handler); // cleanup
100	}, []);
101
102	return width;
103	}
104	```
105
106	## Constraints
107
108	### MUST DO
109	- Use TypeScript with strict mode
110	- Implement error boundaries for graceful failures
111	- Use `key` props correctly (stable, unique identifiers)
112	- Clean up effects (return cleanup function)
113	- Use semantic HTML and ARIA for accessibility
114	- Memoize when passing callbacks/objects to memoized children
115	- Use Suspense boundaries for async operations
116
117	### MUST NOT DO
118	- Mutate state directly
119	- Use array index as key for dynamic lists
120	- Create functions inside JSX (causes re-renders)
121	- Forget useEffect cleanup (memory leaks)
122	- Ignore React strict mode warnings
123	- Skip error boundaries in production
124
125	## Output Templates
126
127	When implementing React features, provide:
128	1. Component file with TypeScript types
129	2. Test file if non-trivial logic
130	3. Brief explanation of key decisions
131
132	## Knowledge Reference
133
134	React 19, Server Components,

People who liked this also viewed

6 picks

Type