skills.rest
mahoushoujyo-eee
mahoushoujyo-eeeCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Review React and Next.js code for performance issues and recommend prioritized fixes.

15|Updated Feb 14, 2026
Search Tags:#code review#react#data fetching#rendering#next.js#performance optimization#bundle optimization
One-click install
npx skills add https://github.com/mahoushoujyo-eee/eshell --skill vercel-react-best-practices-mahoushoujyo-eee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mahoushoujyo-eee/eshell/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mahoushoujyo-eee/eshell --skill vercel-react-best-practices-mahoushoujyo-eee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps prevent performance problems in React and Next.js applications, including request waterfalls, oversized bundles, unnecessary re-renders, slow rendering, and inefficient JavaScript patterns.

Core Features & Use Cases

  • Async Performance: Eliminate waterfalls with deferred awaits, parallel promises, dependency-aware fetching, and strategic Suspense boundaries.
  • Bundle Optimization: Reduce load costs through direct imports, conditional loading, dynamic imports, deferred third-party libraries, and intent-based preloading.
  • Rendering and Code Quality: Improve server-side data handling, client-side fetching, re-render behavior, DOM performance, caching, immutability, and advanced React patterns.
  • Use Case: Apply the rules when reviewing a React component, optimizing a Next.js page, refactoring data fetching, or diagnosing slow initial loads and excessive rendering.

Quick Start

Use the vercel-react-best-practices skill to review this React or Next.js code for performance issues and recommend prioritized fixes.

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?▼

Reduce React bundle size by using direct imports, conditional loading, dynamic imports, and deferred third-party libraries. Intent-based preloading further minimizes load costs and optimizes the initial load performance.

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

Unnecessary re-renders in React components often stem from inefficient state management and poor immutability. Fix this by improving client-side fetching patterns, caching, and applying advanced React rendering optimizations to prevent wasted cycles.

What is the best way to review React code for performance bottlenecks?▼

The best way to review React code for performance bottlenecks is to apply prioritized guidance for minimizing bundles, improving server and client data handling, and maintaining efficient rendering patterns across your component development and refactoring.

How do I optimize slow rendering and improve server-side data handling in Next.js?▼

Optimize slow rendering and server-side data handling in Next.js by applying advanced React patterns, improving caching strategies, and ensuring efficient DOM performance. This prevents slow initial loads and maintains responsive application behavior.

Related Skills

Explore More Software Engineering Skills→
nicholasgriffintnnicholasgriffintn
2

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

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

Community
Advanced
Friend09Friend09

python-lint-style

Check Python code for docstrings, naming conventions, and import order.

Community
Intermediate
curiositechcuriositech
181

performance-profiling

Analyze Node.js application performance via CPU profiling and database query analysis.

Official
Advanced