skills.rest
SmallRob
SmallRobCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Optimize React and Next.js codebases to eliminate performance bottlenecks.

Updated Dec 15, 2025
Search Tags:#code review#react#bundle size#performance optimization#nextjs#suspense streaming#rsc serialization
One-click install
npx skills add https://github.com/SmallRob/nice_today_android --skill vercel-react-best-practices-smallrob
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/SmallRob/nice_today_android/tree/main/.trae/skills/vercel-react-best-practices
Command: npx skills add https://github.com/SmallRob/nice_today_android --skill vercel-react-best-practices-smallrob

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It fixes common performance bottlenecks in React and Next.js apps—like waterfalls, oversized bundles, inefficient RSC/client boundaries, and wasteful re-renders—that slow down load time and user interactions.

Core Features & Use Cases

  • Eliminate server and client waterfalls: restructures async work (including API routes and Server Components) to run in parallel and stream earlier.
  • Reduce bundle size and cold starts: guides correct dynamic imports, conditional loading, and direct package imports to avoid heavy entry-point costs.
  • Optimize RSC serialization and rendering: minimizes payload at RSC boundaries, prevents hydration flicker/mismatches, and improves list and SVG rendering performance.
  • Tighten React state and effect behavior: improves re-render patterns using derived state, stable callbacks, transitions, and correct memoization practices.

Quick Start

Apply the vercel-react-best-practices skill to your code change by identifying the relevant rule names from the guide (for example bundle-barrel-imports, server-parallel-fetching, or client-swr-dedup) and using them to rewrite the affected React or Next.js section.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I eliminate server and client waterfalls in Next.js?▼

To eliminate server and client waterfalls, restructure async work in API routes and Server Components to run in parallel and stream earlier by applying the server-parallel-fetching rule.

What is the best way to reduce React bundle size and cold starts?▼

Reducing bundle size and cold starts requires correct dynamic imports, conditional loading, and direct package imports to avoid heavy entry-point costs, guided by the bundle-barrel-imports rule.

How do I fix hydration flicker and mismatches with React Server Components?▼

Fix RSC hydration flicker and mismatches by minimizing serialized payloads at React Server Component boundaries and optimizing list and SVG rendering performance.

Why does my React app have unnecessary re-renders and slow state updates?▼

Unnecessary React re-renders occur when state and effects are unoptimized; fix them by using derived state, stable callbacks, transitions, and correct memoization practices.

Can I use this approach to review and refactor existing React codebases?▼

Yes, you can review and refactor existing React codebases by identifying relevant rule names and using them to rewrite affected sections without regressing correctness.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
LumenWipeLumenWipe
3

vercel-react-best-practices

Review React and Next.js code for performance issues and recommend optimizations.

Official
Advanced
zenchantlivezenchantlive

react-best-practices

Enforce React and Next.js performance optimization patterns for bundle size and rendering.

Community
Intermediate
quanngynxquanngynx

react-render-optimization

Diagnose and fix unnecessary React re-renders and expensive render-time work.

Community
Advanced