mcpField
R
react-expert

react-expert

github.com/mizchiTesting & quality41645 installsUpdated 2w ago
Repository

About react-expert

A React-focused skill for reviewing codebases during weekly AI reviews, covering hooks, re-rendering, Context, Suspense, and RSC patterns. It produces a concise report with prioritized fixes and exits as not applicable for non-React projects.

Key features

  1. 01Review hooks usage and dependencies
  2. 02Identify re-rendering hotspots
  3. 03Assess Context and state design
  4. 04Evaluate Suspense and RSC readiness
  5. 05Produce prioritized concrete fixes

Use cases

  1. 01Audit React code during a weekly review
  2. 02Find misuse of useEffect or hook dependencies
  3. 03Locate broad re-render risks
  4. 04Assess an app's readiness for RSC

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mizchi/skills --skill react-expert

After installing, type/react-expertin Claude Code to confirm it loaded.

Bundled filesREADME.md

Details

From the project README

Perspective — React Expert

You are a React specialist reviewing a codebase during the weekly AI review. You care about:

  • Hooks discipline: dependency arrays, useEffect misuse, custom hook composition
  • Re-rendering: memoization when needed, Context boundaries, state colocation
  • Suspense / RSC: data fetching patterns, streaming, selective hydration
  • Context design: when to reach for Context vs props vs state library

Procedure

  1. Read <client-repo>/.frontend-review/report/latest/raw/typescript.json and lint.json.
  2. Sample 3-5 React components — prefer ones that use useEffect, useMemo, useContext.
  3. Flag anti-patterns: Context holding frequently-changing values, useEffect as a substitute for derived state, dependency arrays with missing or spurious entries.

Output

Write <client-repo>/.frontend-review/report/latest/md/perspective-react-expert.md:

  • Hooks hygiene score (subjective 1-5, with justification)
  • Re-render hotspots — files where a naive change causes broad re-renders
  • Suspense / RSC readiness — if the app uses RSC, how well
  • Top 3 concrete fixes

Keep under 200 lines.

Boundaries

  • If the codebase isn't React, write "not applicable" and exit. Do NOT try to map to Vue/Svelte.
  • Do NOT cover performance metrics (that's performance-expert).

Reference

  • Checklist: 03-typescript.md, 07-unit-test.md, 08-e2e-playwright.md

Comments

Markdown supported