Can I use this for Next.js App Router projects?

Yes, it contains specific guidelines for Next.js, including server-side caching, serialization, and using Suspense boundaries for streaming content.

Does it provide specific code examples for refactoring?

Yes, the skill includes detailed 'incorrect' vs 'correct' code examples for each rule to guide the AI and developer through the optimization process.

What kind of 'waterfalls' does this skill help eliminate?

It focuses on async request waterfalls where data fetching is serial instead of parallel, providing patterns like Promise.all() and early promise initiation.

How does this skill improve React application performance?

It applies 45 specific rules from Vercel Engineering, covering everything from eliminating async waterfalls to optimizing JavaScript execution and reducing bundle sizes.

React Performance & Best Practices

Name: React Performance & Best Practices
Author: CarlosVerasteguii

byCarlosVerasteguii

0•

Developer Tools

Optimizes React and Next.js applications using Vercel Engineering's authoritative performance-focused guidelines and rules.

This skill integrates Vercel's comprehensive performance optimization framework into Claude, providing 45 specialized rules for React and Next.js development. It covers critical architectural areas such as eliminating request waterfalls, bundle size optimization, and server-side performance enhancements. By applying these industry-standard patterns, the skill helps developers proactively identify and fix performance bottlenecks during the coding, review, and refactoring phases, ensuring that web applications remain fast, scalable, and provide a superior user experience.

Key Features

01Eliminates request waterfalls with advanced async and parallel fetching patterns.

02Optimizes client-side rendering and re-rendering to ensure smooth UI transitions.

03Enhances server-side performance through request deduplication and efficient caching.

040 GitHub stars

05Implements 45 high-impact performance rules across 8 prioritized categories.

06Reduces bundle sizes by optimizing imports and implementing dynamic loading strategies.

Use Cases

01Optimizing large application bundles by identifying and replacing inefficient barrel imports.

02Refactoring existing Next.js pages to improve Core Web Vitals and PageSpeed scores.

03Automating code reviews to ensure React components adhere to Vercel's engineering standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add carlosverasteguii/daticket react-best-practices

For use in Claude.ai and ChatGPT

Download Skill