vercel-react-best-practices

Identify and optimize performance bottlenecks in React/Next.js projects.

Updated Jun 8, 2025

Search Tags:#performance #react #optimization #nextjs #bundling #server-components #server-actions

Ready to run

npx skills add https://github.com/noartem/kawa --skill vercel-react-best-practices-noartem

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/noartem/kawa/tree/main/ui/.ai/skills/react-best-practices
Command: npx skills add https://github.com/noartem/kawa --skill vercel-react-best-practices-noartem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps commonly battle performance bottlenecks across rendering, data fetching, and bundle management. This Skill consolidates Vercel-engineered guidelines to help teams write, review, and refactor code for faster, more reliable apps.

Core Features & Use Cases

A prioritized catalog of rules spanning 8 categories, with concrete patterns and real-world guidance.
Supports AI-assisted maintenance by providing actionable strategies for reducing waterfalls, bundle sizes, server/client bottlenecks, and re-render costs.
Useful for developers during feature implementation, code reviews, performance audits, and automated code generation tasks.

Quick Start

Audit a React/Next.js project against these guidelines to identify and apply performance improvements immediately.

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 identify and optimize React and Next.js performance bottlenecks?▼

To optimize React and Next.js performance bottlenecks, apply a catalog of 65 actionable rules across 8 categories to guide refactoring for rendering, data fetching, and bundling tasks across client and server boundaries.

What is the best way to reduce bundle size and re-render costs in Next.js?▼

The best way to reduce bundle size and re-render costs in Next.js is to apply actionable patterns from Vercel-engineered guidelines that target server/client bottlenecks and data waterfalls during code generation and refactoring.

Can I use these performance guidelines to audit server components and server actions?▼

Yes, you can use these performance guidelines to audit server components and server actions, as the rules specifically address optimization across client and server boundaries in React and Next.js projects.

How do I apply Vercel performance best practices during a React code review?▼

To apply Vercel performance best practices during a React code review, use the consolidated catalog of rules to identify performance bottlenecks and provide actionable strategies for faster, more reliable app components and pages.

Do I need automated code generation tools to implement React performance refactoring?▼

No, you do not need automated code generation tools to implement React performance refactoring, although these guidelines are designed to support AI-assisted maintenance by providing actionable patterns for automated refactoring.