skills.rest
KARENLHAO
KARENLHAOCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/KARENLHAO/skills --skill vercel-react-best-practices-karenlhao
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
LostovayneLostovayne
2

next-best-practices

Apply Next.js best practices across file structure, data patterns, and error handling.

Community
Advanced
dappvibedappvibe
1

vercel-react-best-practices

Identify and enforce React/Next.js performance rules to reduce waterfalls and optimize bundles.

Community
Advanced
rohitg00rohitg00
2.5k

react-patterns

Apply React 19 Server Components, Actions, Suspense, and hooks to build scalable UI architectures.

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced