skills.rest
hq-opensource
hq-opensourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to components and data-fetching flows.

9|1|Updated Feb 11, 2026
Search Tags:#performance#suspense#frontend#react#next.js#bundling#server-components
One-click install
npx skills add https://github.com/hq-opensource/si-mapper --skill vercel-react-best-practices-hq-opensource
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/hq-opensource/si-mapper/tree/main/.agent/skills/react-best-practices
Command: npx skills add https://github.com/hq-opensource/si-mapper --skill vercel-react-best-practices-hq-opensource

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance drift due to waterfalls, large bundles, and mixed server/client patterns. This Skill codifies best practices to ensure scalable, high-performance code across components, pages, and data-fetching paths.

Core Features & Use Cases

  • Guidelines for React and Next.js performance to improve time-to-interactive, largest-contentful-paint, and stability across teams.
  • Scope across server and client patterns including data fetching, Suspense strategies, lazy loading, and code-splitting, ensuring reliable performance gains in real-world projects.
  • Use-case guidance for upgrading legacy apps or auditing large component libraries to optimize bundle size and render performance.

Quick Start

Review and apply the guidelines to React/Next.js components, pages, and data-fetching flows to achieve performance gains.

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 large component libraries?▼

To optimize React and Next.js performance, apply best practices like proper Suspense usage, lazy loading, and code-splitting to reduce bundle size and improve render performance across components.

What's the best way to prevent data fetching waterfalls in Next.js?▼

Preventing data fetching waterfalls involves establishing safe server/client boundaries and applying cross-request caching strategies to ensure scalable, high-performance data-fetching paths.

When do I need to use Suspense in React server components?▼

You need to use Suspense in React server components when implementing lazy loading and code-splitting strategies to improve time-to-interactive and largest-contentful-paint metrics.

How do I fix performance drift in legacy React applications?▼

Fix performance drift in legacy React applications by auditing large component libraries and applying guidelines for server and client patterns, data fetching, and bundle optimization.

Does this approach support mixed server and client rendering patterns?▼

Yes, this approach supports mixed server and client rendering patterns by enforcing safe server/client boundaries and providing use-case guidance for data fetching and Suspense strategies.

Related Skills

Explore More Software Engineering Skills→
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced
aroidoaroido

performance-optimization

Optimize React application performance and Core Web Vitals with code splitting and lazy loading.

Official
Advanced
SlanyCukrSlanyCukr
2

React 19

Build React 19 applications with server components, actions, and TypeScript.

Community
Advanced
djkloopdjkloop

optimize

Diagnose and fix UI performance issues in web applications using Lighthouse and bundle analyzers.

Community
Intermediate