React Best Practices
Run a condensed React/TSX quality pass on recently edited components covering structure, hooks, a11y, performance, and TypeScript patterns.
Overview
React Best Practices is an agent skill most often used in Ship (also Build for frontend) that reviews TSX components with a condensed React quality checklist after multi-file edits.
Install
npx skills add https://github.com/vercel/vercel-plugin --skill react-best-practicesWhat is this skill?
- Auto-triggers after editing multiple TSX components per pathPatterns (src/app/components, ui folders)
- Covers component structure, hooks usage, accessibility, performance, and TypeScript patterns
- Warns on legacy CSS-in-JS/MUI/Chakra with optional upgrade hint toward shadcn/ui + Tailwind
- Retrieval aliases: react review, component quality, tsx linter
- Docs anchored to react.dev reference and learn guides
- pathPatterns cover 8 TSX/JSX glob families in metadata
- validate rule suggests shadcn upgrade when legacy CSS-in-JS imports detected
Adoption & trust: 528 installs on skills.sh; 186 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You changed several React components and need a consistent pass for hooks, a11y, and performance without rereading all of react.dev.
Who is it for?
Indie Next.js/React coders on Vercel who batch UI work and want agent-triggered review on TSX trees.
Skip if: Non-React stacks, one-off config files, or teams that require formal SOC2-grade security scanning from this skill alone.
When should I use this skill?
After editing multiple TSX components matching src/app/components or components/** path patterns.
What do I get? / Deliverables
You get prioritized review notes aligned to modern React patterns and optional stack warnings before you open a PR or deploy.
- Condensed review findings for structure, hooks, a11y, performance, and TS patterns
- Optional migration warnings for legacy UI libraries
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Ship/Review because metadata triggers after editing multiple TSX files and behaves as a reviewer, not a greenfield scaffold generator. Review matches the condensed checklist intent and path patterns under `components/**/*.tsx` and App Router UI trees.
Where it fits
After refactoring shared UI primitives under `components/`.
Pre-PR pass on hooks rules and accessibility on new forms.
Catch obvious render and memo issues called out in the condensed checklist.
How it compares
Agent-side TSX reviewer skill—not an MCP server and not a full CI test suite.
Common Questions / FAQ
Who is react-best-practices for?
Solo and small teams editing React or Next.js TSX under standard component paths who use Vercel’s plugin skill triggers.
When should I use react-best-practices?
In Build after finishing a UI slice; in Ship before review or launch when multiple `*.tsx` files changed and you want hooks, a11y, and performance called out.
Is react-best-practices safe to install?
Review the Security Audits panel on this Prism page; the skill reads and critiques code patterns and does not by itself assert third-party audit pass/fail.
SKILL.md
READMESKILL.md - React Best Practices
# Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 64 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Refactoring existing React/Next.js code - Optimizing bundle size or load times ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-defer-await` - Move await into branches where actually used - `async-parallel` - Use Promise.all() for independent operations - `async-dependencies` - Use better-all for partial dependencies - `async-api-routes` - Start promises early, await late in API routes - `async-suspense-boundaries` - Use Suspense to stream content ### 2. Bundle Size Optimization (CRITICAL) - `bundle-barrel-imports` - Import directly, avoid barrel files - `bundle-dynamic-imports` - Use next/dynamic for heavy components - `bundle-defer-third-party` - Load analytics/logging after hydration - `bundle-conditional` - Load modules only when feature is activated - `bundle-preload` - Preload on hover/focus for perceived speed ### 3. Server-Side Performance (HIGH) - `server-auth-actions` - Authenticate server actions like API routes - `server-cache-react` - Use React.cache() for per-request deduplication - `server-cache-lru` - Use LRU cache for cross-request caching - `server-dedup-props` - Avoid duplicate serialization in RSC props - `server-hoist-static-io` - Hoist static I/O (fonts, lo