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

•

Developer Tools

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.

Key Features

01Reduces bundle sizes through dynamic imports and barrel file optimization

02Improves rendering efficiency with content-visibility and SVG precision rules

03Optimizes component re-renders using memoization and stable dependencies

04Enhances server-side performance with React cache and serialization patterns

05Eliminates async waterfalls with parallel fetching and deferred await strategies

0621 GitHub stars

Use Cases

01Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores

02Implementing high-performance data fetching patterns in new production-grade applications

03Automating code reviews to identify and fix performance bottlenecks in React components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vaayne/agent-kit react-best-practices

For use in Claude.ai and ChatGPT

Download Skill