skills.rest
haidonglethqb
haidonglethqbCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and apply React and Next.js performance patterns to optimize workloads.

Updated Feb 27, 2026
Search Tags:#performance#suspense#react#optimization#nextjs#server-components
One-click install
npx skills add https://github.com/haidonglethqb/CloudSchool --skill vercel-react-best-practices-haidonglethqb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/haidonglethqb/CloudSchool/tree/main/.cursor/skills/react-best-practices
Command: npx skills add https://github.com/haidonglethqb/CloudSchool --skill vercel-react-best-practices-haidonglethqb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance pitfalls across rendering, data fetching, bundling, and SSR boundaries. This Skill consolidates Vercel's best practices into a structured guide that helps teams consistently optimize apps and automate refactor guidance.

Core Features & Use Cases

  • Provides an organized, priority-based collection of performance rules across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced patterns) to guide refactoring.
  • Includes concrete examples and patterns for improving waterfalls, parallel data fetching, Suspense usage, code-splitting, and safe React Server Components serialization.
  • Used for code reviews, automations, and generating consistent performance improvements across projects.

Quick Start

Audit a React/Next.js project and implement the prioritized performance patterns described in this Skill.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices to optimize React and Next.js performance?▼

Optimizing React and Next.js performance involves applying structured rules across eight categories including async data fetching, bundling, server components, and rerendering to prevent waterfalls and reduce bundle size.

How do I prevent data fetching waterfalls in Next.js server components?▼

Preventing data fetching waterfalls requires implementing parallel data fetching paths and safe React Server Components serialization, guided by automated refactor rules with guardrails for caching strategies.

When should I use Suspense boundaries for React rendering optimization?▼

Using Suspense boundaries is recommended when optimizing rendering workloads, specifically to enforce performance patterns that improve data-fetching paths and handle asynchronous component rendering safely.

Does this approach provide guidance on code-splitting to reduce bundle size?▼

Yes, this approach provides concrete examples and patterns for code-splitting alongside safe React Server Components serialization to consistently reduce bundle size and guide refactoring.

Can I automate performance refactoring for server actions and caching strategies?▼

Yes, you can automate performance refactoring by enforcing guardrails specifically for server actions, caching strategies, and safe serialization to generate consistent improvements across projects.

Related Skills

Explore More Software Engineering Skills→
mozilor-technologiesmozilor-technologies

vercel-react-best-practices

Analyze React and Next.js codebases for performance pitfalls and optimization patterns.

Official
Intermediate
yunusemrgrlyunusemrgrl

vercel-react-best-practices

Apply React and Next.js performance patterns across code reviews and refactors.

Community
Advanced
thongdn-itthongdn-it
3

vercel-react-best-practices

Optimize React and Next.js projects by enforcing bundle and server performance patterns.

Community
Advanced
DVNghiemDVNghiem
20

performance-profiling

Profile Node.js and web apps to identify CPU and memory bottlenecks.

Community
Advanced