What frameworks does this skill support?

This skill is specifically designed for React and Next.js applications, covering both Client and Server Components.

How does it help reduce bundle sizes?

It identifies heavy imports that should be loaded dynamically and flags inefficient barrel imports that increase the final JavaScript payload.

Are these guidelines official?

The guidelines are based on performance patterns and best practices documented by Vercel Engineering for high-scale applications.

Can this skill help with Next.js App Router performance?

Yes, it includes specific rules for server-side caching, serialization, and non-blocking operations tailored for the App Router.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: jh941213

byjh941213

•

開発者ツール

Optimizes React and Next.js applications using performance-focused guidelines curated by Vercel Engineering.

This skill integrates Vercel's authoritative performance optimization rules directly into Claude's workflow, enabling the AI to write, review, and refactor React and Next.js code with a focus on speed and efficiency. It provides 45 prioritized rules covering critical areas such as eliminating network waterfalls, minimizing bundle sizes, and optimizing server-side rendering. Whether you are building new components or optimizing existing applications, this skill ensures your code adheres to the high-performance patterns used by Vercel's own engineering teams to achieve optimal Core Web Vitals.

主な機能

01Reduces client-side re-renders by implementing stable callbacks and memoization

02Optimizes bundle sizes through dynamic imports and barrel file elimination

0385 GitHub stars

04Enhances server-side performance via React.cache and data deduplication

05Streamlines JavaScript execution with efficient DOM and loop management patterns

06Eliminates network waterfalls using parallel fetching and Suspense strategies

ユースケース

01Implementing efficient data-fetching patterns for Server Components and SWR

02Conducting automated performance audits on complex React component hierarchies

03Refactoring Next.js pages to improve PageSpeed Insights and Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jh941213/my-claude-code-asset vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill