Can it help with slow React components?

Yes, it identifies common re-render issues and suggests memoization, state restructuring, or lazy initialization to improve client-side responsiveness.

How does this skill improve Next.js performance?

It applies 45 prioritized rules from Vercel Engineering to optimize data fetching, server-side rendering, and bundle sizes within your Next.js application.

Is this skill specific to Vercel deployments?

While the rules are curated by Vercel Engineering, the React and Next.js patterns are universal best practices applicable to any hosting environment.

Does it handle async waterfalls?

Yes, it includes critical rules for parallelizing independent operations and strategically moving await calls to prevent blocking the execution thread.

React Performance Best Practices

Name: React Performance Best Practices
Author: vaayne

byvaayne

•

開発者ツール

Optimizes React and Next.js applications using Vercel Engineering's performance guidelines and standardized implementation patterns.

概要

This skill integrates Vercel Engineering’s comprehensive performance optimization guidelines directly into Claude’s coding workflow. It provides 45 prioritized rules covering critical areas such as eliminating async waterfalls, bundle size reduction, and server-side performance. Whether refactoring legacy code or building new Next.js pages, this skill ensures that React applications follow industry-standard patterns for speed, efficiency, and scalability, helping developers maintain high-performance benchmarks automatically.

主な機能

Reduces bundle sizes through dynamic imports and barrel file optimization
Improves rendering efficiency with content-visibility and SVG precision rules
Optimizes component re-renders using memoization and stable dependencies
Enhances server-side performance with React cache and serialization patterns
Eliminates async waterfalls with parallel fetching and deferred await strategies
21 GitHub stars

ユースケース

Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores
Implementing high-performance data fetching patterns in new production-grade applications
Automating code reviews to identify and fix performance bottlenecks in React components

概要

主な機能

Reduces bundle sizes through dynamic imports and barrel file optimization
Improves rendering efficiency with content-visibility and SVG precision rules
Optimizes component re-renders using memoization and stable dependencies
Enhances server-side performance with React cache and serialization patterns
Eliminates async waterfalls with parallel fetching and deferred await strategies
21 GitHub stars

ユースケース

Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores
Implementing high-performance data fetching patterns in new production-grade applications
Automating code reviews to identify and fix performance bottlenecks in React components