Does this skill support Next.js App Router and Server Components?

Yes, it includes specific categories for Server-Side Performance and RSC optimization, focusing on minimizing serialization and improving server response times.

How do I run a performance check on my React files?

You can use the command `/check --react [file-path]` for specific files or `/check --react --perf` for a focused performance analysis.

How does it help with bundle size optimization?

It identifies 'Barrel Files' and heavy library imports, suggesting direct import paths to ensure tree-shaking works effectively and reduces the final JS payload.

Can it help me fix 'waterfall' loading issues?

Absolutely. The skill detects sequential await patterns and recommends parallel execution using Promise.all to eliminate data fetching waterfalls.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: garimto81

bygarimto81

•

開発者ツール

Optimizes React and Next.js applications using 49 performance rules and impact-based priorities derived from Vercel Engineering standards.

This skill implements Vercel Engineering's comprehensive guide for React and Next.js performance optimization directly within your development workflow. It empowers Claude to identify and resolve critical performance bottlenecks such as asynchronous waterfalls, excessive bundle sizes, and inefficient server component serialization. By integrating these rules into code reviews and active development, the skill ensures that frontend applications remain fast, scalable, and aligned with modern React architectural patterns like Server Components (RSC) and parallel data fetching.

主な機能

01Provides impact-based prioritization for performance issues from Critical to Low

02Optimizes JavaScript bundle size by flagging inefficient barrel file imports

03Identifies and eliminates asynchronous waterfalls via parallel execution patterns

04Detects and fixes redundant re-renders and stale closures in state updates

05Analyzes React Server Components for serialization and prop-drilling efficiency

061 GitHub stars

ユースケース

01Refactoring legacy React components to use modern, optimized rendering patterns

02Enforcing high-performance coding standards during automated pull request reviews

03Performing automated performance audits on existing Next.js projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add garimto81/claude vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill