vercel-react-best-practices

Review React/Next.js code for performance optimization opportunities.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/zyx77550/RESIDUAL-MISHKAT --skill vercel-react-best-practices-zyx77550
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zyx77550/RESIDUAL-MISHKAT/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/zyx77550/RESIDUAL-MISHKAT --skill vercel-react-best-practices-zyx77550

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance can degrade without applying established best practices. This Skill provides a structured guide to optimize rendering, data fetching, bundling, and server/client boundaries to deliver faster, more reliable web applications.

Core Features & Use Cases

  • A comprehensive set of rules spanning waterfalls elimination, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, and rendering performance.
  • Ideal for engineers, architects, and reviewers who need to improve Time to Interactive (TTI), Largest Contentful Paint (LCP), and overall user experience in React/Next.js projects.
  • Use cases include code reviews, refactoring sessions, performance audits, and architecture decisions for new features or migrations.

Quick Start

Perform a guided review of a React/Next.js project to identify optimization opportunities and implement the listed patterns.

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 for better Core Web Vitals?▼

Optimize React and Next.js performance by applying established patterns for data fetching, bundle size reduction, and server/client boundaries to improve Time to Interactive and Largest Contentful Paint metrics.

What is the best way to eliminate data fetching waterfalls in Next.js?▼

Eliminate data fetching waterfalls in Next.js by enforcing reliable patterns for server-side fetching and caching, which reduces sequential loading and speeds up rendering.

How do I organize server and client boundaries when refactoring React components?▼

Organize server and client boundaries in React components by applying safe code organization patterns that separate server-side logic from client-side data fetching and rendering.

Can I use these React best practices for bundle optimization during code reviews?▼

Yes, you can use these React best practices during code reviews and performance audits to identify bundle optimization opportunities and enforce lazy-loading patterns.

Why does my React application experience slow re-renders and how can I fix it?▼

Slow React re-renders are fixed by applying targeted re-render optimization patterns that enforce reliable caching and efficient client-side data fetching structures.

When should I apply lazy-loading to reduce my Next.js bundle size?▼

Apply lazy-loading to reduce Next.js bundle size when architectural reviews identify heavy dependencies or client components that delay initial rendering and overall user experience.