1. Habit
  2. Skills
  3. React Code Review skill
giuseppe-trisciuoglio · 4K installs

React Code Review skill
Runs by itself, React files change.

React changes reviewed before merge.

Install the React Code Review skill and make it a habit: follow https://gethabit.dev/skills/giuseppe-trisciuoglio/react-code-review.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

4K installs359 starsMIT licenceSource on GitHub ↗

React Code Review

by giuseppe-trisciuoglio · 4K installs

The skill

React code review checks React components, hooks, React 19 patterns, state management, performance, accessibility and TypeScript props, producing severity-ranked findings with code examples.

Only when you ask.

The habit

React changes reviewed before merge.

↻ Runs by itselfReact files change

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

React files change. Runs in GitHub Actions or Claude Code routine.

  • ↻ React files change
  • pull_request paths: **/*.tsx, **/*.jsx

02

It checks its work

review report structure. If a check fails, it tells you.

  • ✓every useEffect, useMemo and useCallback has a correct dependency array
  • ✓no component prop is typed as any
  • ✓the report groups findings by severity with code examples
  • ✓the count of critical issues is zero

03

It remembers

component review log. The next run reads it first: open warnings and the project's React version.

loops/react-component-review-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed components of one pull request.

  1. 01

    Identify scope

    Find the changed components and hooks with glob and grep.

  2. 02

    Check architecture

    Flag components over 200 lines, more than 7 props or mixed concerns.

  3. 03

    Check hooks and state

    Check dependency arrays, cleanup functions and server state using TanStack Query instead of useEffect plus useState.

  4. 04

    Check accessibility

    Check semantic HTML, ARIA, keyboard access and labelled inputs.

  5. 05

    Check performance and types

    Flag needless re-renders, missing memo where measured, and any typed props.

  6. 06

    Write the report

    Group findings as critical, warning and suggestion with code examples and positives.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the React Code Review skill helps.

Use it when

  • ✓ You review React components
  • ✓ You check hook dependency arrays
  • ✓ You validate component architecture

Skip it when

  • – You do not use React
  • – You want a backend review

Questions

React Code Review skill, answered.

Does it push React 19 features on old projects?

No. The skill says to respect the project's React version.

Does it always recommend memoization?

No. Only when the re-render cost is measurable.

How do I install the React Code Review skill?

Copy the prompt at the top into your agent. It installs the skill from giuseppe-trisciuoglio/developer-kit and sets up the habit. Or run npx skills add giuseppe-trisciuoglio/developer-kit --skill react-code-review.

Is the React Code Review skill free?

Yes. It is published under MIT. Habit is free too.

React Code Review. Now as a habit.

Install the React Code Review skill and make it a habit: follow https://gethabit.dev/skills/giuseppe-trisciuoglio/react-code-review.md

  • Free
  • No account
  • Undo in one line

All giuseppe-trisciuoglio skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by giuseppe-trisciuoglio, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.