skills.rest
d3ming
d3mingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

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

Updated Jan 5, 2026
Search Tags:#performance#react#nextjs#server-side#data-fetching#bundle-size#waterfalls
One-click install
npx skills add https://github.com/d3ming/dot-agents --skill vercel-react-best-practices-d3ming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/d3ming/dot-agents/tree/main/master/skills/vercel-react-best-practices
Command: npx skills add https://github.com/d3ming/dot-agents --skill vercel-react-best-practices-d3ming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices provides concise, prioritized guidance to locate and eliminate common performance bottlenecks in React and Next.js applications, including waterfalls, oversized bundles, inefficient server/client data flows, excessive serialization, and unnecessary re-renders.

Core Features & Use Cases

  • Comprehensive rule set: 57 rules across eliminating waterfalls, bundle-size optimization, server-side performance, client-side fetching, re-render strategies, rendering optimizations, JavaScript micro-optimizations, and advanced patterns.
  • Actionable examples: Each rule includes incorrect vs correct code examples, impact rationale, and references to concrete techniques (Promise.all, better-all, next/dynamic, React.cache, LRU caching, after()).
  • Agent & developer workflows: Ideal for automated code audits, AI-assisted refactoring, code review recommendations, and prioritizing performance fixes for production Next.js projects.
  • Use Case: Convert sequential awaits to parallel fetching, replace barrel imports with direct imports to reduce bundle size, and minimize RSC serialization to shrink HTML payloads.

Quick Start

Use the vercel-react-best-practices skill to audit a Next.js repository and produce prioritized, code-level recommendations to fix waterfalls, reduce bundle size, and optimize server/client data fetching.

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 waterfalls and reduce bundle size in Next.js applications?▼

Next.js server-side performance is improved by minimizing React Server Component serialization and applying per-request and cross-request caching via React.cache. This skill outputs concrete rules to shrink HTML payloads and optimize server/client data flows.

How do I fix excessive React Server Component serialization in Next.js?▼

Next.js server-side performance is improved by minimizing React Server Component serialization and applying per-request and cross-request caching via React.cache. This skill outputs concrete rules to shrink HTML payloads and optimize server/client data flows.

What's the best way to audit a React codebase for production performance regressions?▼

Yes, you can optimize client-side fetching and re-render strategies by applying dynamic imports with next/dynamic and leveraging advanced patterns like after(). This skill provides actionable examples for JavaScript micro-optimizations and rendering optimizations.

Can I use dynamic imports and next/dynamic to optimize client-side fetching in React?▼

Yes, you can optimize client-side fetching and re-render strategies by applying dynamic imports with next/dynamic and leveraging advanced patterns like after(). This skill provides actionable examples for JavaScript micro-optimizations and rendering optimizations.

Does this approach work for both Server and Client Components in Next.js?▼

Yes, the approach works for Next.js Server and Client Components, API routes, and build-time bundling. It targets inefficient data flows, excessive serialization, and re-render hotspots across the entire application architecture for production performance.

Related Skills

Explore More Software Engineering Skills→
siluatsiluat
1

vercel-react-best-practices

Apply React/Next.js best practices for rendering, data fetching, and bundling.

Community
Advanced
calesthiocalesthio
46.2k

vercel-react-best-practices

Optimize React and Next.js runtime and build performance by eliminating async waterfalls and reducing bundle weight.

Community
Advanced
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
darthlinuxerdarthlinuxer

nextjs-react-expert

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

Community
Advanced