skills.rest
lemu
lemuCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify performance bottlenecks in React and Next.js code using Vercel best-practice guidelines.

Updated Oct 22, 2025
Search Tags:#performance#refactoring#react#nextjs#hydration#server-actions#bundle-optimization
One-click install
npx skills add https://github.com/lemu/sea-prototype-template --skill vercel-react-best-practices-lemu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/lemu/sea-prototype-template/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/lemu/sea-prototype-template --skill vercel-react-best-practices-lemu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates React/Next.js performance best practices to guide engineering teams in writing fast, scalable UI code.

Core Features & Use Cases

  • Guidelines grouped by priority: eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • Use cases include code reviews, refactors, performance audits, and automated refactoring suggestions to drive measurable improvements.
  • Real-world scenario: apply these guidelines across large, modern React/Next.js apps to reduce TTI, FID, and bundle size while preserving UX.

Quick Start

Review your React/Next.js codebase against these guidelines to identify and apply performance improvements.

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 performance bottlenecks in my React and Next.js application?▼

Apply Vercel's best-practice guidelines to audit component patterns, data fetching, and server/client boundaries. This process pinpoints waterfalls, bundle bloat, and inefficient re-renders in your React/Next.js application to drive measurable performance improvements.

What is the best way to optimize bundle size and eliminate data fetching waterfalls in Next.js?▼

Optimize Next.js bundle size and eliminate waterfalls by enforcing server-side performance and client-side fetching patterns. Restructuring server/client boundaries through automated refactoring reduces TTI, FID, and overall JavaScript payload.

Can I use these React performance guidelines for automated code refactoring?▼

Yes, these React performance guidelines support automated code refactoring. Validation, error handling, and guardrails are outlined to safely generate code and refactor large applications while preserving user experience and consistency.

Does this approach work for large modern React apps or is it only for small projects?▼

This approach scales for large, modern React and Next.js apps. Guidelines are designed for typical projects and workflows, ensuring safety and consistency during performance audits and complex refactors across the entire codebase.

Why do my Next.js server actions cause hydration and rendering performance issues?▼

Misplaced server/client boundaries around Next.js server actions cause hydration and rendering issues. Applying advanced component patterns and re-render optimization guidelines resolves these bottlenecks and improves client-side rendering performance.

Related Skills

Explore More Software Engineering Skills→
mr-phariyawitmr-phariyawit

vercel-react-best-practices

Apply performance best-practice rules to React and Next.js code.

Community
Advanced
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
trungtnmtrungtnm

vercel-react-best-practices

Identify React/Next.js performance anti-patterns and enforce optimized coding practices.

Community
Advanced
LeroyAdonisLeroyAdonis

vercel-react-best-practices

Apply vetted performance patterns to React and Next.js projects.

Community
Advanced