vercel-react-best-practices

Apply React and Next.js performance guidelines to optimize components and data fetching.

232|14|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/dmmulroy/overseer --skill vercel-react-best-practices-dmmulroy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/dmmulroy/overseer/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/dmmulroy/overseer --skill vercel-react-best-practices-dmmulroy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates and codifies React and Next.js performance guidelines from Vercel Engineering to help teams consistently build faster, more efficient apps.

Core Features & Use Cases

  • Comprehensive rules across 8 categories covering server-side rendering, client-side data fetching, bundle optimization, and rendering performance to guide refactoring and code generation.
  • Ready-to-apply patterns for common tasks such as avoiding waterfalls, deferring non-critical libraries, parallel data fetching, and memoization to improve TTI, FID, and CLS.
  • Useful during code reviews, new feature development, and performance audits to ensure best practices are followed.

Quick Start

Analyze the repository and apply the guidelines to optimize a React/Next.js codebase for performance.

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 when refactoring components?▼

To optimize React and Next.js performance during refactoring, apply structured guidelines covering server-side rendering, client-side data fetching, and bundle optimization. This enforces guardrails and safety checks to ensure robust improvements.

What's the best way to avoid data fetching waterfalls in Next.js?▼

The best way to avoid data fetching waterfalls in Next.js is implementing parallel data fetching patterns. Deferring non-critical libraries also minimizes blocking and improves overall Time to Interactive metrics.

When do I need server-side rendering versus client-side rendering in Next.js?▼

You need server-side rendering versus client-side rendering in Next.js when evaluating specific route data requirements. Applying rendering performance guidelines helps determine the optimal pattern for components and pages to improve metrics.

How do I improve bundle optimization and reduce bundle size in a React application?▼

Improve bundle optimization in a React application by deferring non-critical libraries and applying established patterns. This reduces initial load size and directly improves First Input Delay and Cumulative Layout Shift scores.

Can I use these React performance patterns for code reviews and audits on existing codebases?▼

Yes, you can use these React performance patterns for code reviews and audits on existing codebases. The guidelines provide ready-to-apply rules to validate server and client rendering patterns across both new and established projects.