skills.rest
chatre7
chatre7COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Provides performance best-practice guidance for React and Next.js projects.

Updated Jan 20, 2026
Search Tags:#performance#refactoring#react#next.js#best-practices#bundle-size
One-click install
npx skills add https://github.com/chatre7/Multi-Agent-Intelligence --skill vercel-react-best-practices-chatre7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/chatre7/Multi-Agent-Intelligence/tree/main/backend/configs/skills/vercel-react-best-practices
Command: npx skills add https://github.com/chatre7/Multi-Agent-Intelligence --skill vercel-react-best-practices-chatre7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js projects often face performance regressions due to suboptimal patterns. This Skill provides a concise, industry-tested set of guidelines to optimize rendering, data fetching, bundle size, and server-client boundaries.

Core Features & Use Cases

  • Zero-overhead best practices for components, pages, and data flows.
  • Guided refactoring patterns to reduce waterfalls, server-client bottlenecks, and bundle bloat.
  • Use-case scenarios such as large data fetches, SSR vs SSG, and incremental hydration.
  • Real-world example: optimizing a Next.js page with Suspense, code-splitting, and Server Components to improve TTI.
  • This section helps teams apply the 8-category guidelines to solve performance issues in their codebase.

Quick Start

Read this skill to improve React/Next.js performance across projects. Then instruct the AI to review a codebase and identify optimization opportunities, focusing on the patterns in this skill.

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 during code reviews?▼

Refactor React and Next.js codebases to reduce bundle bloat by applying category-driven patterns that identify suboptimal components. Use guided refactoring steps to optimize server-client boundaries and eliminate unnecessary dependencies.

What is the best way to reduce data fetching waterfalls in Next.js?▼

Reduce data fetching waterfalls in Next.js by applying guided refactoring patterns that optimize server-client boundaries. Restructure sequential data flows into parallel fetches using category-driven guidelines to eliminate rendering bottlenecks.

How do I use Server Components and Suspense to improve Next.js Time to Interactive?▼

Improve Next.js Time to Interactive by combining Server Components, Suspense, and code-splitting to optimize incremental hydration. Apply concrete optimization examples to reduce TTI and enhance rendering performance across pages.

Can I use these React best practices for both SSR and SSG implementations?▼

Yes, these React best practices apply to both SSR and SSG implementations in Next.js. The Skill provides use-case scenarios for large data fetches and incremental hydration across different rendering strategies to guide optimization.

Why does my Next.js bundle size keep growing and how do I refactor it?▼

Your Next.js bundle size grows due to suboptimal patterns and bundle bloat from unoptimized server-client boundaries. Refactor by applying category-driven guidelines to identify code-splitting opportunities and eliminate unnecessary client-side code.

When should I not use incremental hydration in React?▼

Avoid incremental hydration in React when components require immediate interactivity or when server-client boundaries cannot be cleanly separated. This Skill outlines scenarios where standard SSR or SSG patterns are more appropriate than complex hydration optimizations.

Related Skills

Explore More Software Engineering Skills→
Omar-ObandoOmar-Obando
44

performance

Profile application layers and validate optimizations with before/after benchmarks.

Community
Intermediate
AngelP17AngelP17
1

vercel-react-best-practices

Apply React and Next.js performance best practices during code review.

Community
Intermediate
purrgrammerpurrgrammer
38

react

Guide React 19 server components, hooks, and server actions with TypeScript.

Community
Advanced
pascallammerspascallammers
1

performance-optimization

Optimize application performance through code splitting, lazy loading, and caching strategies.

Community
Advanced