skills.rest
agoudbg
agoudbgCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js codebases by eliminating waterfalls and reducing bundle size.

7|1|Updated Feb 10, 2026
Search Tags:#performance#caching#react#nextjs#code-review#bundle-optimization#server-side-rendering
One-click install
npx skills add https://github.com/agoudbg/Cosmosh --skill vercel-react-best-practices-agoudbg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/agoudbg/Cosmosh/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/agoudbg/Cosmosh --skill vercel-react-best-practices-agoudbg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large React and Next.js codebases often suffer from slow initial renders, excessive bundle sizes, server-side waterfalls, redundant serialization at server/client boundaries, and repeated I/O or compute on each request. These issues degrade user experience (LCP/TTI), increase hosting costs, and make iterative development slower due to long build and HMR times. This Skill provides prescriptive patterns and prioritized rules to locate and fix those performance bottlenecks.

Core Features & Use Cases

  • Guided Ruleset: 58 concrete rules across Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client Data Fetching, Re-render and Rendering optimizations, JavaScript performance, and Advanced Patterns.
  • Actionable Examples: For each rule, paired incorrect/correct examples and impact reasoning to support automated refactors and human reviews.
  • Agent-Friendly: Designed for LLMs and automation to apply fixes such as hoisting static I/O, parallelizing fetches, converting to dynamic imports, and minimizing RSC serialization during code transformations.
  • Use Cases: Automated code reviews that prioritize fixes, refactor tasks to reduce bundle size, optimizing server actions and API routes, and generating targeted performance improvement suggestions for Next.js apps.

Quick Start

Ask the skill to analyze a Next.js page or component and return prioritized performance fixes with example code to eliminate waterfalls, reduce bundle size, and improve rendering.

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 async waterfalls in Next.js server components?▼

Eliminate async waterfalls in Next.js server components by parallelizing data fetches using Promise.all instead of sequential awaits. This prevents request blocking, reduces server-side latency, and improves initial render performance for complex pages.

What is the best way to reduce React bundle size with dynamic imports?▼

Reduce React bundle size by applying dynamic imports to split code and defer loading non-critical components. This minimizes the initial client payload, improves time-to-interactive metrics, and optimizes overall bundle delivery.

How does RSC serialization impact Next.js performance?▼

RSC serialization impacts Next.js performance by transferring server-rendered data to the client. Minimizing this serialized payload prevents excessive data transfer at the server/client boundary, reducing hydration overhead and improving render times.

Why does my Next.js app have slow initial renders and large bundle sizes?▼

Slow initial renders and large bundle sizes often stem from excessive client-side JavaScript, sequential data fetching, and redundant server/client serialization. Optimizing these areas through code splitting and parallelized fetches resolves performance bottlenecks.

How do I implement per-request and cross-request caching strategies in Next.js?▼

Implement per-request and cross-request caching in Next.js by hoisting static I/O operations and leveraging platform caching mechanisms. This prevents redundant compute and database queries, returning cached data instantly for repeated requests.

How do I optimize Suspense boundaries for React server components?▼

Optimize Suspense boundaries by placing them strategically around components that fetch data asynchronously. This allows the rest of the page to render immediately while streaming deferred content, improving LCP and perceived load performance.

Related Skills

Explore More Software Engineering Skills→
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced
d3mingd3ming

vercel-react-best-practices

Audit Next.js projects for performance regressions and generate prioritized code refactors.

Community
Advanced
ivanrvpereiraivanrvpereira
17

vercel-react-best-practices

Review React and Next.js code for performance issues and apply Vercel best practices.

Community
Advanced
keshavraj936keshavraj936

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals for web performance.

Community
Intermediate