skills.rest
avoidthekitchen
avoidthekitchenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js code to eliminate async waterfalls and reduce bundle size.

1|Updated Apr 13, 2026
Search Tags:#performance#react#nextjs#code-review#server-side#bundle-optimization#async-parallelization
One-click install
npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill vercel-react-best-practices-avoidthekitchen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/avoidthekitchen/avilingo-v2/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill vercel-react-best-practices-avoidthekitchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a prescriptive, prioritized set of rules to detect and fix common React and Next.js performance problems — eliminating async waterfalls, shrinking initial bundles, preventing SSR/hydration regressions, and reducing unnecessary re-renders.

Core Features & Use Cases

  • Performance-driven refactoring: Concrete patterns for parallelizing async work, using Suspense boundaries, and avoiding server-side waterfalls.
  • Bundle and load optimization: Guidance on avoiding barrel imports, dynamic imports, conditional loading, and preloading based on user intent.
  • Server & serialization best practices: Rules for hoisting static I/O, per-request vs cross-request caching, minimizing RSC serialization, and treating Server Actions like API routes.
  • Use Case: Use this guide to power an automated code-review agent that scans a codebase for expensive awaits, heavy imports, misused effects, and suggests or applies targeted fixes.

Quick Start

Review the React/Next.js codebase and apply Vercel React Best Practices to identify waterfalls, reduce bundle size, and propose concrete fixes for async parallelism, dynamic imports, and server-side data handling.

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 sequential async waterfalls in React and Next.js?▼

To eliminate sequential async waterfalls in React and Next.js, parallelize independent data fetching operations using Promise.all or better-all, and hoist static I/O to prevent server-side data fetching delays.

What is the best way to reduce bundle size in Next.js applications?▼

The best way to reduce bundle size in Next.js applications involves avoiding barrel imports, utilizing dynamic imports for code splitting, and applying conditional loading based on user intent to minimize initial load times.

How do I prevent SSR and hydration regressions when refactoring React components?▼

Prevent SSR and hydration regressions by strategically placing Suspense boundaries, minimizing React Server Component serialization, and ensuring per-request caching rules are correctly applied to maintain rendering correctness.

Does this approach work for optimizing Next.js Server Actions and API routes?▼

Yes, this approach works for Next.js Server Actions and API routes by treating Server Actions with the same strict security and performance rules as API routes, optimizing data fetching and caching behaviors.

When should I use React.cache for server-side data fetching?▼

Use React.cache for server-side data fetching to deduplicate requests within a single render pass, ensuring cross-request caching is handled properly while minimizing unnecessary React Server Component serialization overhead.

Related Skills

Explore More Software Engineering Skills→
tutur3ututur3u
53

vercel-react-best-practices

Apply verified React and Next.js performance patterns to codebases.

Official
Advanced
darthlinuxerdarthlinuxer

nextjs-react-expert

Detect sequential async waterfalls and large bundle imports in Next.js and React codebases.

Community
Advanced
AnveioAnveio
1

task-pull-request

Automate GitHub pull request creation, reviews, feedback, and merges via gh CLI.

Community
Intermediate
yeshan333yeshan333
94

optimize

Analyze Core Web Vitals and optimize loading, rendering, animations, and bundle size.

Community
Advanced