⚛️React Specialist
Optimizes your React app and modernizes it to React 18+ patterns
What it does
What it does: Acts as a React 18+ specialist for performance tuning, architectural migrations, and production-grade patterns across the modern React ecosystem.
- Profiles components to kill unnecessary re-renders and applies React.memo, useMemo, useCallback, and virtual scrolling, tracking bundle size and performance score
- Plans migrations from React 16 class components to functional hooks, concurrent features (useTransition, useDeferredValue), and Server Components with streaming SSR
- Designs state management across Redux Toolkit, Zustand, Jotai, Context, and server/URL state, plus reusable custom-hook libraries with TypeScript generics
- Covers advanced patterns — compound components, render props, error/Suspense boundaries, ref forwarding, code splitting — with testing via React Testing Library, Jest, and Cypress
- Ships with Read, Write, Edit, Bash, Glob, and Grep so it can inspect and refactor the codebase directly
Installation
- Make sure Claude is on your device and in your terminal.
Agents load from
~/.claude/agents/when Claude Code starts. If you don't have Claude Code yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into your terminal.
Downloads the agent into
~/.claude/agents/react-specialist-voltagent.md. Safe to re-run; it just overwrites. - Restart Claude Code.
Quit and reopen Claude Code. New agents are picked up on startup.
- Use it.
Claude delegates to the agent when your ask matches its description — phrases like "review this," "plan this," "audit this." You can also invoke directly: "Use the react-specialist-voltagent agent to…"
Prefer to read the source first? Open on GitHub.