Does it support Next.js App Router features?

Yes, it includes specific guidelines for modern Next.js features like Server Components, Suspense, and React Server Functions.

What does this skill help with?

It provides 45 prioritized rules to optimize React and Next.js performance, covering everything from bundle size to server-side rendering and async waterfalls.

Can it help reduce bundle sizes?

Yes, it provides specific rules for dynamic imports, avoiding barrel files, and deferring third-party scripts to improve hydration and load times.

How do I trigger these guidelines?

This skill triggers automatically during tasks involving React components, Next.js pages, data fetching, or performance-related refactoring.

Are the rules prioritized by impact?

Yes, rules are categorized into 8 levels of impact, ranging from 'Critical' (async waterfalls and bundle size) to 'Advanced' low-impact patterns.

Vercel React Performance Best Practices

Name: Vercel React Performance Best Practices
Author: ycluis

byycluis

0•

Developer Tools

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

This skill provides a comprehensive suite of 45 performance optimization rules specifically tailored for React and Next.js environments. Developed based on Vercel Engineering's best practices, it assists developers in eliminating asynchronous waterfalls, reducing bundle sizes, and optimizing server-side rendering. Whether you are refactoring legacy code or building new features, this skill ensures your application adheres to critical performance standards across data fetching, rendering, and JavaScript execution to ensure optimal Core Web Vitals and user experience.

Key Features

01Advanced JavaScript performance tuning for DOM and data operations

02Fine-grained re-render control and memoization patterns

03Waterfall elimination strategies using parallel fetching and Suspense boundaries

040 GitHub stars

05Server-side optimization using React.cache and non-blocking operations

06Bundle size reduction via dynamic imports and barrel file management

Use Cases

01Refactoring Next.js applications to improve Core Web Vitals and load speeds

02Conducting automated performance audits during code reviews

03Scaffolding new React components with optimized data fetching logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ycluis/dotfiles vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill