skills.rest
leto-labs
leto-labsOFFICIAL
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React/Next.js performance best practices across code reviews and refactors.

Updated Feb 11, 2026
Search Tags:#react#optimization#next.js#best-practices#bundling#web-vitals#react-performance
One-click install
npx skills add https://github.com/leto-labs/openclaw-bootstrap-config --skill vercel-react-best-practices-leto-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/leto-labs/openclaw-bootstrap-config/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/leto-labs/openclaw-bootstrap-config --skill vercel-react-best-practices-leto-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve performance of React/Next.js projects by applying best-practice guidelines.

Core Features & Use Cases

  • Consolidated performance guidance across React components, Next.js pages, data fetching strategies, and bundle optimization.
  • Actionable rules spanning waterfalls elimination, parallelization, caching, and server-side considerations.
  • Real-world scenarios with recommended refactor patterns to achieve faster load times and better resilience.

Quick Start

Review your React/Next.js codebase and apply these guidelines to identify hotspots and refactor accordingly.

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 React and Next.js?▼

Eliminate data fetching waterfalls by applying best-practice patterns that parallelize data fetching and minimize server/client serialization, which reduces sequential loading delays and delivers faster, more resilient application performance.

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

Optimizing bundle size in a Next.js application involves applying consolidated performance guidelines that identify hotspots across components and pages, enabling refactors that reduce unnecessary code and improve overall web vitals.

How do I refactor React components to improve web vitals and load times?▼

Refactoring React components to improve web vitals requires applying actionable rules for caching, server-side considerations, and data fetching strategies, utilizing recommended real-world patterns to achieve faster load times and better resilience.

Does this React performance guidance apply to both client and server-side rendering?▼

Yes, the React performance guidance applies to both client and server-side rendering by enforcing patterns that minimize server/client serialization and optimize server-side considerations across your Next.js pages and data fetching strategies.

Why does my Next.js app have slow load times despite using server components?▼

Slow load times in Next.js apps using server components often occur due to data fetching waterfalls and excessive server/client serialization; applying targeted best-practice refactors can parallelize fetching and minimize serialization overhead.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
first-flukefirst-fluke
218

react-best-practices

Apply React and Next.js best practices to optimize component performance and data fetching.

Official
Advanced
jangtrinhjangtrinh

web-perf

Analyze web performance gaps and optimize Core Web Vitals with Lighthouse.

Community
Intermediate
zajcazajca
2

go-linting

Configure golangci-lint with recommended Go linters for static analysis.

Community
Basic