agentsclimarketplace
Sign in

React best practices skills vercel labs react best practices

Skill bg-szy/TOP-SKILLS/skills/marketplace/react-best-practices__skills-vercel-labs-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.From its SKILL.md

Install
npx -y skills add bg-szy/TOP-SKILLS --skill react-best-practices__skills-vercel-labs-react-best-practices

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.5 KB, 723 tokens by cl100k_base, as published. Nobody here has run it

React Best Practices

Overview

Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are 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

Priority-Ordered Guidelines

Rules are prioritized by impact:

PriorityCategoryImpact
1Eliminating WaterfallsCRITICAL
2Bundle Size OptimizationCRITICAL
3Server-Side PerformanceHIGH
4Client-Side Data FetchingMEDIUM-HIGH
5Re-render OptimizationMEDIUM
6Rendering PerformanceMEDIUM
7JavaScript PerformanceLOW-MEDIUM
8Advanced PatternsLOW

Quick Reference

Critical Patterns (Apply First)

Eliminate Waterfalls:

  • Defer await until needed (move into branches)
  • Use Promise.all() for independent async operations
  • Start promises early, await late
  • Use better-all for partial dependencies
  • Use Suspense boundaries to stream content

Reduce Bundle Size:

  • Avoid barrel file imports (import directly from source)
  • Use next/dynamic for heavy components
  • Defer non-critical third-party libraries
  • Preload based on user intent

High-Impact Server Patterns

  • Use React.cache() for per-request deduplication
  • Use LRU cache for cross-request caching
  • Minimize serialization at RSC boundaries
  • Parallelize data fetching with component composition

Medium-Impact Client Patterns

  • Use SWR for automatic request deduplication
  • Defer state reads to usage point
  • Use lazy state initialization for expensive values
  • Use derived state subscriptions
  • Apply startTransition for non-urgent updates

Rendering Patterns

  • Animate SVG wrappers, not SVG elements directly
  • Use content-visibility: auto for long lists
  • Prevent hydration mismatch with inline scripts
  • Use explicit conditional rendering (? : not &&)

JavaScript Patterns

  • Batch DOM CSS changes via classes
  • Build index maps for repeated lookups
  • Cache repeated function calls
  • Use toSorted() instead of sort() for immutability
  • Early length check for array comparisons

References

Full documentation with code examples is available in:

  • references/react-performance-guidelines.md - Complete guide with all patterns
  • references/rules/ - Individual rule files organized by category

To look up a specific pattern, grep the rules directory:

grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/

Rule Categories in references/rules/

  • async-* - Waterfall elimination patterns
  • bundle-* - Bundle size optimization
  • server-* - Server-side performance
  • client-* - Client-side data fetching
  • rerender-* - Re-render optimization
  • rendering-* - DOM rendering performance
  • js-* - JavaScript micro-optimizations
  • advanced-* - Advanced patterns

What ships with it: 1 file

94.7 KB alongside SKILL.md

Gives 2 of the 12 instructions most performance cost skills give in 723 tokens

Counted across 797 of the 1,117 authors here whose files we hold, read 2026-09-06

  • Check for product marketing context firstin 46 of 797, across 20 files
  • Measure before optimizingin 31 of 797, across 25 files
  • Profile first to identify the actual bottleneckin 23 of 797, across 22 files
  • Verify your robots.txt allows AI crawlersin 21 of 797, across 12 files
  • Import directly and avoid barrel fileshere, and in 19 of 797, across 15 files
  • Spawn all runs in the same turnin 18 of 797, across 11 files
  • Write a draft of the skillin 17 of 797, across 10 files
  • Understand the user's intentin 17 of 797, across 10 files
  • Use React.cache for per-request deduplicationhere, and in 16 of 797, across 11 files
  • Profile before optimizingin 16 of 797, across 14 files
  • Include specific numbers with sourcesin 15 of 797, across 8 files
  • Add lazy loading to below-fold imagesin 15 of 797, across 10 files

Said here and by no other author read

  • Defer await until needed
  • Batch DOM CSS changes via classes

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.