---
name: react-and-nextjs-patterns-review
description: "Reviews a React or Next.js codebase for component structure, state placement, data fetching, form handling, and accessibility, with fixes ranked by user impact. Use when React or Next.js components need a review of state placement, data fetching, form behaviour, and accessibility. Do not use for visual design direction or migrating between major framework versions. Related topics: coding, design."
---

# React and Next.js Patterns Review

Reviews a React or Next.js codebase for component structure, state placement, data fetching, form handling, and accessibility, with fixes ranked by user impact.

## When to use

Use this skill when React or Next.js components need a review of state placement, data fetching, form behaviour, and accessibility. Do not use it for visual design direction or migrating between major framework versions.

## Workflow

1. Ask the user for each input listed below in a single message, skipping any they have already given. Where options are listed, offer them, but accept other answers too.
2. Read the components and map where state lives, where data is fetched, and which parts are client or server rendered.
3. Flag state that could be derived or moved closer to its use, and effects that only mirror props.
4. Check loading, error, and empty states for every fetch, and that forms keep input and show errors against the right field.
5. Test accessibility basics: semantic elements, keyboard reach, focus order, visible focus, and labels.
6. Write findings ordered by user impact with corrected snippets, then name the one structural change worth planning.

## Inputs

- **The code** (longer free text)
- **Framework** (choose one: React with Vite, Next.js App Router, Next.js Pages Router, Remix)
- **What the screen does** (free text, e.g. "Short description of the feature")
- **Focus** (choose any: Component design, State, Data fetching, Forms, Accessibility, Performance, Server and client split)
- **Data library** (free text, e.g. "React Query or none")

## Output

A findings list ordered by user impact, each with file, consequence, and corrected snippet, then a closing paragraph on the main structural change.

## Prompt template

Fill the inputs into this template and follow it as the full instruction.

### React and Next.js Patterns Review

Review these components and tell me what to change first.

- The code: {{The code}}
- Framework: {{Framework}}
- What the screen does: {{What the screen does}}
- Focus: {{Focus}}
- Data library: {{Data library}}

Look at state first: keep it as close to where it is used as possible, derive values instead of storing them, and flag effects that only copy props into state. For data fetching, check loading and error states exist, requests are not duplicated, and server components fetch on the server when the framework allows it. Mark a client boundary only where interactivity needs it. For forms, check labels, validation messages tied to fields, disabled states during submit, and that a failed submit keeps what the person typed. For accessibility, check semantic elements before ARIA, keyboard reach and focus order, visible focus, and alt text.

Report each finding with the file, the user-facing consequence, and a corrected snippet. Order by impact on users, and end with one paragraph on the biggest structural change worth planning.

## Pitfalls

- Adding a global store for state that only two nearby components use.
- Marking whole pages as client components to fix one hook error, which ships far more JavaScript than needed.
- Adding ARIA roles to a div when a native button or label would give keyboard and screen reader support for free.