React Best Practices by Vercel

概要

This skill integrates Vercel's comprehensive performance optimization guide directly into Claude Code, providing automated guidance for React and Next.js development. It enforces 45 specialized rules across eight critical categories, including waterfall elimination, bundle size reduction, and server-side performance. By applying these patterns during code generation and refactoring, the skill helps developers minimize re-renders, optimize data fetching strategies, and ensure production-grade performance standards are met without manual auditing.

主な機能

• Automates bundle size reduction via dynamic imports and tree-shaking optimization
• Optimizes server-side performance using React.cache and non-blocking operations
• Reduces client-side re-renders through stable state management and memoization
• Eliminates network waterfalls through parallel fetching and deferred awaits
• Improves JavaScript execution speed with optimized DOM interactions and caching
• 0 GitHub stars

ユースケース

• Conducting automated performance audits and bundle size optimizations
• Implementing efficient data fetching patterns in Next.js App Router projects
• Refactoring existing React components to improve Core Web Vitals