mcpField
R
review-react-best-practices

review-react-best-practices

github.com/heyvhuangDevelopment33853 installsUpdated 30w ago
Repository

About review-react-best-practices

A performance review skill for React and Next.js development, refactoring, and code review. Its searchable, tagged rule library organizes findings by priority, from request waterfalls and bundle size to rendering concerns.

Key features

  1. 01Rules ordered by severity
  2. 02Coverage of waterfalls and bundle size
  3. 03Checks for server patterns and serialization
  4. 04Checks for rerenders and rendering
  5. 05Search rules by keyword or tag

Use cases

  1. 01Review React component performance
  2. 02Inspect Next.js data fetching and RSC boundaries
  3. 03Investigate bundle growth or cold starts
  4. 04Assess UI jank and unnecessary rerenders

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/heyvhuang/ship-faster --skill review-react-best-practices

After installing, type/review-react-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/rules/
_sections.md
_template.md
advanced-event-handler-refs.md
async-api-routes-no-waterfall.md
async-defer-await.md
async-parallel-promises.md
async-promise-all.md
async-suspense-streaming.md
bundle-avoid-barrel-imports.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload-intent.md
client-dedupe-event-listeners.md
client-dedupe-fetching.md
js-batch-dom-css.md
js-use-set-map-lookups.md
rendering-conditional-render.md
rendering-content-visibility.md
rendering-hoist-static-jsx.md
rerender-extract-memoized.md
rerender-lazy-state-init.md
rerender-narrow-deps.md
server-cache-cross-request.md
server-minimize-serialization.md
server-react-cache-dedupe.md

Details

From the project README

React Best Practices Review (Performance-First)

Use this skill to turn “React feels slow / Next.js page is heavy / too many requests” into a repeatable, prioritized review.

This skill is intentionally built like a rule library:

  • SKILL.md: how to review + how to search rules
  • references/rules/*: one rule per file (taggable, sortable, easy to evolve)

When to apply

Use when:

  • Building or refactoring React components
  • Working in Next.js (App Router) on RSC boundaries, Server Actions, data fetching
  • Reviewing PRs for performance regressions
  • Bundle size increases / slow HMR / cold start issues
  • UI jank / unnecessary re-renders / hydration issues

Review method (prioritized)

  1. Start with CRITICAL rules first (waterfalls + bundle).
  2. Only then go to HIGH (server patterns + serialization).
  3. Then MEDIUM (re-render + rendering).
  4. Then LOW-MEDIUM micro-optimizations (JS hot paths).

Section ordering lives in: references/rules/_sections.md

How to use the rules efficiently

Search by keyword
rg -n "waterfall|Promise\\.all|defer await" references/rules
rg -n "barrel|optimizePackageImports|dynamic" references/rules
rg -n "cache\\(|React\\.cache|serialization|RSC" references/rules
rg -n "memo\\(|useMemo|useCallback|dependencies" references/rules
Search by tag

Each rule has tags: in YAML frontmatter.

rg -n "tags:.*bundle" references/rules
rg -n "tags:.*rerender" references/rules

Output format (recommended)

When reviewing code, output:

  1. Summary (1 paragraph)
  2. Critical fixes (must-fix, biggest wins)
  3. High impact (should-fix)
  4. Medium / Low (nice-to-have)

For each issue include:

  • Rule name (and file under references/rules/)
  • Location (path:line)
  • Why it matters (latency / bundle / CPU / UX)
  • Minimal fix direction (prefer small diffs)

If running in a Ship Faster run directory, persist the report to:

  • run_dir/evidence/react-best-practices-review.md

Rule library

Rules live in:

Comments

Markdown supported