Does it support the Next.js App Router?

Yes, it includes specific guidelines for React Server Components (RSC), Server Actions, and modern data fetching patterns like Suspense.

Can I use this for existing React projects?

Yes, the skill is designed for writing new code, reviewing existing components, and refactoring legacy code for better performance.

How does this skill improve Next.js performance?

It applies 57 specific rules curated by Vercel Engineering to eliminate waterfalls, optimize bundle sizes, and improve server-side rendering efficiency.

What is the impact of these rules on my application?

Rules are prioritized from 'Critical' to 'Low', targeting the most significant bottlenecks first, such as network blocking and large bundle sizes.

Vercel React Performance Best Practices

Name: Vercel React Performance Best Practices
Author: flosrn

byflosrn

0•

云基础设施

Optimizes React and Next.js applications using 57 high-impact performance rules curated by Vercel Engineering.

This skill integrates Vercel's comprehensive performance optimization guide directly into Claude's workflow, enabling automated refactoring and code generation aligned with industry-leading standards. It covers critical areas such as eliminating network waterfalls, reducing bundle sizes, and optimizing server-side rendering to ensure Next.js and React applications are fast, efficient, and scalable. By providing prioritized rules across eight categories, it helps developers identify and resolve bottlenecks in data fetching, component re-rendering, and JavaScript execution patterns.

主要功能

01Improves JavaScript execution efficiency using specialized Map/Set lookups

02Enhances server-side performance using React cache and RSC serialization

03Minimizes client-side re-renders with memoization and derived state patterns

040 GitHub stars

05Eliminates network waterfalls with parallel data fetching strategies

06Optimizes bundle sizes through dynamic imports and barrel file removal

使用场景

01Refactoring legacy React components to improve Core Web Vitals

02Implementing efficient data fetching patterns in Next.js App Router

03Conducting automated performance-focused code reviews for pull requests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flosrn/.claude vercel-react-best-practices

For use in Claude.ai and ChatGPT

主要功能

01Improves JavaScript execution efficiency using specialized Map/Set lookups

02Enhances server-side performance using React cache and RSC serialization

03Minimizes client-side re-renders with memoization and derived state patterns

040 GitHub stars

05Eliminates network waterfalls with parallel data fetching strategies

06Optimizes bundle sizes through dynamic imports and barrel file removal

使用场景

01Refactoring legacy React components to improve Core Web Vitals

02Implementing efficient data fetching patterns in Next.js App Router

03Conducting automated performance-focused code reviews for pull requests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flosrn/.claude vercel-react-best-practices

For use in Claude.ai and ChatGPT