React & Next.js Performance Optimizer

概要

This Claude Code Skill integrates a comprehensive suite of performance optimization guidelines maintained by Vercel, specifically designed for the React and Next.js ecosystems. It empowers developers to automate the detection and refactoring of common bottlenecks such as network waterfalls, bloated bundle sizes, and unnecessary re-renders. By applying 45 prioritized rules across categories like server-side performance and JavaScript efficiency, the skill ensures that production-grade code remains fast, scalable, and aligned with industry-leading standards established by the creators of Next.js.

主な機能

• Prevents expensive re-renders with memoization and state management best practices.
• Eliminates async waterfalls using parallel fetching and streaming patterns.
• Optimizes server-side rendering and client-side data fetching strategies.
• Implements 45 prioritized rules for React and Next.js performance optimization.
• Reduces bundle sizes through dynamic imports and barrel file removal.
• 0 GitHub stars

ユースケース

• Optimizing JavaScript bundle sizes and data-fetching logic during initial development.
• Conducting automated code reviews for performance-sensitive Next.js applications.
• Refactoring existing React components to improve Core Web Vitals and load times.