skills.rest
dungle-scrubs
dungle-scrubsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply Vercel React best practices to optimize React and Next.js apps.

Updated Aug 23, 2026
Search Tags:#performance#react#next.js#best-practices#code-review#server-components#bundle-optimization
One-click install
npx skills add https://github.com/dungle-scrubs/agent-config --skill vercel-react-best-practices-dungle-scrubs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/dungle-scrubs/agent-config/tree/main/stow/shared/skills/vercel-react-best-practices
Command: npx skills add https://github.com/dungle-scrubs/agent-config --skill vercel-react-best-practices-dungle-scrubs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured, AI-guided performance optimization guidelines for React and Next.js applications, helping teams write faster, cheaper, and more maintainable code.

Core Features & Use Cases

  • 57 rules across 8 categories covering eliminating waterfalls, bundle size, server-side, client-side data fetching, rendering performance, and JavaScript optimization.
  • Practical patterns, examples, and action-oriented instructions for code reviews and refactoring.
  • Use Case: When reviewing a React page or Next.js route, apply the rules to reduce bundle size, improve TTI/LCP, and avoid server waterfalls.

Quick Start

Ask the skill to generate a set of performance optimizations for a given React page or Next.js route, focusing on data fetching, server components, and bundle optimization.

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 and Next.js performance for server components and data fetching?▼

Optimize React and Next.js performance by applying structured rules for server components, data fetching, and bundle optimization to reduce waterfall requests and improve rendering efficiency. It provides 57 action-oriented patterns to guide automated refactoring and code reviews.

What are Vercel best practices for reducing bundle size and improving TTI in Next.js?▼

Vercel best practices for reducing bundle size and improving TTI involve applying specific JavaScript optimization and rendering patterns. This skill enforces practical guidelines to minimize bundle size and avoid server waterfalls during page route reviews.

How do I eliminate data fetching waterfalls in Next.js server components?▼

Eliminate data fetching waterfalls in Next.js server components by applying structured optimization patterns that parallelize requests and improve server-side data loading. The skill provides targeted rules to identify and refactor sequential fetching logic.

Can I use these React best practices for automated code reviews and refactoring?▼

Yes, you can use these React best practices for automated code reviews and refactoring. The skill provides practical patterns and action-oriented instructions specifically designed to guide AI-assisted code generation and performance refactoring workflows.

When should I apply server-side versus client-side data fetching in React?▼

Apply server-side data fetching to reduce client JavaScript and improve initial load, while using client-side fetching for interactive data. The skill provides structured rules to determine the optimal rendering and data fetching strategy for your components.

Related Skills

Explore More Software Engineering Skills→
mouratomourato

performance

Profile CPU and memory usage with Instruments to resolve application performance bottlenecks.

Community
Intermediate
kshehadehkshehadeh

vercel-react-best-practices

Apply Vercel React and Next.js performance rules during code refactoring.

Community
Advanced
KIM-KYOUNG-OHKIM-KYOUNG-OH

vercel-react-best-practices

Apply React and Next.js performance best practices to components, pages, and data flows.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

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

Community
Advanced