vercel-react-best-practices

Apply React and Next.js performance best practices to codebases.

Updated Feb 7, 2026

Search Tags:#performance #react #rendering #nextjs #bundling #server-actions

Ready to run

npx skills add https://github.com/1wos/sdkhackthon --skill vercel-react-best-practices-1wos

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices provide a comprehensive set of performance guidelines to help engineers optimize React and Next.js projects, preventing common bottlenecks.

Core Features & Use Cases

Priority-based rule categories covering Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns to guide automated refactoring and reviews.
Clear usage scenarios for writing new components, reviewing code, refactoring existing code, and optimizing bundle size or load times in Next.js apps.
Concrete patterns and actionable guidelines that can be consumed by agents and automated tools to generate performance-conscious code.

Quick Start

Review the 57 rules and start applying the guidelines to your codebase.

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 performance bottlenecks in my codebase?▼

You can optimize React and Next.js performance by applying priority-based rule categories covering bundle size optimization, server-side performance, and re-render optimization. These 57 concrete patterns guide automated refactoring, code generation, and reviews to eliminate common bottlenecks.

What are the best practices for reducing bundle size and improving rendering in Next.js apps?▼

Next.js rendering optimization and bundle size reduction best practices include eliminating waterfalls, optimizing client-side data fetching, and applying advanced patterns. These actionable guidelines enforce performance-conscious code generation and automated refactoring across server and client components.

Can I automate applying React performance rules when writing new components?▼

Yes, you can automate applying React performance rules when writing new components. The guidelines provide clear usage scenarios for code generation, reviewing code, and refactoring existing code, allowing agents and automated tools to consume concrete patterns for performance-conscious output.

Does this React performance guidance cover both server-side and client-side data fetching patterns?▼

Yes, the React performance guidance covers both server-side and client-side data fetching patterns. It explicitly includes priority-based rule categories for Server-Side Performance and Client-Side Data Fetching to help engineers optimize Next.js projects across both environments.

Why should I use priority-based rule categories for React rendering optimization?▼

Priority-based rule categories for React rendering optimization distinguish specific performance areas like eliminating waterfalls, JavaScript performance, and advanced patterns. This structured approach ensures automated tools generate targeted, performance-conscious code rather than applying generic improvements.

When should I not use automated React performance refactoring?▼

Automated React performance refactoring should be reviewed carefully when dealing with complex advanced patterns or deeply nested server and client component boundaries. The 57 rules provide actionable guidance, but developers must validate that automated changes preserve existing application logic and data fetching behaviors.