skills.rest
usmangurowa
usmangurowaCOMMUNITY
Explore all skills by this author →
Website𝕏@UsmanGurowaGitHub

vercel-react-best-practices

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

Updated Jul 17, 2026
Search Tags:#code review#refactoring#react#data fetching#bundle size#next.js#performance optimization
One-click install
npx skills add https://github.com/usmangurowa/socialmocks --skill vercel-react-best-practices-usmangurowa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/usmangurowa/socialmocks/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/usmangurowa/socialmocks --skill vercel-react-best-practices-usmangurowa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, bloated bundles, and data-fetching waterfalls that are hard to spot during development. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers can consistently generate and refactor performant React/Next.js code. ## Core Features & Use Cases - 57 Prioritized Rules Across 8 Categories: Covers eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns, each tagged by impact level. - Incorrect vs. Correct Code Examples: Every rule includes concrete before/after TypeScript and TSX examples with explanations and impact metrics (e.g., 2-10x improvement from parallelizing fetches). - Modular Rule Files: Individual rule files under rules/ can be read on demand, plus a full compiled AGENTS.md reference document. - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, apply the async-parallel rule to rewrite it with Promise.all() and cut response time from three round trips to one. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues using the Vercel best practices rules.

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 optimize React and Next.js performance with these rules?▼

Reference the rule categories by priority, starting with eliminating waterfalls and bundle size optimization since they have critical impact. Each rule file shows incorrect and correct code examples you can apply directly to components, pages, and API routes.

How to eliminate data fetching waterfalls in Next.js?▼

Use Promise.all() for independent async operations, start promises early and await late in API routes, and use better-all for partial dependencies. Restructuring components with composition also lets Server Components fetch in parallel.

Does this guide work with Next.js App Router and Server Components?▼

Yes, many rules target App Router patterns specifically, including React.cache() for per-request deduplication, minimizing RSC serialization, Server Action authentication, and the after() API for non-blocking operations.

When should I avoid barrel file imports in React?▼

Avoid barrel imports from large libraries like lucide-react or @mui/material, which can load thousands of modules and cost 200-800ms per cold start. Import directly from source files or use Next.js optimizePackageImports instead.

What are the limitations of these performance rules?▼

Some patterns involve trade-offs, such as Suspense boundaries causing layout shift, and rules are prioritized by impact so low-priority ones may not matter for small apps. Rules assume React 19 and Next.js features, so older versions may lack APIs like useEffectEvent or Activity.

Related Skills

Explore More Software Engineering Skills→
bilacchibilacchi

nextjs-app-router-patterns

Implements Next.js App Router patterns including Server Components, Server Actions, and streaming.

Community
Intermediate
TwuanMinnTwuanMinn

web-performance-optimization

Diagnose and fix website performance bottlenecks using Lighthouse and Core Web Vitals.

Community
Intermediate
hivellmhivellm
15

rulebook-typescript

Automates TypeScript project setup with strict mode, Vitest, ESLint, and CI/CD templates.

Official
Intermediate
djankiesdjankies

optimizing-with-react-compiler

Leverage React Compiler to auto-memoize components and guide manual memoization decisions.

Community
Advanced