Optimizes React and Next.js application performance using 57 high-impact engineering rules curated by Vercel.
This skill integrates Vercel’s comprehensive performance optimization guidelines directly into Claude Code, providing expert-level guidance for building fast, scalable React and Next.js applications. It automates the application of industry-leading patterns for eliminating data-fetching waterfalls, reducing bundle sizes, and optimizing server-side rendering. By categorizing rules by impact—from critical waterfall fixes to advanced re-render optimizations—it ensures that Claude provides actionable, prioritized advice during component creation, code reviews, or complex refactoring tasks.
主な機能
01Minimizes client-side re-renders with memoization and state-management best practices.
02Eliminates data-fetching waterfalls using parallelization and Suspense boundaries.
03Reduces JavaScript bundle size via dynamic imports and barrel file optimization.
04Improves core JavaScript execution speed using optimized lookup and loop patterns.
050 GitHub stars
06Enhances server-side performance through React cache and efficient serialization.
ユースケース
01Implementing complex data-fetching logic that requires parallel execution and request deduplication.
02Automating code reviews to identify performance bottlenecks in React component hierarchies.
03Refactoring existing Next.js pages to improve Core Web Vitals and PageSpeed Insights scores.
