vercel-react-best-practices

Apply prioritized rules to optimize React and Next.js application performance.

Updated Jan 25, 2026

Search Tags:#performance #react #data fetching #optimization #bundle size #rendering #next.js

Ready to run

npx skills add https://github.com/yp717/engagement-party --skill vercel-react-best-practices-yp717

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/yp717/engagement-party/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/yp717/engagement-party --skill vercel-react-best-practices-yp717

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices to significantly improve the performance of React and Next.js applications, addressing critical areas like bundle size, rendering speed, and server-side efficiency.

Core Features & Use Cases

Performance Optimization: Offers over 50 rules categorized by impact (Critical, High, Medium, Low) covering waterfalls, bundle size, server-side rendering, client-side fetching, and re-render optimization.
Code Refactoring Guidance: Provides clear "Incorrect" vs. "Correct" code examples for each rule, enabling developers to easily refactor their code for better performance.
Use Case: A developer is experiencing slow load times in their Next.js application. They can use this Skill to identify and fix performance bottlenecks related to large bundle sizes, inefficient data fetching, or excessive re-renders.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component code for optimal performance.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize React and Next.js application performance?▼

To optimize React and Next.js performance, apply over 50 prioritized rules covering waterfalls, bundle size, server-side rendering, client-side fetching, and re-render optimization. These rules provide incorrect versus correct code examples to guide automated refactoring.

What is the best way to reduce bundle size in a Next.js application?▼

The best way to reduce bundle size in Next.js involves applying specific optimization rules that target JavaScript performance and rendering efficiency. This Skill provides categorized guidelines to identify and refactor code causing large bundle sizes.

How does eliminating waterfalls improve server-side performance in React?▼

Eliminating waterfalls improves server-side performance by preventing sequential data fetching that blocks rendering. This Skill provides rules to refactor client-side fetching and server-side logic for faster load times.

Can I use these React optimization rules for client-side data fetching and re-render issues?▼

Yes, these React optimization rules specifically address client-side data fetching and excessive re-renders. They offer detailed examples to refactor components, ensuring optimal rendering performance and efficient data retrieval.

How to refactor React components to fix slow load times and rendering bottlenecks?▼

To fix slow load times and rendering bottlenecks, refactor React components using the provided incorrect versus correct code examples. This Skill guides code generation to resolve performance issues related to bundle size and inefficient rendering.

Do I need prior knowledge of advanced patterns to use these Next.js performance guidelines?▼

No prior knowledge of advanced patterns is required, as the guidelines offer clear incorrect versus correct code examples for each rule. Developers can directly apply these prioritized rules to refactor code and achieve optimal performance.