React and Next.js Patterns Review skill for Claude and Codex

React and Next.js Patterns Review as an AI skill. It asks for The code, Framework, What the screen does and 2 more, then does the rest. Free to install in…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

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.

What it will ask you for

• 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")

How it works

1. Read the components and map where state lives, where data is fetched, and which parts are client or server rendered.
2. Flag state that could be derived or moved closer to its use, and effects that only mirror props.
3. Check loading, error, and empty states for every fetch, and that forms keep input and show errors against the right field.
4. Test accessibility basics: semantic elements, keyboard reach, focus order, visible focus, and labels.
5. Write findings ordered by user impact with corrected snippets, then name the one structural change worth planning.

What you get

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

What it watches out for

• 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.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.