What is the React-Review Claude Code skill?

It is a specialized capability that enables Claude to analyze React and Next.js code using a set of 45+ performance-focused rules established by Vercel Engineering.

Can it reduce my application's bundle size?

Yes, it specifically checks for barrel import issues, recommends dynamic imports for heavy components, and identifies third-party scripts that should be deferred.

Does it provide code examples for fixes?

While the skill identifies issues based on specific rule IDs, it uses the underlying documentation to suggest precise code transformations for optimization.

How does it help with Next.js performance?

The skill identifies common bottlenecks like async waterfalls, suggests the use of Suspense boundaries for streaming, and optimizes server-side vs. client-side data fetching.

React Performance Reviewer

Name: React Performance Reviewer
Author: gricha

bygricha

•

開発者ツール

Optimizes React and Next.js applications using Vercel Engineering's production-grade performance guidelines and best practices.

The React Performance Reviewer skill equips Claude with a comprehensive framework for auditing and improving React and Next.js codebases. Drawing from over 45 specific rules curated by Vercel Engineering, this skill focuses on critical performance vectors including network waterfall elimination, bundle size reduction, and re-render optimization. It allows developers to identify anti-patterns like inefficient barrel imports or unnecessary state initializations, providing actionable suggestions to implement high-performance patterns like Suspense boundaries, dynamic imports, and stable functional state updates.

主な機能

01Bundle size optimization through dynamic import and barrel file analysis

02Comprehensive audit of React and Next.js code against 45+ Vercel-standard rules

03Identification and elimination of async waterfalls using parallelized promises

0431 GitHub stars

05Guidance on modern rendering patterns including Suspense and streaming

06Advanced re-render detection for memoization and state stability improvements

ユースケース

01Refactoring legacy React components to meet modern Core Web Vitals standards

02Optimizing Next.js data fetching strategies to reduce server-side latency

03Conducting automated performance audits during the code review process

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gricha/perry react-review

For use in Claude.ai and ChatGPT

Download Skill