skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

vercel-react-best-practices

Applies Vercel performance optimization rules when writing or refactoring React and Next.js code.

3|Updated Apr 20, 2026
Search Tags:#code review#refactoring#react#data fetching#bundle size#performance optimization#nextjs
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill vercel-react-best-practices-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill vercel-react-best-practices-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React and Next.js codebases often suffer from slow page loads, large bundles, and unnecessary re-renders because developers miss established performance patterns. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven optimizations during code generation, review, and refactoring. ## Core Features & Use Cases - 70 Prioritized Rules Across 8 Categories: Covers eliminating async waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns, each tagged by impact level from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete TypeScript/TSX examples showing the anti-pattern and the optimized implementation, plus impact metrics like 2-10x improvements from parallelizing fetches. - Use Case: When refactoring a Next.js page that sequentially awaits user, posts, and comments data, the Skill directs you to use Promise.all() for parallel fetching and strategic Suspense boundaries so the layout renders immediately while data streams in. ## Quick Start Review my Next.js page component using the vercel-react-best-practices skill and fix any data fetching waterfalls or bundle size issues.

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

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

How to reduce bundle size in a React or Next.js app?▼

Avoid barrel file imports from libraries like lucide-react or @mui/material, use next/dynamic for heavy components like Monaco, and defer analytics or logging libraries until after hydration. Next.js 13.5+ can auto-optimize package imports via optimizePackageImports.

Does this skill work with React Server Components?▼

Yes, it includes server-side rules for RSC such as minimizing serialization at RSC boundaries, per-request deduplication with React.cache(), avoiding shared module state for request data, and authenticating Server Actions like public API routes.

When should I use Suspense boundaries in Next.js pages?▼

Use Suspense when only part of the page needs async data, so the layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where the overhead is not worthwhile.

Why does my React component re-render too often?▼

Common causes include defining components inside components, missing memoization of expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render optimization rules cover useMemo, useDeferredValue, transitions, and functional setState patterns.

Related Skills

Explore More Software Engineering Skills→
uneezaismailuneezaismail
2

frontend-architect

Architect scalable React UI architectures with TypeScript interfaces and component tests.

Community
Advanced
achmfachmf

performance-profiling

Run Lighthouse audits to analyze Core Web Vitals and rendering bottlenecks.

Community
Intermediate
Pravin-surawasePravin-surawase
5

react-validation

Run build, lint, type-check, and test checks on React frontend changes.

Community
Intermediate
oakossoakoss
14

astro

Create content-driven websites with Astro content collections and island architecture.

Official
Intermediate