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

•

Developer Tools

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

About

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.

Key Features

Provides impact-based prioritization for performance issues from Critical to Low
Optimizes JavaScript bundle size by flagging inefficient barrel file imports
Identifies and eliminates asynchronous waterfalls via parallel execution patterns
Detects and fixes redundant re-renders and stale closures in state updates
Analyzes React Server Components for serialization and prop-drilling efficiency
1 GitHub stars

Use Cases

Refactoring legacy React components to use modern, optimized rendering patterns
Enforcing high-performance coding standards during automated pull request reviews
Performing automated performance audits on existing Next.js projects

About

Key Features

Provides impact-based prioritization for performance issues from Critical to Low
Optimizes JavaScript bundle size by flagging inefficient barrel file imports
Identifies and eliminates asynchronous waterfalls via parallel execution patterns
Detects and fixes redundant re-renders and stale closures in state updates
Analyzes React Server Components for serialization and prop-drilling efficiency
1 GitHub stars

Use Cases

Refactoring legacy React components to use modern, optimized rendering patterns
Enforcing high-performance coding standards during automated pull request reviews
Performing automated performance audits on existing Next.js projects