🇺🇸English
React Specialist
Purpose
Provides expert React development expertise specializing in React 18+, Next.js ecosystem, and modern React patterns. Builds performant, scalable React applications using hooks, concurrent features, state management solutions like Zustand, and data fetching with TanStack Query.
When to Use
- Building React applications with modern patterns (React 18+)
- Implementing Server Components and SSR with Next.js
- Managing state with Zustand, TanStack Query, or other solutions
- Optimizing React performance and rendering
- Creating reusable component libraries and hooks
- Working with TypeScript and comprehensive type safety
Quick Start
Invoke this skill when:
- Building React applications with modern patterns (React 18+)
- Implementing Server Components and SSR with Next.js
- Managing state with Zustand, TanStack Query, or other solutions
- Optimizing React performance and rendering
- Creating reusable component libraries and hooks
Do NOT invoke when:
- Need server-side only logic (use backend-developer instead)
- Simple static HTML/CSS pages (no React needed)
- Mobile-only development (use mobile-developer with React Native)
- Node.js API development without frontend (use backend-developer)
Core Capabilities
React 18+ Advanced Features
- Concurrent Rendering : Mastering Suspense, useTransition, and useDeferredValue
- Automatic Batching : Understanding and leveraging automatic batching improvements
- Server Components : Next.js App Router and React Server Components patterns
- Client Components : Strategic use of 'use client' directives and hydration strategies
- StartTransition : Optimizing UI updates with non-urgent state changes
- Streaming SSR : Implementing progressive rendering with React 18 streaming
Modern React Patterns
- Custom Hooks : Building reusable, composable hook logic
- Compound Components : Advanced component composition patterns
- Render Props : Advanced render prop patterns and function as child
- Higher-Order Components : Modern HOC patterns for cross-cutting concerns
- Context API : Efficient context usage with performance optimization
- Error Boundaries : Advanced error handling and recovery strategies
State Management Solutions
- Zustand : Lightweight state management with TypeScript integration
- TanStack Query : Server state management with caching, refetching, and optimistic updates
- Jotai : Atomic state management with granular reactivity
- Valtio : Proxy-based state management with reactive updates
- React Query : Data fetching, caching, and synchronization
- Local State : Strategic local state vs global state decisions
Decision Framework
Primary Decision Tree: State Management Selection
Start here: What type of state?
├─ Server state (API data)?
│ ├─ Use TanStack Query (React Query)
│ │ Pros: Caching, auto-refetching, optimistic updates
│ │ Cost: 13KB gzipped
│ │ Use when: Fetching data from APIs
│ │
│ └─ Or SWR (Vercel)
│ Pros: Lighter (4KB), similar features
│ Cons: Less feature-complete than React Query
│ Use when: Bundle size critical
│
├─ Client state (UI state)?
│ ├─ Simple (1-2 components) → useState/useReducer
│ │ Pros: Built-in, no dependencies
│ │ Cons: Prop drilling for deep trees
│ │
│ ├─ Global (app-wide) → Zustand
│ │ Pros: Simple API, 1KB, no boilerplate
│ │ Cons: No time-travel debugging
│ │ Use when: Simple global state needs
│ │
│ ├─ Complex (nested, computed) → Jotai or Valtio
│ │ Jotai: Atomic state (like Recoil but lighter)
│ │ Valtio: Proxy-based (mutable-looking API)
│ │
│ └─ Enterprise (DevTools, middleware) → Redux Toolkit
│ Pros: DevTools, middleware, established patterns
│ Cons: Verbose, 40KB+ with middleware
│ Use when: Need audit log, time-travel debugging
│
└─ Form state?
├─ Simple (<5 fields) → useState + validation
├─ Complex → React Hook Form
│ Pros: Performance (uncontrolled), 25KB
│ Cons: Learning curve
│
└─ With schema validation → React Hook Form + Zod
Full type safety + runtime validation
Performance Optimization Decision Matrix
| Issue | Symptom | Solution | Expected Improvement |
|---|
| Slow initial load | FCP >2s, LCP >2.5s | Code splitting (React.lazy) | 40-60% faster |
| Re-render storm | Component renders 10+ times/sec | React.memo, useMemo | 80%+ reduction |
| Large bundle | JS bundle >500KB | Tree shaking, dynamic imports | 30-50% smaller |
| Slow list rendering | List >1000 items laggy | react-window/react-virtualized | 90%+ faster |
| Expensive computation | CPU spikes on interaction | useMemo, web workers | 50-70% faster |
| Prop drilling | 5+ levels of props |
Component Pattern Selection
| Use Case | Pattern | Complexity | Flexibility | Example |
|---|
| Simple UI | Props + children | Low | Low | <Button>Click</Button> |
| Configuration | Props object | Low | Medium | <Button config={{...}} /> |
| Complex composition | Compound components | Medium | High | <Tabs><Tab /></Tabs> |
|
Red Flags → Escalate to Senior React Developer
STOP and escalate if:
- Need Server-Side Rendering (use Next.js, not plain React)
- Performance requirement <16ms render time (60 FPS animation)
- Considering custom virtual DOM implementation (almost always wrong)
- Component tree depth >20 levels (architecture issue)
- State synchronization across browser tabs required (complex patterns)
Best Practices
Component Design
- Single Responsibility : Each component should have one clear purpose
- Composition over Inheritance : Use composition for reusability
- Props Interface : Design clear, typed component APIs
- Accessibility : Implement WCAG compliance from the start
- Error Boundaries : Handle errors gracefully at component boundaries
State Management
- Colocate State : Keep state as close to where it's used as possible
- Separate Concerns : Distinguish between server and client state
- Optimistic Updates : Improve perceived performance with optimistic updates
- Caching Strategy : Implement intelligent caching for better UX
- State Normalization : Use normalized state for complex data structures
Performance Patterns
- Memoization : Use React.memo, useMemo, and useCallback strategically
- Code Splitting : Implement dynamic imports for large components
- Virtualization : Use react-window or react-virtualized for long lists
- Image Optimization : Implement lazy loading and responsive images
- Bundle Analysis : Regularly analyze and optimize bundle size
Testing Strategy
- Component Testing : Test components in isolation with React Testing Library
- Integration Testing : Test component interactions and data flow
- E2E Testing : Use Playwright or Cypress for user journey testing
- Visual Regression : Catch UI changes with tools like Chromatic
- Performance Testing : Monitor and test component performance
Integration Patterns
react-specialist ↔ typescript-pro
- Handoff : TypeScript types → React components with type-safe props
- Collaboration : Shared types for API data, component props
- Dependency : React benefits heavily from TypeScript
react-specialist ↔ nextjs-developer
- Handoff : React components → Next.js pages/layouts
- Collaboration : Server Components, Client Components distinction
- Tools : React for UI, Next.js for routing/SSR
react-specialist ↔ frontend-ui-ux-engineer
- Handoff : React handles logic → Frontend-UI-UX handles styling
- Collaboration : Component APIs, design system integration
- Shared responsibility : Accessibility, responsive design
Additional Resources
- Detailed Technical Reference : See REFERENCE.md
- Code Examples & Patterns: See EXAMPLES.md
Weekly Installs
75
Repository
404kidwiz/claud…e-skills
GitHub Stars
42
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode61
gemini-cli56
codex54
cursor53
claude-code50
github-copilot48
