Which frameworks does this skill support?

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

Is this skill useful for existing projects?

Absolutely. It is highly effective for refactoring existing codebases to improve performance, hydration speed, and overall code quality.

Are these rules based on official standards?

Yes, these rules are derived from performance optimization guidelines maintained by Vercel Engineering.

Can this skill help reduce my JavaScript bundle size?

Yes, it includes strategies for eliminating barrel imports, implementing dynamic imports for heavy components, and deferring third-party scripts.

How does it help with network waterfalls?

It provides rules like 'async-parallel' and 'async-suspense-boundaries' to ensure independent data requests happen concurrently rather than sequentially.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: claudiodearaujo

byclaudiodearaujo

•

デザインツール

Optimizes React and Next.js applications using performance-driven guidelines and patterns from Vercel Engineering.

This skill provides a comprehensive framework for applying high-performance React and Next.js patterns directly to your codebase. It encompasses 45 specialized rules across 8 critical categories, including waterfall elimination, bundle size reduction, and server-side optimization. Whether you are building new components or refactoring legacy code, this skill ensures your application adheres to the same performance standards used by Vercel's engineering teams to achieve optimal Core Web Vitals and seamless user experiences.

主な機能

01Improves server-side efficiency with React.cache() and non-blocking operations

02Optimizes rendering performance via content-visibility and SVG precision tuning

03Minimizes client-side re-renders using memoization and stable callback patterns

04Eliminates network waterfalls using parallel data fetching and Suspense boundaries

051 GitHub stars

06Reduces bundle size through dynamic imports and barrel file optimization

ユースケース

01Refactoring Next.js App Router components for maximum server-side performance

02Auditing React projects to identify and fix bundle size bottlenecks

03Automating code reviews to enforce Vercel-standard performance patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro react-best-practices

For use in Claude.ai and ChatGPT

Download Skill