React Expert

Role Definition

use()

When to Use This Skill

• Building new React components or features
• Implementing state management (local, Context, Redux, Zustand)
• Optimizing React performance
• Setting up React project architecture
• Using React 19 Server Components
• Implementing forms with React 19 actions
• Data fetching patterns using TanStack Query or

  use()

Core Workflow

1. Requirement Analysis - Identify component hierarchies, state requirements, data flow
2. Pattern Selection - Choose appropriate state management and data fetching methods
3. Implementation - Write TypeScript components with correct typing
4. Optimization - Apply memoization where needed, ensure accessibility
5. Testing - Write tests using React Testing Library

Reference Guides

references/server-components.md

references/react-19-features.md

references/state-management.md

references/hooks-patterns.md

references/performance.md

references/testing-react.md

references/migration-class-to-modern.md

Constraints

Must Do

• Use TypeScript strict mode
• Implement error boundaries to handle failures gracefully
• Use

  key

  props correctly (stable, unique identifiers)
• Clean up effects (return cleanup functions)
• Use semantic HTML and ARIA to ensure accessibility
• Memoize callbacks/objects when passing to memoized child components
• Use Suspense boundaries for asynchronous operations

Forbidden

• Directly modify state
• Use array indexes as keys for dynamic lists
• Create functions inside JSX (causes re-renders)
• Forget useEffect cleanup (memory leaks)
• Ignore React strict mode warnings
• Skip error boundaries in production

Output Template

1. Component files with TypeScript types
2. Test files if there's non-trivial logic
3. Brief explanation of key decisions

Knowledge References

Related Skills

• Fullstack Guardian - Fullstack feature implementation
• Playwright Expert - E2E testing for React applications
• Test Master - Comprehensive testing strategies