vercel-react-best-practices

Apply 58 React and Next.js performance rules across 8 categories.

2|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/alanharrryy-wq/hitech-os --skill vercel-react-best-practices-alanharrryy-wq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/alanharrryy-wq/hitech-os/tree/main/.agents/skills/B_worker/vercel-react-best-practices
Command: npx skills add https://github.com/alanharrryy-wq/hitech-os --skill vercel-react-best-practices-alanharrryy-wq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices consolidates performance optimization guidelines for React and Next.js to help teams write and review code that performs efficiently; it provides actionable patterns to identify bottlenecks and enforce consistent performance standards.

Core Features & Use Cases

  • 58 rules across 8 categories (Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, Advanced Patterns) that guide automated refactoring and code generation.
  • Concrete examples, explanations, and guardrails to support automated tooling, reviews, and code-generation workflows.
  • Use cases include writing new components, reviewing existing code, refactoring pages or data-fetching strategies, and optimizing bundles to improve startup time and runtime responsiveness.

Quick Start

Review a React or Next.js code path and apply the guidelines to optimize performance.

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 when refactoring components?▼

Optimize React and Next.js performance by applying categorized rules for eliminating data waterfalls, bundle size reduction, and re-render optimization with actionable guidance and concrete code examples.

What is the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size using targeted optimization rules that identify bottlenecks and enforce consistent performance standards, providing concrete examples to support automated refactoring workflows.

How do I eliminate data fetching waterfalls in Next.js pages?▼

Eliminate data fetching waterfalls in Next.js pages by applying specific server-side and client-side data fetching patterns, categorizing rules by priority to guide automated code generation and reviews.

Can I use these React performance patterns for automated code reviews?▼

Yes, you can use these 58 React performance patterns for automated code reviews, as they include concrete examples, explanations, and guardrails designed to support automated tooling and refactoring workflows.

How do I fix unnecessary re-renders in React components?▼

Fix unnecessary re-renders in React components by applying rendering performance and re-render optimization rules that provide actionable patterns to identify bottlenecks and enforce consistent standards.

What are the limitations of using rule-based patterns for React performance optimization?▼

Rule-based React performance optimization patterns require categorizing rules by priority and providing concrete examples for automated refactoring, focusing on code generation and review rather than runtime profiling.