Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
react-expert
description
React ecosystem expert including hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives
version
1.1.0
model
sonnet
invoked_by
both
user_invocable
true
tools
["Read","Write","Edit","Bash","Grep","Glob"]
globs
["**/*.tsx","**/*.jsx","components/**/*"]
best_practices
["Use functional components with hooks","Follow the Rules of Hooks","Implement proper memoization","Use TypeScript for type safety"]
error_handling
graceful
streaming
supported
verified
true
lastVerifiedAt
"2026-02-22T00:00:00.000Z"
source
builtin
trust_score
100
provenance_sha
2685f54de34e9a58
React Expert
React ecosystem expert with deep knowledge of hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives.
- Review code for React best practices
- Implement modern React patterns (React 19)
- Design component architectures
- Optimize React performance
- Build accessible UI with Radix/Shadcn
Component Structure
Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Implement proper prop types with TypeScript
Split large components into smaller, focused ones
Hooks
Follow the Rules of Hooks
Use custom hooks for reusable logic
Keep hooks focused and simple
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
State Management
Use useState for local component state
Implement useReducer for complex state logic
Use Context API for shared state
Keep state as close to where it's used as possible
Avoid prop drilling through proper state management
Use state management libraries only when necessary
Performance
Use React Compiler (available in React 19) for automatic memoization — remove manual useMemo/useCallback where the compiler can infer them
Only add React.memo, useMemo, useCallback when the compiler cannot help (complex object identity, external deps, stable callback refs for third-party libraries)
Avoid unnecessary re-renders; verify with React DevTools Profiler before adding manual memoization
Implement proper lazy loading with React.lazy and Suspense
Use proper key props in lists
Keep components small and focused — small components maximize compiler optimization surface
React 19 Features
React Compiler
The React Compiler (stable in React 19) performs automatic memoization at build time
Remove redundant React.memo, useMemo, useCallback wrappers — the compiler handles them
Compiler opt-out: add // @no-react-compiler pragma to a component/file when manual control is needed
forbidden_patterns:
- pattern: "useEffect\\([^)]*\\[\\]\\s*\\)"
message: "Empty dependency array may cause stale closures"
severity: "warning"
- pattern: "dangerouslySetInnerHTML"
message: "Avoid dangerouslySetInnerHTML; sanitize if necessary"
severity: "warning"
- pattern: "document\\.(getElementById|querySelector)"
message: "Use React refs instead of direct DOM access"
severity: "warning"
- pattern: "forwardRef"
message: "React 19: pass ref as a plain prop instead of using forwardRef"
severity: "info"
- pattern: "import.*useContext.*from 'react'"
message: "React 19: prefer use(Context) which supports conditional calls"
severity: "info"
**Component Review**:
```
User: "Review this React component for best practices"
Agent: [Analyzes hooks, memoization, accessibility, and provides feedback]
```
Still use useMemo/useCallback for: stable refs passed to third-party libs, expensive computations with external deps the compiler cannot see
Actions
Use async functions as form action props for automatic pending/error state management
Actions replace the onSubmit + manual loading/error state boilerplate pattern
Server Actions (in Next.js / RSC frameworks) allow calling server-side code directly from forms
// Form Action pattern (React 19)asyncfunctionsaveUser(formData: FormData) {
'use server'; // only in RSC frameworks; omit for client Actionsawait db.users.update({ name: formData.get('name') });
}
<form action={saveUser}>
<inputname="name" /><buttontype="submit">Save</button>
</form>;
useActionState
Use useActionState to track the result and pending state of a form Action
use(promise) — read a Promise's resolved value during render (integrates with Suspense/ErrorBoundary)
use(Context) — replaces useContext; can be called conditionally (unlike other hooks)
Unlike useEffect, use(promise) does not create a new Promise on each render; pass a stable promise
Use use(Context) when you need context conditionally or inside loops
import { use } from'react';
// Reading context conditionally (not possible with useContext)functionComponent({ show }: { show: boolean }) {
if (!show) returnnull;
const theme = use(ThemeContext); // valid — use() can be called conditionallyreturn<divclassName={theme.bg}>...</div>;
}
// Reading a promise (wrap in Suspense + ErrorBoundary)functionUserProfile({ userPromise }: { userPromise: Promise<User> }) {
const user = use(userPromise); // suspends until resolvedreturn<p>{user.name}</p>;
}
Other React 19 API Changes
ref is now a plain prop — no forwardRef wrapper needed (function Input({ ref }) { ... })
useFormStatus — read the pending/error state of the nearest parent <form> Action
Document Metadata API: render <title>, <meta>, <link> anywhere in the component tree; React hoists them to <head>
startTransition supports async functions (Transitions) in React 19
useDeferredValue now accepts an initialValue parameter for SSR hydration
useId stable for server components; use for accessibility IDs (label htmlFor / aria-labelledby)
React Server Components (RSC)
RSC is an architectural boundary, not an optimization toggle. Understand the split before placing components.
Component Classification Rules
Server Component (default in Next.js App Router): no useState, no useEffect, no event handlers, no browser APIs — renders on server only, zero client JS shipped
Mark a component 'use client' at the top of the file; all imports below that boundary are also client-side
Data Fetching Patterns
Fetch data directly in Server Components using async/await — no useEffect, no loading state boilerplate
Co-locate data fetching with the component that needs it (avoid prop drilling fetched data)
Use Suspense boundaries to stream Server Component output progressively
// Server Component — fetch directly, no useEffectasyncfunctionUserCard({ userId }: { userId: string }) {
const user = await db.users.findById(userId); // direct DB / API callreturn<div>{user.name}</div>;
}
// Client Component — interactive leaf
('use client');
functionLikeButton({ postId }: { postId: string }) {
const [liked, setLiked] = useState(false);
return<buttononClick={() => setLiked(l => !l)}>{liked ? 'Unlike' : 'Like'}</button>;
}
Composition Boundary Rules
Server Components can render Client Components
Client Components cannot import Server Components directly — pass Server Components as children props instead
Keep Client Components as small leaf nodes; push data fetching up into Server Components
// WRONG: importing a Server Component inside a Client Component'use client'import { ServerComp } from'./ServerComp'// breaks — ServerComp would be bundled client-side// CORRECT: pass as children prop'use client'functionClientShell({ children }: { children: React.ReactNode }) {
return<divonClick={...}>{children}</div>
}
// In a Server Component parent:
<ClientShell><ServerComp /></ClientShell>
Caching and Revalidation (Next.js App Router)
Use revalidatePath / revalidateTag in Server Actions to bust cache after mutations
Use cache() from React to deduplicate fetches within a single render pass
Avoid over-caching: fetch with { cache: 'no-store' } for user-specific or real-time data
When NOT to Use RSC
Highly interactive components (modals, drag-and-drop, real-time) — use Client Components
Components relying on Web APIs (localStorage, geolocation, canvas) — use Client Components
When RSC adds complexity without bundle savings — do not force the pattern
Radix UI & Shadcn
Implement Radix UI components according to documentation
Follow accessibility guidelines for all components
Use Shadcn UI conventions for styling
Compose primitives for complex components
Forms
Prefer React 19 Actions (action prop on <form>) over manual onSubmit + useState loading boilerplate
Use useActionState to track pending, error, and result state from form Actions
Use useFormStatus inside child components to read the enclosing form's pending state
Use useOptimistic for instant feedback during async submissions
Fall back to controlled components (value + onChange) when fine-grained validation or character-level feedback is required
Use form libraries (React Hook Form, Zod) for complex multi-step forms with schema validation
Implement proper accessibility: associate labels with htmlFor, use aria-describedby for error messages, manage focus on error
Error Handling
Implement Error Boundaries
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Testing
Write unit tests for components
Implement integration tests for complex flows
Use React Testing Library
Test user interactions
Test error scenarios
Accessibility
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Test with screen readers
Handle focus management
Provide proper alt text for images
Templates
Validation
Iron Laws
ALWAYS use functional components with hooks — class components are legacy code and incompatible with React Compiler, Server Components, and future concurrent features.
NEVER violate the Rules of Hooks — hooks must always be called at the top level of a component, never inside conditions, loops, or nested functions.
ALWAYS push state down to the lowest component that needs it — lifting state unnecessarily causes excessive re-renders and couples unrelated components.
NEVER perform side effects directly in component render — use useEffect for post-render effects or Server Components for async data fetching.
ALWAYS keep Client Components as small leaf nodes — the more code in 'use client' components, the more JavaScript shipped to the browser.
Anti-Patterns
Anti-Pattern
Why It Fails
Correct Approach
Using class components in new code
Incompatible with React Compiler, Server Components, and concurrent features
Always use functional components with hooks
Calling hooks conditionally or in loops
Violates Rules of Hooks; React depends on call order stability across renders
Always call hooks at the top level; use conditions inside the hook body
Manual useMemo/useCallback everywhere
Premature optimization; adds noise and complexity without measurable benefit
Profile first; use React Compiler; only memoize when DevTools shows real re-render cost
Fetching data in useEffect
Causes request waterfalls, loading flicker, and race conditions
Use Server Components for async fetch; React Query for client-side caching
Marking large components as 'use client'
Bundles entire component tree including server data into client JS
Push 'use client' to small interactive leaf components; keep data components as Server
Memory Protocol (MANDATORY)
Before starting:
cat .claude/context/memory/learnings.md
After completing: Record any new patterns or exceptions discovered.
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.
