skills.rest
Max-Loo
Max-LooCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and apply React and Next.js performance guidelines across server and client boundaries.

2|Updated Oct 13, 2025
Search Tags:#performance#react#optimization#nextjs#guidelines#best-practices
One-click install
npx skills add https://github.com/Max-Loo/multi-chat --skill vercel-react-best-practices-max-loo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Max-Loo/multi-chat/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Max-Loo/multi-chat --skill vercel-react-best-practices-max-loo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates official React/Next.js performance guidelines from Vercel Engineering to help teams write, review, and refactor code for faster apps.

Core Features & Use Cases

  • Rule-driven guidance for code structure, data fetching, and bundle optimization across client/server boundaries.
  • Real-world scenarios and checklists to identify bottlenecks and apply automated improvements.
  • Clear quick-start instructions to begin applying performance best practices immediately.

Quick Start

Identify a performance bottleneck in a React/Next.js component and apply the guidelines to optimize rendering, data fetching, and bundling.

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 components for better rendering performance?▼

To optimize React components, apply rule-driven guidelines to refactor rendering logic, data fetching patterns, and bundle optimization across server and client boundaries to improve speed and user experience.

What are the best practices for data fetching in Next.js applications?▼

Next.js data fetching best practices involve applying rule-driven guidelines to optimize data retrieval patterns across server and client boundaries, ensuring faster apps and improved user experience.

How do I reduce bundle size in a Next.js project?▼

To reduce bundle size, apply performance guidelines to optimize bundling across server and client boundaries. This involves checking code against performance patterns and refactoring to eliminate bottlenecks.

Can I use these performance guidelines to review existing React code?▼

Yes, you can review existing React code by checking it against performance patterns and flagging unsafe or insecure practices, using real-world scenarios and checklists to apply automated improvements.

When should I refactor code across server and client boundaries in Next.js?▼

You should refactor code across server and client boundaries when identifying performance bottlenecks, applying rule-driven guidance to optimize data fetching and bundle optimization for faster apps.

Related Skills

Explore More Software Engineering Skills→
wellnessbrotherjay-debugwellnessbrotherjay-debug

vercel-react-best-practices

Audits and refactors React & Next.js projects for improved performance and efficiency.

Community
Basic
raphaelandrewsraphaelandrews
1

vercel-react-best-practices

Apply React/Next.js performance best practices to optimize app speed.

Community
Advanced
vKenjovKenjo

react-best-practices

Refactor React and Next.js code to improve application performance.

Community
Intermediate
ps-carvalhops-carvalho

performance-optimization

Profile CPU and memory usage to identify and fix performance bottlenecks.

Community
Advanced