vercel-react-best-practices

Apply React and Next.js performance best practices to writing, reviewing, and refactoring code.

Updated Feb 26, 2026
One-click install
npx skills add https://github.com/citywalki/ams-ai --skill vercel-react-best-practices-citywalki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/citywalki/ams-ai/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/citywalki/ams-ai --skill vercel-react-best-practices-citywalki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often accumulate performance pitfalls across components, routing, data fetching, and bundle sizes. This Skill provides a centralized, maintainable set of guidelines to drive consistent performance improvements across teams.

Core Features & Use Cases

  • Comprehensive rules spanning eight priority areas: Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Guidance for code reviews and automated refactoring to reduce bundle sizes, optimize data loading, and improve time to interactive (TTI) and user experience.
  • Use during development, code reviews, and CI to enforce performance-oriented patterns across large React/Next.js codebases.

Quick Start

Begin applying the guidelines during component design and code reviews to enforce performance-oriented patterns.

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?▼

To optimize React and Next.js performance during code reviews, apply structured best-practices across eight priority areas including bundle size optimization, server-side performance, and re-render optimization to reduce time to interactive.

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

The best practices for reducing bundle size in Next.js applications involve applying code-splitting tasks and bundle size optimization guidelines during component design and refactoring to eliminate unnecessary JavaScript payloads.

How does eliminating data fetching waterfalls improve React performance?▼

Eliminating data fetching waterfalls improves React performance by restructuring client-side and server-side data loading patterns to prevent sequential network requests, directly reducing time to interactive and enhancing user experience.

Can I use these React performance guidelines for refactoring existing components?▼

Yes, you can use these React performance guidelines for refactoring existing components by applying advanced patterns and re-render optimization rules to systematically improve rendering and JavaScript performance.

When do I need re-render optimization in React components?▼

You need re-render optimization in React components when performance pitfalls accumulate across rendering layers, requiring structured guidelines to enforce performance-oriented patterns during development and automated refactoring.

What's the best way to enforce performance-oriented patterns across large React codebases?▼

The best way to enforce performance-oriented patterns across large React codebases is to apply centralized best-practice guidelines spanning server-side performance and client-side data fetching during development, code reviews, and CI integration.