vercel-react-best-practices

Optimize React and Next.js application performance with Vercel engineering standards.

Updated Aug 27, 2026

Search Tags:#code quality #performance #web development #react #optimization #next.js

Ready to run

npx skills add https://github.com/cgasgarth/opencode-config --skill vercel-react-best-practices-cgasgarth

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cgasgarth/opencode-config/tree/main/skill/react-best-practices
Command: npx skills add https://github.com/cgasgarth/opencode-config --skill vercel-react-best-practices-cgasgarth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and guidelines to optimize the performance of React and Next.js applications, ensuring faster load times, improved user experience, and more efficient development.

Core Features & Use Cases

Performance Optimization: Covers critical areas like eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
AI-Assisted Development: Designed for AI agents to use when writing, reviewing, or refactoring React/Next.js codebases.
Use Case: When developing a new feature, consult this Skill to ensure data fetching is parallelized, components are code-split effectively, and re-renders are minimized for a smooth user experience.

Quick Start

Apply the React best practices to the provided code snippet to improve its 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 application performance?▼

Optimize React and Next.js performance by applying guidelines that eliminate data fetching waterfalls, reduce bundle size, parallelize server-side and client-side data fetching, and minimize component re-renders.

What is the best way to reduce bundle size in a Next.js application?▼

Reducing bundle size in Next.js involves code-splitting components effectively and applying advanced rendering patterns to ensure adherence to Vercel engineering standards for efficient delivery.

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

React re-render optimization requires following specific guidelines to minimize unnecessary renders, improving overall rendering performance and JavaScript execution efficiency for a smoother user experience.

Can I use these Vercel React best practices for automated code review?▼

Yes, these React best practices are designed for AI agents to use during automated code generation, review, and refactoring of React and Next.js codebases to ensure performance standards are met.

How do I eliminate data fetching waterfalls in server-side rendered React apps?▼

Eliminating waterfalls in server-side rendered React apps involves parallelizing data fetching operations and applying advanced patterns for both server-side and client-side rendering workflows.