vercel-react-best-practices

name	vercel-react-best-practices
description	React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license	MIT
metadata	{"author":"vercel","version":"1.0.0"}

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

🎯 Token Budget Guide

Quick tasks (40-100 tokens):

• Top 10 patterns → quick-ref/performance-top10.md
• Common optimization → quick-ref/performance-top10.md

Medium tasks (300-600 tokens):

• Specific optimization area → Load relevant section from AGENTS.md
• Fix slow rendering → Sections 5-6 (Re-render, Rendering)
• Fix slow load → Sections 1-2 (Waterfalls, Bundle)

Complex tasks (800-1500 tokens):

• Full performance audit → AGENTS.md (comprehensive guide)
• Architecture optimization → Multiple sections from AGENTS.md