vercel-react-best-practices

Optimize React and Next.js apps using Vercel's 57 prioritized performance rules.

Updated Oct 20, 2025
One-click install
npx skills add https://github.com/pierregueroult/dot-files --skill vercel-react-best-practices-pierregueroult
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/pierregueroult/dot-files/tree/main/opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/pierregueroult/dot-files --skill vercel-react-best-practices-pierregueroult

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines to optimize React and Next.js applications, addressing critical performance bottlenecks like waterfalls, bundle size, and rendering efficiency.

Core Features & Use Cases

  • Performance Optimization: Offers 57 rules across 8 categories, prioritized by impact.
  • Code Refactoring Guidance: Provides examples for eliminating waterfalls, reducing bundle size, and improving server-side and client-side performance.
  • Use Case: When developing a new Next.js feature, consult this Skill to ensure data fetching is parallelized, components are memoized correctly, and the initial bundle size is minimized for faster load times.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component for optimal 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 eliminate data fetching waterfalls in Next.js?

React performance optimization eliminates data fetching waterfalls by parallelizing server-side requests using Vercel best practices, preventing sequential loading delays and improving overall rendering efficiency.

What is the best way to reduce bundle size in React applications?

The best way to reduce bundle size in React applications involves applying component-level optimizations and code-splitting patterns outlined in Vercel engineering guidelines to minimize initial load times.

How do I optimize React component re-renders for high-performance web apps?

Optimize React component re-renders by correctly applying memoization techniques and advanced patterns, ensuring components only re-render when necessary dependencies change to maintain high-performance web applications.

Can I use these React and Next.js optimization rules for code refactoring?

Yes, you can use these React and Next.js optimization rules for code refactoring, as the guidelines provide specific examples for improving server-side performance and eliminating bottlenecks in existing applications.

Does Next.js server-side data fetching require special optimization patterns?

Next.js server-side data fetching requires special optimization patterns to parallelize requests and avoid waterfalls, ensuring high-performance web applications by following Vercel engineering best practices for data retrieval.