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.
From devsnpx claudepluginhub aaronbassett/agent-foundry --plugin devsThis skill uses the workspace's default tool permissions.
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.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides writing and configuring Hookify rules with YAML frontmatter, regex patterns, and conditions to monitor bash commands, file edits, prompts, and stop events.
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.