How does this skill improve Next.js performance?

The skill applies 45 specific rules across categories like bundle optimization and waterfall elimination to ensure your Next.js application follows Vercel's high-performance architectural standards.

Does it support Server Components and Server Actions?

Absolutely. It includes rules for server-side deduplication using React.cache(), parallel fetching, and non-blocking operations using the after() function.

Is this useful for standard React projects without Next.js?

While many rules target Next.js specifically, many of the categories—such as Re-render Optimization and JavaScript Performance—are highly beneficial for any React-based project.

Can this skill help reduce my bundle size?

Yes, it provides specific guidance on avoiding barrel imports, implementing next/dynamic for heavy components, and conditional loading of third-party scripts.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: lev-os

bylev-os

•

Developer Tools

Optimizes React and Next.js applications using Vercel Engineering's high-performance coding standards and architectural patterns.

This skill provides a comprehensive suite of 45 prioritized rules designed to maximize the performance of React and Next.js applications. By implementing Vercel Engineering's internal best practices, it helps developers eliminate network waterfalls, optimize bundle sizes through dynamic imports, and implement advanced server-side caching. Whether you are building new components from scratch or refactoring legacy codebases, this skill acts as an automated performance architect to ensure your web applications achieve optimal Core Web Vitals and efficient resource utilization.

Key Features

01Optimizes bundle size via dynamic imports and barrel file elimination

021 GitHub stars

03Enhances rendering performance using content-visibility and SVG precision optimization

04Implements advanced server-side performance patterns like React.cache and LRU

05Eliminates network waterfalls using parallel fetching and Suspense boundaries

06Reduces client-side re-renders with specialized memoization and state management

Use Cases

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

02Reviewing complex React components to minimize unnecessary re-renders and memory leaks

03Designing efficient data fetching architectures for high-traffic server-side rendered applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents vercel-react-best-practices

For use in Claude.ai and ChatGPT

Key Features

01Optimizes bundle size via dynamic imports and barrel file elimination

021 GitHub stars

03Enhances rendering performance using content-visibility and SVG precision optimization

04Implements advanced server-side performance patterns like React.cache and LRU

05Eliminates network waterfalls using parallel fetching and Suspense boundaries

06Reduces client-side re-renders with specialized memoization and state management

Use Cases

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

02Reviewing complex React components to minimize unnecessary re-renders and memory leaks

03Designing efficient data fetching architectures for high-traffic server-side rendered applications