Verified:GitHub

vercel-react-best-practices

Applies React and Next.js best practices to optimize page performance and reduce bundle size during code reviews, refactoring, and automation tasks.

1|Updated Feb 2, 2026

Search Tags:#performance #suspense #react #optimization #nextjs #bundling #server-components

Ready to run

npx skills add https://github.com/KARENLHAO/skills --skill vercel-react-best-practices-karenlhao

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance pitfalls such as large bundles, waterfalls, and suboptimal data fetching. This guide provides a curated set of best practices to improve TTI, LCP, and overall user experience.

Core Features & Use Cases

Establishes a priority-driven checklist across Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
Guides code reviews, scaffolding, and automation tasks to apply these patterns consistently across React components, Next.js pages, and data flows.
Real-world scenarios: when refactoring a page, reducing bundle size, and implementing efficient data loading techniques.

Quick Start

Begin by auditing a React/Next.js page or component and apply the top-priority practices in the Eliminating Waterfalls and Bundle Size categories first. Then scale to server/client data fetching patterns and re-render optimizations.

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 by eliminating data fetching waterfalls?▼

To optimize React and Next.js performance, audit components and pages to apply best practices that eliminate data fetching waterfalls, starting with the highest-priority checklist items before scaling to server-side patterns.

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

The best way to reduce bundle size in Next.js is applying targeted bundle optimization practices during code reviews and refactoring, addressing large bundles to improve Time to Interactive (TTI) and Largest Contentful Paint (LCP).

How do I apply React server components best practices during code reviews?▼

Apply React server components best practices during code reviews by using a priority-driven checklist that validates server-side performance, client-side data fetching, and advanced rendering patterns across your project.

When do I need to optimize re-renders and rendering performance in React?▼

You need to optimize re-renders and rendering performance in React when addressing suboptimal user experience, applying specific checklist patterns after initial waterfall and bundle size issues are resolved.

Does this Next.js optimization guide require any specific project dependencies?▼

This Next.js optimization guide requires no specific dependencies, needing only a root SKILL.md file with YAML frontmatter containing name and description, plus optional scripts, references, and assets directories.