vercel-react-best-practices

Identify and apply React/Next.js performance best practices across codebases.

1|Updated Feb 7, 2026

Search Tags:#performance #frontend #react #optimization #nextjs #best-practices #code-review

Ready to run

npx skills add https://github.com/xvawl/template-nextjs --skill vercel-react-best-practices-xvawl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/xvawl/template-nextjs/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/xvawl/template-nextjs --skill vercel-react-best-practices-xvawl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps often suffer from performance regressions due to inefficient rendering, large bundles, and data-fetching waterfalls. This skill consolidates Vercel's guidance into actionable patterns that teams can apply during development, review, or refactoring to ensure fast, reliable UIs.

Core Features & Use Cases

Comprehensive rules across categories (waterfalls, bundle size, server-side optimization, client data fetching, re-rendering, rendering performance, JS, and advanced patterns).
Applies to React components, Next.js pages, data fetching strategies, code-splitting, and bundle optimization across both client and server boundaries.
Provides practical examples and guardrails to keep performance improvements safe and maintainable.

Quick Start

Run an assessment against a codebase to surface high-impact optimizations and produce targeted changes.

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 optimize React and Next.js performance during a code review?▼

To optimize React and Next.js performance during code review, identify and apply best practices for data fetching, bundle size reduction, and rendering. This surfaces high-impact optimizations across client and server boundaries safely.

What causes data fetching waterfalls in React and how do I fix them?▼

Data fetching waterfalls in React are caused by sequential data loading. Fix them by applying parallel data fetching patterns to reduce load times and enforce safe server/client boundaries.

What's the best way to reduce bundle size in modern React apps?▼

The best way to reduce bundle size in React apps is applying code-splitting and bundle optimization patterns. This ensures fast, reliable UIs by safely refactoring components and pages.

Can I use these Next.js optimization patterns for both server and client components?▼

Yes, you can use these Next.js optimization patterns for both server and client components. The guidance enforces safe server/client boundaries and applies rules across rendering and data fetching strategies.

How do I stop unnecessary re-rendering in my React components?▼

To stop unnecessary re-rendering in React components, apply targeted performance tuning and rendering optimization patterns. This prevents performance regressions and keeps UI updates maintainable.

Does this approach work for refactoring existing React codebases?▼

Yes, this approach works for refactoring existing React codebases. Run an assessment against your codebase to surface high-impact optimizations and produce targeted, maintainable changes.