vercel-react-best-practices

Analyze React and Next.js pages for performance bottlenecks across eight rule categories.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/zerdos/spike-land-nextjs --skill vercel-react-best-practices-zerdos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zerdos/spike-land-nextjs/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/zerdos/spike-land-nextjs --skill vercel-react-best-practices-zerdos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, opinionated guide to optimize React and Next.js apps, helping teams deliver faster, more reliable web experiences by following proven best practices from Vercel Engineering.

Core Features & Use Cases

  • 57 rules across 8 categories including eliminating waterfalls, bundle-size optimization, server-side performance, client-side data fetching, re-render strategies, rendering patterns, JavaScript performance, and advanced patterns.
  • Use cases include reviewing components and pages, refactoring code for performance, and guiding CI/CD checks to enforce consistent performance standards across projects.
  • Example scenario: audit a Next.js page to identify async bottlenecks, then apply recommended changes and generate a prioritized plan.

Quick Start

Analyze a Next.js page for performance bottlenecks and generate a prioritized list of changes aligned with the eight categories.

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 code reviews?▼

To optimize Next.js page performance, audit the page to identify async bottlenecks and data waterfalls, then apply recommended changes to generate a prioritized plan. This process aligns refactoring steps across eight performance categories including bundle-size optimization and rendering patterns.

What are the best practices for reducing bundle size in Next.js applications?▼

To eliminate data fetching waterfalls in React, apply rule-based guidance targeting client-side data fetching and server-side performance. This approach detects sequential async bottlenecks and provides deterministic refactoring prompts to parallelize data loading and improve render efficiency.

Can I enforce React performance standards in CI pipelines?▼

Yes, you can enforce React performance standards in CI pipelines by integrating these best practices to guide automated checks. This ensures consistent performance standards across projects by detecting bundle bloats, re-render inefficiencies, and rendering pattern issues during continuous integration.

What rendering patterns should I use to avoid re-render inefficiencies in React?▼

To avoid re-render inefficiencies in React, use advanced rendering patterns and re-render strategies defined within the eight performance categories. This guidance helps identify render inefficiencies and provides deterministic prompts to refactor components for optimal client-side performance.