skills.rest
sam-evolv
sam-evolvCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Optimizes React and Next.js apps via routing, rendering, and data-fetching best practices.

Updated Oct 28, 2025
Search Tags:#performance#frontend#react#optimization#next.js#best-practices#web-vitals
One-click install
npx skills add https://github.com/sam-evolv/property-assistant --skill vercel-react-best-practices-sam-evolv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/sam-evolv/property-assistant/tree/main/.skills/vercel-react-best-practices
Command: npx skills add https://github.com/sam-evolv/property-assistant --skill vercel-react-best-practices-sam-evolv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, battle-tested set of patterns to help teams improve the performance of React and Next.js applications, reducing render times, bundle sizes, and waterfalls.

Core Features & Use Cases

  • Guided performance rules: 45+ rules across 8 categories covering eliminating waterfalls, bundle optimization, server-side patterns, client-side data fetching, rendering, and more.
  • Practical examples: Real-world scenarios with before/after comparisons to inform refactors, code reviews, and architecture decisions.
  • Automated guidance: Clear recommendations for when and how to apply each rule during development, reviews, and migrations.

Quick Start

Use this skill to audit a React/Next.js project and begin applying the recommended performance patterns 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 rendering performance and eliminate data fetching waterfalls?▼

Next.js performance improvements involve applying server-side rendering patterns, bundle optimization, and client-side data fetching strategies. Structured rules provide clear recommendations for when and how to apply each pattern during development and code reviews.

What are the best practices for reducing bundle size in a React application?▼

Next.js performance improvements involve applying server-side rendering patterns, bundle optimization, and client-side data fetching strategies. Structured rules provide clear recommendations for when and how to apply each pattern during development and code reviews.

Can I use these React performance patterns without setting up specialized infrastructure?▼

Next.js performance improvements involve applying server-side rendering patterns, bundle optimization, and client-side data fetching strategies. Structured rules provide clear recommendations for when and how to apply each pattern during development and code reviews.

What is the best way to audit a React project for performance bottlenecks?▼

Next.js performance improvements involve applying server-side rendering patterns, bundle optimization, and client-side data fetching strategies. Structured rules provide clear recommendations for when and how to apply each pattern during development and code reviews.

Do these React optimization rules work for both client-side and server-side rendering?▼

Next.js performance improvements involve applying server-side rendering patterns, bundle optimization, and client-side data fetching strategies. Structured rules provide clear recommendations for when and how to apply each pattern during development and code reviews.

Related Skills

Explore More Software Engineering Skills→
whoabuddywhoabuddy
2

react-perf

Review React and Next.js projects for performance bottlenecks.

Community
Intermediate
balkhaevbalkhaev

vercel-react-best-practices

Enforce 70+ performance rules for React and Next.js applications.

Community
Advanced
Kael-DeanKael-Dean

optimize

Identify and fix frontend performance bottlenecks in web apps.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced