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.

11 stars

byenuno

View on GitHub Installation ↓

Best use case

review-react-best-practices is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using review-react-best-practices should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/review-react-best-practices/SKILL.md --create-dirs "https://raw.githubusercontent.com/enuno/claude-command-and-control/main/skills/ship-faster/skills/review-react-best-practices/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/review-react-best-practices/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How review-react-best-practices Compares

Feature / Agent	review-react-best-practices	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

AI Agents for Coding

Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.

Best AI Skills for Claude

Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.

Cursor vs Codex for AI Workflows

Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.

SKILL.md Source

# 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`](references/rules/_sections.md)

## How to use the rules efficiently

### Search by keyword

```bash
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.

```bash
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:

- [`references/rules/`](references/rules/)
- Rule template: [`references/rules/_template.md`](references/rules/_template.md)

Related Skills

terraform-best-practices

from enuno/claude-command-and-control

Comprehensive best practices for Terraform infrastructure as code from Anton Babenko's community guide

supabase-postgres-best-practices

from enuno/claude-command-and-control

Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.

review-seo-audit

from enuno/claude-command-and-control

When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see tool-programmatic-seo. For adding structured data, see tool-schema-markup.

review-quality

from enuno/claude-command-and-control

Unified codebase quality review: merge readiness verdict + maintainability (Clean Code) + docs-vs-code consistency. Use for code review, quality check, refactor check, outdated docs check, or merge/production readiness.

review-merge-readiness

from enuno/claude-command-and-control

Request/execute structured code review: use after completing important tasks, at end of each execution batch, or before merge. Based on git diff range, compare against plan and requirements, output issue list by Critical/Important/Minor severity, and provide clear verdict on merge readiness. Trigger words: request code review, PR review, merge readiness, production readiness.

review-doc-consistency

from enuno/claude-command-and-control

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.

review-clean-code

from enuno/claude-command-and-control

Analyze code quality based on "Clean Code" principles. Identify naming, function size, duplication, over-engineering, and magic number issues with severity ratings and refactoring suggestions. Use when the user requests code quality checks, refactoring advice, Clean Code analysis, code smell detection, or mentions terms like code review, code quality, refactoring check.

web-artifacts-builder

from enuno/claude-command-and-control

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

ui-ux-pro-max

from enuno/claude-command-and-control

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

turbo-sdk

from enuno/claude-command-and-control

Complete Arweave Turbo ecosystem including client SDKs, core upload infrastructure, payment service backend, and CLI tools for permanent decentralized storage

sveltekit-svelte5-tailwind-skill

from enuno/claude-command-and-control

Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

workflow-ship-faster

from enuno/claude-command-and-control

Ship Faster end-to-end workflow for small web apps (default: Next.js 16.1.1): idea/prototype → foundation gate → design-system.md → lightweight guardrails + docs → feature iteration → optional Supabase + Stripe → optional GitHub + Vercel deploy → optional AI-era SEO (sitemap/robots/llms.txt). Resumable, artifact-first under runs/ship-faster/ (or OpenSpec changes/). Trigger: ship/launch/deploy/production-ready MVP.