vercel-react-best-practices

Apply React and Next.js performance best practices across codebases.

2|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/SiTaggart/.agents --skill vercel-react-best-practices-sitaggart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/SiTaggart/.agents/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/SiTaggart/.agents --skill vercel-react-best-practices-sitaggart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates React and Next.js performance best practices to help engineers write, review, and refactor code for speed, scalability, and reliability.

Core Features & Use Cases

  • Priority-driven rules across 8 categories (Eliminating Waterfalls, Bundle Size, Server-Side, Client-Side, Re-render, Rendering, JavaScript, Advanced Patterns) with actionable patterns.
  • Concrete examples and recommended patterns for common scenarios such as data fetching, code-splitting, and SSR/CSR boundaries.
  • Quick-start workflow to audit a codebase and implement performance improvements across components and pages.

Quick Start

Review your React/Next.js project and apply the 8-category rules to identify bottlenecks and implement the recommended 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 eliminate data fetching waterfalls in React and Next.js?▼

Eliminating data fetching waterfalls in React and Next.js requires applying parallel data fetching patterns and establishing proper server/client boundaries to prevent sequential network requests across component renders and APIs.

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

Minimizing bundle size in Next.js involves applying code-splitting techniques, optimizing JavaScript delivery, and structuring server-side and client-side boundaries to reduce the client bundle payload.

How do I audit a React codebase for performance bottlenecks?▼

Auditing a React codebase for performance bottlenecks involves reviewing pages and components against priority-driven rules across eight categories including re-renders, data fetching, and bundle size to identify and refactor inefficiencies.

When should I use SSR versus client-side rendering in Next.js?▼

Choosing SSR versus client-side rendering in Next.js depends on data fetching requirements and server/client boundaries, using SSR to enable parallel data fetching on the server and CSR for client-side interactivity to optimize performance.

Why does my React component re-render excessively and how do I fix it?▼

Excessive React component re-renders are fixed by applying rendering best practices and advanced patterns that optimize component renders, ensuring data fetching and server/client boundaries are structured to prevent unnecessary updates.

Can I use these Next.js performance patterns for an existing large scale codebase?▼

Yes, these Next.js performance patterns apply to existing large scale codebases by providing a quick-start workflow to audit code, identify bottlenecks across eight categories, and implement concrete refactoring examples for speed and scalability.