skills.rest
abereghici
abereghiciCOMMUNITY
Explore all skills by this author →
Website𝕏@alexandrubrgGitHub

vercel-react-best-practices

Apply React/Next.js performance rules to reduce waterfalls and optimize bundles.

Updated Apr 2, 2026
Search Tags:#performance#refactoring#react#optimization#nextjs#best-practices#code-review
One-click install
npx skills add https://github.com/abereghici/skills --skill vercel-react-best-practices-abereghici
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/abereghici/skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/abereghici/skills --skill vercel-react-best-practices-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This knowledge base codifies React and Next.js performance guidelines to help teams ship faster, maintainable, high-quality code.

Core Features & Use Cases

  • Category-based rules covering Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Guidelines for safe refactoring, thorough code reviews, and automated code generation across projects.
  • Real-world use: enforce patterns that reduce waterfalls in API routes, shrink bundles, and enable effective Suspense boundaries during data loading.

Quick Start

Review existing React/Next.js code against the 69 rules and integrate applicable patterns into your workflow.

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 performance and eliminate data fetching waterfalls?▼

Optimizing React performance involves applying a catalog of rules covering waterfall elimination, bundle size reduction, and re-render optimization. You can enforce these patterns across your codebase to reduce API waterfalls and enable effective Suspense boundaries.

What are the best practices for reducing Next.js bundle size?▼

Next.js bundle size optimization requires applying category-based rules that target bundle shrinking and server-side performance. This includes enforcing specific patterns for server/client component separation and safe refactoring to ship faster, maintainable code.

How do I review React code for performance issues and re-render optimization?▼

Reviewing React code for performance issues involves checking existing code against a catalog of 69 rules spanning re-render optimization, rendering performance, and JavaScript performance. This guides thorough code reviews and identifies safe refactoring opportunities.

Does this React optimization guidance work for existing Next.js pages?▼

Yes, this React optimization guidance is applicable to existing Next.js pages, new components, data fetching, and bundle optimization. It enforces rules across server/client patterns to guide automated refactoring and code generation in current codebases.

When do I need Suspense boundaries for React data loading?▼

You need Suspense boundaries for React data loading when eliminating API waterfalls and managing client-side data fetching. Applying these performance patterns enables effective Suspense boundaries during data loading to maintain responsive rendering.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

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

Community
Advanced
createdbysaltcreatedbysalt

vercel-react-best-practices

Apply React and Next.js performance patterns to optimize rendering and data fetching.

Community
Basic
p-potvinp-potvin
1

vercel-react-best-practices

Review React and Next.js code for performance bottlenecks and bundle size.

Community
Intermediate
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced