Help us improve
Share bugs, ideas, or general feedback.
From devs
Comprehensive React application development guidance covering project architecture, state management, performance optimization, security, and modern best practices including React 19 features. Use when (1) Working in React codebases (.jsx/.tsx files), (2) Architecting React applications (project structure, state management strategies), (3) Optimizing React performance (code splitting, memoization, virtualization), (4) Implementing security best practices (auth, XSS prevention, CSRF protection), (5) Applying React 19 features (Server Components, Actions, new hooks), (6) Setting up build configurations and tooling. Automatically triggered when working with React projects or addressing React-specific architecture, performance, or security concerns.
npx claudepluginhub aaronbassett/agent-foundry --plugin devsHow this skill is triggered — by the user, by Claude, or both
Slash command
/devs:react-coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Comprehensive guidance for building scalable, performant, and secure React applications with modern best practices.
assets/config-templates/vite.config.tsassets/config-templates/vitest.config.tsreferences/api-layer.mdreferences/build-and-bundling.mdreferences/common-pitfalls.mdreferences/ecosystem-tools.mdreferences/performance.mdreferences/project-structure.mdreferences/react-19-best-practices.mdreferences/security.mdreferences/state-management.mdreferences/testing.mdreferences/typescript-react.mdApplies opinionated React 18+/19 conventions for components: hooks patterns, Server Components, Suspense boundaries, state management, performance memoization, use() hook, form actions.
Creates React 18+ components, custom hooks, and state management (Zustand, Redux) for .jsx/.tsx files, Next.js App Router, and CRA setups. Debugs rendering, migrates class components, optimizes performance, implements Server Components, Suspense, and React 19 features.
React specialist for modern React apps: creates components, hooks, state management, debugs rendering, optimizes performance. Supports Next.js App Router, Server Components, React 19.
Share bugs, ideas, or general feedback.
Comprehensive guidance for building scalable, performant, and secure React applications with modern best practices.
Initialize with Vite:
pnpm create vite my-app --template react-ts
cd my-app
pnpm install
Use configuration templates:
Install essential dependencies:
# Routing
pnpm add react-router-dom
# Data fetching
pnpm add @tanstack/react-query
# Forms
pnpm add react-hook-form @hookform/resolvers zod
# State management (if needed)
pnpm add zustand
Organize by feature: See project-structure.md for complete layouts
Resolving Performance Issues:
Setting Up State Management:
Implementing Authentication:
Organize code by feature, not by technical type:
src/
├── app/ # App-level routing
├── features/ # Feature modules (self-contained)
│ ├── authentication/
│ ├── users/
│ └── dashboard/
├── components/ # Shared components
├── hooks/ # Shared hooks
├── lib/ # Third-party setup
└── utils/ # Shared utilities
Key principles:
See project-structure.md for complete guide including:
Choose the right state solution for each use case:
| State Type | Tool | Example |
|---|---|---|
| Component | useState, useReducer | Form inputs, toggles |
| Application | Context, Zustand, Jotai | Theme, auth status |
| Server Cache | React Query, SWR | API data |
| Form | React Hook Form | Form values, validation |
| URL | React Router | Filters, pagination |
Decision framework:
See state-management.md for complete patterns including:
Code Splitting - Load code on demand
const Dashboard = lazy(() => import('./routes/Dashboard'));
List Virtualization - Render only visible items
import { useVirtualizer } from '@tanstack/react-virtual';
Image Optimization - Lazy load and use modern formats
<img src="/image.jpg" loading="lazy" />
Bundle Optimization - Analyze and reduce bundle size
npx vite-bundle-visualizer
React 19's compiler automatically memoizes - remove manual React.memo, useMemo, useCallback when using the compiler.
See performance.md for complete guide including:
Structure API calls for maintainability and type safety:
// features/users/api/get-user.ts
import { z } from 'zod';
import { useQuery } from '@tanstack/react-query';
const userSchema = z.object({
id: z.string(),
name: z.string(),
email: z.string().email(),
});
export type User = z.infer<typeof userSchema>;
export async function getUser(userId: string): Promise<User> {
const response = await apiClient.get(`/users/${userId}`);
return userSchema.parse(response.data);
}
export function useUser(userId: string) {
return useQuery({
queryKey: ['users', userId],
queryFn: () => getUser(userId),
});
}
See api-layer.md for complete patterns including:
Follow the testing pyramid:
/\
/E2E\ ← Few
/------\
/Integr.\ ← Some
/----------\
/ Unit \ ← Many
Tools:
Example:
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('button calls onClick when clicked', async () => {
const handleClick = vi.fn();
const user = userEvent.setup();
render(<Button onClick={handleClick}>Click me</Button>);
await user.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
See testing.md for complete guide including:
Example:
// ✅ Secure token storage
// Server sets HttpOnly cookie
res.cookie('auth_token', token, {
httpOnly: true,
secure: true,
sameSite: 'strict',
});
// ✅ Sanitize user content
import DOMPurify from 'dompurify';
const sanitized = DOMPurify.sanitize(userContent);
See security.md for complete guide including:
Example:
'use client';
import { useActionState } from 'react';
async function createUserAction(prevState, formData) {
const user = await api.createUser(formData);
return { success: true, user };
}
export function CreateUserForm() {
const [state, formAction, isPending] = useActionState(createUserAction, null);
return (
<form action={formAction}>
<input name="email" required />
<button disabled={isPending}>
{isPending ? 'Creating...' : 'Create'}
</button>
</form>
);
}
See react-19-best-practices.md for complete guide.
Optimized build setup with code splitting, minification, and tree shaking.
See build-and-bundling.md for:
See ecosystem-tools.md for recommended packages:
Avoid these frequent mistakes:
See common-pitfalls.md for examples and solutions.
Type your React components properly:
type ButtonProps = {
children: React.ReactNode;
variant?: 'primary' | 'secondary';
onClick?: () => void;
};
export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
return <button className={variant} onClick={onClick}>{children}</button>;
}
See typescript-react.md for complete patterns including:
Architecture & Organization:
Performance & Optimization:
API & Data:
Testing & Quality:
React 19 & Modern Features:
Tools & Ecosystem:
Troubleshooting:
Pre-configured files for quick project setup:
Build React applications that are fast, secure, and maintainable.