vercel-react-best-practices

Apply React and Next.js performance best practices to components, data fetching, and bundles.

Updated Jan 17, 2026

Search Tags:#performance #react #nextjs #bundling #code-review #ssr

Ready to run

npx skills add https://github.com/lDuang/mcp-skill-registry --skill vercel-react-best-practices-lduang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/lDuang/mcp-skill-registry/tree/main/skill/react-best-practices
Command: npx skills add https://github.com/lDuang/mcp-skill-registry --skill vercel-react-best-practices-lduang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The React/Next.js performance guidelines help teams identify and remediate bottlenecks that hinder speed, reliability, and user experience. They provide a structured set of rules to apply during development, review, and refactoring to ensure scalable performance gains.

Core Features & Use Cases

A comprehensive, categorized collection of performance rules for reducing waterfalls, bundle size, SSR/CSR efficiency, and rendering overhead.
Actionable guidance tailored for React components, Next.js pages, and data-fetching patterns, with real-world examples and measurable impact.
Use cases include code reviews, automated refactoring, and performance-focused code generation.

Quick Start

Review the guidelines and apply the rule set to a React/Next.js project to start improving performance 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 optimize React components and Next.js pages for performance?▼

To optimize React components and Next.js pages for performance, apply structured rules that reduce rendering overhead, improve data fetching patterns, and minimize bundle size. Use these guidelines during code reviews and refactoring to ensure verifiable speed gains.

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

Reducing data fetching waterfalls in Next.js involves applying targeted performance rules to data fetching patterns. Identify sequential fetching bottlenecks and apply actionable guidance to parallelize requests, improving SSR efficiency and overall user experience.

How do I review React code for bundle optimization and SSR efficiency?▼

Review React code for bundle optimization and SSR efficiency by applying a categorized collection of performance rules. Check components against these rules to identify bottlenecks, ensure safe refactoring, and preserve correctness while improving bundle performance.

Does this performance guidance work for both SSR and CSR rendering patterns?▼

Yes, this performance guidance works for both SSR and CSR rendering patterns by enforcing rules that specifically target SSR and CSR efficiency. It provides actionable guidance tailored for React components and Next.js pages to optimize rendering overhead across different rendering strategies.

Can I use these rules to guide automated refactoring of React components?▼

Yes, you can use these rules to guide automated refactoring of React components. They enforce requirements for understanding and guiding refactorings, ensuring safe, verifiable performance improvements while preserving correctness during the refactoring process.

What should I avoid when improving Next.js bundle size and performance?▼

When improving Next.js bundle size and performance, avoid unsafe refactoring that breaks correctness. These guidelines enforce requirements for understanding refactoring impacts, ensuring you identify bottlenecks safely without compromising reliability, user experience, or existing functionality.