skills.rest
kaannakiin
kaannakiinCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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 slow server responses. This Skill provides 70 prioritized, example-driven rules from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation, review, and refactoring. ## 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 fix, 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, apply the async-parallel rule to rewrite it with Promise.all(), cutting three network round trips down to one. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React 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 eliminate data fetching waterfalls in Next.js?▼

Start independent async operations immediately and await them together with Promise.all() instead of sequential awaits. For partial dependencies, use better-all or chain promises so each task starts at the earliest possible moment, yielding 2-10x improvements.

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 in next.config.js; otherwise import directly from subpaths like @mui/material/Button.

Does this skill work with Next.js Server Actions and RSC?▼

Yes, it includes server-side rules for React Server Components and Server Actions, covering authentication inside actions, React.cache() deduplication, minimizing RSC serialization, and avoiding shared module state across concurrent requests.

When should I not use Suspense boundaries for data fetching?▼

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when you want to prevent layout shift. The trade-off is faster initial paint versus potential content jumping.

Why do React components re-render unnecessarily?▼

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 rerender- rules provide fixes like functional setState, useDeferredValue, and lazy state initialization.

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
VNFT-GROUPVNFT-GROUP

optimize

Identify web performance bottlenecks and implement fixes for Core Web Vitals.

Official
Advanced
outcomeengineeringoutcomeengineering
1

standardizing-typescript

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

Official
Intermediate
oakossoakoss
14

astro

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

Official
Intermediate