skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

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

Updated Sep 15, 2026
Search Tags:#code review#performance#react#optimization#bundle size#nextjs#waterfalls
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill react-best-practices-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28quality%29/react-best-practices
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill react-best-practices-peterson-benhame

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. This Skill gives AI agents a structured, prioritized rulebook of 57 performance guidelines from Vercel Engineering so generated and refactored code follows proven optimization patterns. ## Core Features & Use Cases - Prioritized Rule Catalog: 57 rules across 8 categories ranked by impact, from eliminating async waterfalls (CRITICAL) to advanced hook patterns (LOW). - Incorrect vs. Correct Examples: Every rule includes side-by-side TypeScript/TSX code examples showing the anti-pattern and the optimized implementation. - Use Case: When asked to optimize a slow Next.js page, the agent applies rules like parallelizing fetches with Promise.all(), avoiding barrel file imports, using React.cache() for request deduplication, and minimizing RSC serialization boundaries. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues and apply the relevant optimization rules.

Frequently Asked Questions about 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?▼

Start with the highest-impact rules: eliminate data-fetching waterfalls using Promise.all() and Suspense boundaries, then reduce bundle size by avoiding barrel file imports and using dynamic imports for heavy components. The rules are prioritized from CRITICAL to LOW impact.

What are the most critical Next.js performance rules?▼

The CRITICAL rules cover parallelizing independent async operations, preventing waterfall chains in API routes, avoiding barrel file imports from libraries like lucide-react and MUI, and using next/dynamic for heavy components like Monaco Editor.

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

Yes, many rules specifically target RSC patterns, including minimizing serialization at server/client boundaries, per-request deduplication with React.cache(), parallel data fetching via component composition, and using after() for non-blocking operations.

When should I not use these React optimization rules?▼

Do not use this Skill for component API architecture or composition pattern decisions; that belongs to a separate composition-focused skill. Also skip Suspense boundaries for SEO-critical above-the-fold content or when layout shift must be avoided.

Why do barrel file imports slow down Next.js apps?▼

Barrel files re-export thousands of modules, forcing 200-800ms import costs on every cold start and slowing builds. Import directly from source paths or enable optimizePackageImports in next.config.js for Next.js 13.5 and later.

Related Skills

Explore More Software Engineering Skills→
mikemikulamikemikula
2

nextjs-best-practices

Enforce Next.js 16 App Router best practices for server components, caching, and TypeScript.

Community
Intermediate
ratnesh-mauryaratnesh-maurya
1

web-performance-optimization

Diagnose and optimize website performance including Core Web Vitals, bundle size, and caching.

Community
Intermediate
ZESCODEZESCODE

react-patterns

Standardize React 18 and 19 component composition, state management, and data fetching patterns.

Community
Advanced
clfigueiredoclfigueiredo
5

agent-performance-optimizer

Analyzes code for performance bottlenecks and produces optimization reports with fixes.

Community
Intermediate