review-react-best-practices
Review or refactor React / Next.js code for performance and reliability using a prioritized rule library (waterfalls, bundle size, server/client data fetching, re-renders, rendering). Use when writing React components, Next.js pages (App Router), optimizing bundle size, improving performance, or doing a React/Next.js performance review.
- Installs
- 53
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/heyvhuang/ship-faster --skill review-react-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads review-react-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 rulesreferences/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)
- Start with CRITICAL rules first (waterfalls + bundle).
- Only then go to HIGH (server patterns + serialization).
- Then MEDIUM (re-render + rendering).
- 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:
- Summary (1 paragraph)
- Critical fixes (must-fix, biggest wins)
- High impact (should-fix)
- 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:
references/rules/- Rule template:
references/rules/_template.md
FAQ
What does the review-react-best-practices skill do?
Review or refactor React / Next.js code for performance and reliability using a prioritized rule library (waterfalls, bundle size, server/client data fetching, re-renders, rendering). Use when writing React components, Next.js pages (App Router), optimizing bundle size, improving performance, or doing a React/Next.js performance review.
How do I install review-react-best-practices?
Run npx skills add https://github.com/heyvhuang/ship-faster --skill review-react-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/review-react-best-practices/ (personal) or .claude/skills/review-react-best-practices/ (project).
Which AI agents can use review-react-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is review-react-best-practices safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains review-react-best-practices?
It is published by heyvhuang in heyvhuang/ship-faster. It has 53 recorded installs.
More from heyvhuang/ship-faster
mcp-stripe
heyvhuang/ship-faster
Stripe MCP transaction operations skill. Execute transaction operations via Stripe MCP server (https://mcp.stripe.com): customer management, products/prices, invoices, payment links, subscriptions, refunds, dispute handling, balance queries. Triggers: user requests Stripe operations including create customer, create product, create invoice, generate payment link, query transactions, process refunds, manage subscriptions, view disputes, check balance, etc.
mcp-supabase
heyvhuang/ship-faster
Execute database operations via Supabase MCP (query/write/migration/logs/type generation). Triggers: query/statistics/export/insert/update/delete/fix/backfill/migrate/logs/alerts/type generation. Does not trigger for: pure architecture discussion or code planning. Write operations require confirmation; UPDATE/DELETE without WHERE is refused.
review-doc-consistency
heyvhuang/ship-faster
Documentation consistency reviewer that checks alignment between code implementation and documentation. Use when user requests reviewing documentation vs code consistency, checking if README/docs are outdated, verifying API documentation accuracy. Applicable for (1) reviewing README vs implementation consistency (2) checking if docs/ directory content is outdated (3) verifying API/config documentation accuracy (4) generating documentation consistency reports. Trigger words include doc review, documentation consistency, check outdated docs, verify docs.
tool-ast-grep-rules
heyvhuang/ship-faster
Write AST-based code search and rewrite rules using ast-grep YAML. Create linting rules, code modernizations, and API migrations with auto-fix. Use when the user mentions ast-grep, tree-sitter patterns, code search rules, lint rules with YAML, AST matching, or code refactoring patterns.
tool-openclaw
heyvhuang/ship-faster
Help users install, configure, operate, and migrate OpenClaw (gateway, channels, nodes, plugins, model/auth setup). Use when answering OpenClaw setup/debug questions or model migration questions; use the local docs snapshot bundled with this skill as the source of truth. Triggers: openclaw, clawdbot, clawd, clawdhub, gateway, onboard, channels login, whatsapp, telegram, discord, mattermost, pairing, nodes, sandboxing, tailscale, provider migration, Claude to GPT, model swap.
tool-ui-ux-pro-max
heyvhuang/ship-faster
Use when you need concrete UI/UX inputs (palette, typography, landing patterns, UX/a11y constraints) to drive design or review. Searchable UI/UX design intelligence (styles, palettes, typography, landing patterns, charts, UX/a11y guidelines + stack best practices) backed by CSV + a Python search script. Triggers: UIUX/uiux, UI/UX, UX design, UI design, design system, design spec, color palette, typography, layout, animation, accessibility/a11y, component styling. Actions: search, recommend, review, improve UI.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.