How does this skill handle Next.js App Router features?

It includes specific guidelines for Server Components, Server Actions, Suspense boundaries, and the use of the 'after()' function for non-blocking operations.

Can this skill help reduce my application's bundle size?

Yes, it provides rules for identifying barrel imports, implementing dynamic imports, and deferring third-party scripts to improve hydration speed.

What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that applies 57 performance rules from Vercel Engineering to optimize React and Next.js codebases.

Does it provide guidance on data fetching?

Absolutely. It covers eliminating waterfalls with Promise.all(), deduplicating requests with SWR, and optimizing both client and server-side data flows.

Vercel React Performance Best Practices

Name: Vercel React Performance Best Practices
Author: yuribodo

byyuribodo

•

開発者ツール

Optimizes React and Next.js applications using industry-standard performance patterns and Vercel Engineering guidelines.

This skill provides a comprehensive suite of 57 performance optimization rules designed specifically for React and Next.js environments. By integrating Vercel's engineering standards directly into your development workflow, it helps developers eliminate async waterfalls, reduce bundle sizes, and optimize server-side rendering. Whether you are refactoring legacy components or building new features, this skill acts as an automated performance consultant to ensure your application remains fast, scalable, and efficient through prioritized rules ranging from critical bundle optimizations to advanced JavaScript patterns.

主な機能

01Eliminates asynchronous waterfalls using parallel fetching and Suspense patterns

02Enhances server-side performance via React.cache and efficient serialization

03Implements advanced rendering techniques like content-visibility and SVG precision

04Reduces unnecessary re-renders with memoization and derived state strategies

052 GitHub stars

06Optimizes bundle sizes through dynamic imports and barrel file management

ユースケース

01Implementing high-performance data fetching patterns for complex dashboard applications

02Conducting automated code reviews to identify performance bottlenecks in React components

03Refactoring large Next.js applications to improve Core Web Vitals and load times

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yuribodo/givememoney-front vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill