skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

vercel-react-best-practices

Applies Vercel's performance optimization rules when writing, reviewing, or refactoring React and Next.js code.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React and Next.js codebases often suffer from performance issues like data-fetching waterfalls, bloated bundles, unnecessary re-renders, and inefficient server-side patterns. This Skill provides a structured, impact-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 - 70 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 with an impact level from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete TypeScript/TSX examples showing the wrong pattern and the optimized pattern, with explanations and impact metrics. - Use Case: When refactoring a Next.js page that sequentially awaits multiple fetches, apply the async rules to parallelize independent operations with Promise.all() and add Suspense boundaries so the layout renders immediately while data streams in. ## Quick Start Ask the AI to review your React component or Next.js page against the Vercel React best practices rules and suggest performance improvements.

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 better-all or chain promises, and use Suspense boundaries so layout renders while data streams in.

How to reduce bundle size from barrel file imports in React?▼

Avoid importing from barrel files like 'lucide-react' or '@mui/material' entry points, which can load thousands of modules. In Next.js 13.5+, use optimizePackageImports; otherwise import directly from subpaths like '@mui/material/Button'.

Does this guide cover Next.js Server Actions security?▼

Yes. The server-auth-actions rule requires authenticating and authorizing inside every Server Action, treating them as public endpoints. It also covers input validation with zod before performing mutations.

When should I use useMemo and useCallback in React?▼

The rules recommend avoiding useMemo for simple primitive expressions, extracting expensive work into memoized components, and hoisting default non-primitive props to constants. Use useDeferredValue or startTransition for expensive derived renders instead.

What are the limitations of these React performance rules?▼

Some rules have explicit exceptions: Suspense boundaries are not recommended for SEO-critical above-the-fold content or when layout shift must be avoided, and derived RSC props are acceptable when transformation is expensive. Each rule documents when not to apply it.

Related Skills

Explore More Software Engineering Skills→
daudaudinangdaudaudinang

vercel-react-best-practices

Codify 57 React and Next.js performance rules across 8 categories.

Community
Advanced
DanialHaseebDanialHaseeb

optimize

Diagnose and fix UI performance issues across loading, rendering, animations, images, and bundle size.

Community
Advanced
outcomeengineeringoutcomeengineering
1

standardizing-typescript

Enforces TypeScript code standards via strict mode, ESLint rules, and review guidelines.

Official
Intermediate
zacharyr0thzacharyr0th

next-data-rendering

Configure Next.js rendering strategies for SSG, SSR, ISR, and CSR.

Community
Advanced