react-code-review

Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".

317stars37forksUpdated 8/4/2026

Web Development Code Review #frontend #react #hooks #accessibility #code-review #typescript

Security Assessment

Safe(95/100)

Security Score95/100

About react-code-review

react-code-review delivers structured, comprehensive code review for React applications, evaluated against React 19 best practices. It solves the problem of inconsistent, ad-hoc React reviews by giving an agent a repeatable rubric that spans component architecture, hooks usage, state management, performance, accessibility, and TypeScript integration, producing findings categorized by severity (Critical, Warning, Suggestion) with concrete code examples. It can delegate to a react-software-architect-review agent for deeper architectural analysis.

The workflow identifies scope via glob/grep over .tsx/.jsx files, then analyzes component composition (single responsibility, size and prop-count thresholds), hook correctness (dependency arrays, cleanup functions, memoization), state management (colocation, Context vs external stores, server state via TanStack Query/SWR rather than manual useEffect+useState), accessibility (semantic HTML, ARIA, keyboard navigation, focus management, WCAG contrast), performance (unnecessary re-renders, React.memo, code splitting), and TypeScript typing of props, events, and generics. Reference files provide detailed guidance on accessibility (ARIA patterns, focus traps, live regions, forms), hooks patterns, and component architecture with worked good/bad examples, including React 19 features like use, useOptimistic, useFormStatus, and Actions.

It targets React/TypeScript frontend developers and teams reviewing components, hooks, and pages before merging, validating composition and reusability, or auditing accessibility compliance. The allowed tools are read-oriented (Read, Edit, Grep, Glob, Bash), and the skill functions as an analysis-and-reporting aid rather than an automated code mutator.

FAQ

What areas does the review evaluate?

Component architecture and composition, hook usage and dependency arrays, state management approach, accessibility (WCAG/ARIA/semantic HTML), performance optimization, and TypeScript typing — with findings classified as Critical, Warning, or Suggestion.

Does it cover React 19 features?

Yes. It reviews React 19 patterns including the use hook, useOptimistic, useFormStatus, and Actions.

What does it recommend for server state?

It flags manual useEffect + useState fetching and recommends server-state libraries such as TanStack Query or SWR instead.

How thorough is the accessibility guidance?

The accessibility reference covers semantic HTML choices, buttons vs links, keyboard navigation, modal focus traps, skip links, ARIA live regions, expandable sections, tabs, form label association, error messaging, and color-contrast ratios.

When should I trigger it?

On phrases like 'review React code', 'React code review', or 'check my React components', and contexts such as before merging PRs, after new features, or when validating component architecture.