React Best Practices
Apply Vercel’s prioritized React and Next.js performance rules when writing components, fetching data, or refactoring slow UI.
Overview
react-best-practices is an agent skill most often used in Build (also Ship testing/review and perf) that applies Vercel’s 45-rule React and Next.js performance playbook to writing and reviewing UI code.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill react-best-practicesWhat is this skill?
- 45 performance rules across 8 prioritized categories
- CRITICAL focus on eliminating async waterfalls and bundle size
- Prefixes async-, bundle-, server-, client-, rerender-, rendering-, js-, advanced- for targeted refactors
- Explicit When to Use for new pages, data fetching, and performance reviews
- 45 rules across 8 categories
- 8 rule categories prioritized by impact
Adoption & trust: 593 installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React or Next.js app feels slow or ships bloated bundles, but you lack a prioritized rule set for what to fix first.
Who is it for?
Indie builders on Next.js or React who want structured performance guidance during implementation and pre-launch review.
Skip if: Non-React stacks, or teams that only need accessibility or security audits without UI performance scope.
When should I use this skill?
Writing new React components or Next.js pages, implementing client or server data fetching, reviewing code for performance issues, refactoring, or optimizing bundle size and load times.
What do I get? / Deliverables
Your agent refactors or generates code aligned to high-impact Vercel rules—starting with waterfalls and bundle size—before lower-priority micro-optimizations.
- Performance-aligned component and page implementations
- Refactor recommendations mapped to rule prefixes
- Review notes prioritized by CRITICAL vs LOW impact categories
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
New UI and data-fetching work happens in Build; the skill’s primary shelf is frontend implementation before you optimize at ship time. Rules target components, bundles, and rendering—canonical placement is frontend, not generic PM or docs.
Where it fits
Implement a new dashboard page with parallel data fetching instead of serial await chains.
Split heavy client bundles when adding a new charting dependency to a marketing site.
Run an agent pass tagged async- and bundle- rules before merging a large feature branch.
Target server- and client- rules after Lighthouse shows slow TTFB or excessive client fetch.
How it compares
Use as a prioritized rule catalog for React/Next performance—not as a generic linter config or a deployment skill.
Common Questions / FAQ
Who is react-best-practices for?
Solo builders and small teams shipping React or Next.js who want Vercel-aligned performance conventions while coding or reviewing with an agent.
When should I use react-best-practices?
In Build when writing components or data fetching; in Ship when reviewing for waterfalls, bundle size, server/client fetch choices, re-renders, and load-time regressions.
Is react-best-practices safe to install?
Check the Security Audits panel on this Prism page; the skill is documentation-style guidance and does not execute code by itself.
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 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Use 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-cache-react` - Use React.cache() for per-request deduplication - `server-cache-lru` - Use LRU cache for cross-request caching - `server-serialization` - Minimize data passed to client components - `server-parallel-fetching` - Restructure components to parallelize fetches - `server-after-nonblocking` - Use after() for non-blocking operations ### 4. Client-Side Data Fetching (MEDIUM-HIGH) - `client-swr-dedup` - Use SWR for automatic request deduplication - `client-event-listeners` - Deduplicate global event listeners ### 5. Re-render Optimization (MEDIUM) - `rerender-defer-reads` - Don't subscribe to state only used in callbacks - `rerender-memo` - Extract expensive work into memoized components - `rerender-dependencies` - Use primitive dependencies in effects - `rerender-derived-state` - Subscribe to derived booleans, not raw values - `rerender-functional-setstate` - Use functional setState for stable callbacks - `rerender-lazy-state-init` - Pass function to useState for expensive values - `rerender-transitions` - Use startTransition for non-urgent updates ### 6. Rendering Performance (MEDIUM) - `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element - `rendering-content-visibility` - Use content-visibility for long lists - `rendering-hoist-jsx` - Extract static JSX outside components - `rendering-svg-precision` - Reduce SVG coordinate precision - `rendering-hydration-no-flicker` - Use inline script for client-only data - `rendering-activity` - Use Activity component for show/hide - `rendering-conditional-render` - Use ternary, not && for conditionals ### 7. JavaScript Performance (LOW-MEDIUM) - `js-batch-dom-css` - Group CSS changes via classes or cssText - `js-index-maps` - Build Map for repeated lookup