When should I trigger this skill?

Use it during code reviews, when writing new components, or when refactoring existing logic to improve performance metrics.

How does this skill improve Next.js performance?

It applies specific rules to eliminate waterfalls, optimize server-side caching, and reduce the amount of data serialized for client components.

Who maintained these guidelines?

These guidelines are derived from Vercel Engineering's internal best practices for building high-performance web applications.

Can it help with slow React components?

Yes, it identifies unnecessary re-renders and suggests optimizations like memoization, hoisting static JSX, and using stable callbacks.

Does it support bundle size reduction?

Absolutely. It includes rules for dynamic imports, avoiding barrel files, and deferring third-party scripts to keep your application lean.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: guaderrama

byguaderrama

0•

生産性とワークフロー

Optimizes React and Next.js applications using performance guidelines and automated refactoring patterns from Vercel Engineering.

This skill provides a comprehensive framework of 57 prioritized rules for enhancing the performance of React and Next.js applications. It empowers Claude to identify and resolve critical bottlenecks like request waterfalls and bloated bundle sizes while improving server-side efficiency and client-side rendering. Whether you are building new components from scratch or refactoring legacy codebases, this skill ensures your project adheres to industry-leading standards for speed, scalability, and optimal user experience as defined by Vercel's engineering team.

主な機能

01Eliminates asynchronous request waterfalls to significantly improve page load times.

02Reduces bundle sizes through dynamic imports and barrel file optimization.

03Optimizes re-rendering patterns to maintain smooth and responsive UI interactions.

04Enhances server-side performance using React cache and data serialization techniques.

05Implements advanced patterns for state management and DOM efficiency.

060 GitHub stars

ユースケース

01Refactoring existing Next.js pages to achieve better Core Web Vitals scores.

02Writing high-performance React components with optimized rendering logic.

03Reviewing codebases for performance anti-patterns and bundle size regressions.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add guaderrama/cabo-health-ai react-best-practices

For use in Claude.ai and ChatGPT

Download Skill