skills.rest
noartem
noartemCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/noartem/kawa --skill vercel-react-best-practices-noartem
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
JimmyLvJimmyLv
6.2k

vercel-react-best-practices

Apply 58 performance rules across 8 categories to React and Next.js code.

Community
Advanced
dirnbauerdirnbauer
33

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React and Next.js code.

Community
Basic
ReaJasonReaJason
87

vercel-react-best-practices

Apply React and Next.js performance best practices during code reviews and refactoring.

Community
Advanced
mahoushoujyo-eeemahoushoujyo-eee
15

vercel-react-best-practices

Review React and Next.js code for performance issues and recommend prioritized fixes.

Community
Intermediate