/devkit.react.code-review

allowed-tools: Read, Write, Bash, Edit, Grep, Glob
argument-hint: "[review-type] [file/directory-path] [options]"
description: Provides comprehensive React 19 + Tailwind CSS code review focusing on modern patterns, hooks, Server Components, Actions, performance, accessibility, and Tailwind best practices. Use when reviewing React code changes or before merging pull requests.
model: inherit

React 19 + Tailwind CSS Code Review

Overview

Provides comprehensive React 19 + Tailwind CSS code review focusing on modern patterns, hooks, Server Components, Actions, performance, accessibility, and Tailwind best practices. Use when reviewing React code changes or before merging pull requests.

Usage

/devkit.react.code-review $ARGUMENTS

Arguments

| Argument | Description | |--------------|------------------------------------------| | `$ARGUMENTS` | Combined arguments passed to the command |

Current Context

• **Current Git Branch**: !`git branch --show-current`
• **Git Status**: !`git status --porcelain`
• **Recent Commits**: !`git log --oneline -5`
• **Modified Files**: !`git diff --name-only HEAD~1`
• **React Version**: !

`[ -f package.json ] && grep -o '"react":\s*"[^"]*"' package.json 2>/dev/null || echo "Not detected"`

• **Tailwind Version**: !

`[ -f package.json ] && grep -o '"tailwindcss":\s*"[^"]*"' package.json 2>/dev/null || echo "Not detected"`

Execution Instructions

**Agent Selection**: To execute this code review, use the following agent with fallback:

• Primary: `developer-kit-typescript:typescript-software-architect-review`
• Fallback: `developer-kit:general-code-reviewer`

**Run context**:

• Provide `$1` as `full`, `components`, `hooks`, `performance`, `accessibility`, `styling`, `forms`, or `testing`
• Optional: specify file or directory path as `$2`

Review Configuration

The review will analyze: **$ARGUMENTS**

**Available review types:**

• `full` - Complete 360° review (default)
• `components` - Focus on component architecture and patterns
• `hooks` - React hooks usage and custom hooks
• `performance` - Rendering, memoization, bundle size
• `accessibility` - A11y compliance and ARIA
• `styling` - Tailwind CSS patterns and design system
• `forms` - Form handling with Actions and validation
• `testing` - Test coverage and strategies

Phase 1: Identify Review Scope

1.1 Detect Scope

IF "$1" IS PROVIDED THEN Analyze specific file or component: $ARGUMENTS ELSE Analyze modified and affected components in the project ENDIF

1.2 Project Configuration

• **Framework**: Next.js, Vite, Create React App, Remix
• **TypeScript**: tsconfig.json strictness level
• **Tailwind Config**: tailwind.config.js/ts customizations
• **Build Tool**: Vite, Webpack, Turbopack
• **State Management**: React Context, Zustand, Redux, Jotai

Phase 2: React 19 Best Practices

2.1 New React 19 Features

Server Components & Actions

• Verify proper use of `"use server"` directive for Server Actions
• Check `"use client"` boundaries are minimal and intentional
• Validate Server Components don't import client-only code
• Ensure Actions return proper response structures

useActionState Hook

// ✅ Correct: useActionState for form submissions
const [state, formAction, isPending] = useActionState(submitAction, initialState);

// ❌ Avoid: Manual state management for forms
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

use() Hook for Async Data

// ✅ Correct: use() with Suspense for data fetching
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}

// ❌ Avoid: useEffect for data fetching when use() is appropriate
useEffect(() => { fetchData().then(setData); }, []);

useFormStatus Hook

// ✅ Correct: useFormStatus for submit button state
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
}

useOptimistic Hook

// ✅ Correct: Optimistic updates for better UX
const [optimisticItems, addOptimisticItem] = useOptimistic(
  items,
  (state, newItem) => [...state, { ...newItem, pending: true }]
);

2.2 Refs as Props (React 19)

// ✅ React 19: ref is a regular prop
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// ❌ Deprecated: forwardRef wrapper (still works but unnecessary)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

2.3 Document Metadata

// ✅ React 19: Native metadata support
function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <h1>{post.title}</h1>
    </article>
  );
}

Phase 3: Component Architecture

3.1 Component Structure

• Single responsibility principle per component
• Prefer composition over prop drilling
• Use compound components for complex UI patterns
• Keep components under 200 lines, extract sub-components

3.2 Props Design

// ✅ Correct: Discriminated unions for variant props
type ButtonProps = 
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

// ✅ Correct: Spread remaining props
function Button({ variant, children, ...props }: ButtonProps) {
  return <button className={variants[variant]} {...props}>{children}</button>;
}

// ❌ Avoid: Boolean prop explosion
<Button isPrimary isLarge isDisabled isLoading />

3.3 Children Patterns

// ✅ Correct: Render props for flexibility
<DataProvider render={(data) => <List items={data} />} />

// ✅ Correct: Compound components
<Select>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>

Phase 4: Hooks Best Practices

4.1 Built-in Hooks Review

• **useState**: Avoid r