skills.rest
zzoohub
zzoohubCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and apply React/Next.js performance best practices to optimize UI performance.

Updated Mar 18, 2025
Search Tags:#performance#react#nextjs#bundle#server-components#web-vitals
One-click install
npx skills add https://github.com/zzoohub/mealio --skill vercel-react-best-practices-zzoohub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zzoohub/mealio/tree/main/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/zzoohub/mealio --skill vercel-react-best-practices-zzoohub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection provides a curated set of high-value React and Next.js performance guidelines to help teams ship faster, leaner apps with fewer waterfalls and smoother user experiences.

Core Features & Use Cases

  • A prioritized rule set covering Eliminating Waterfalls, Bundle Size, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Practical code examples and anti-patterns to guide developers during writing, review, or refactor tasks.
  • Real-world scenarios such as optimizing API routes, data fetching, and client rendering to improve TTI, LCP, and bundle size.

Quick Start

Audit a React/Next.js project against the guide and implement the top-priority patterns to begin reducing load times and improving interactivity.

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 better Core Web Vitals?▼

Optimize React and Next.js performance by applying curated rules across component design, data fetching, server components, bundling, and runtime to improve TTI, LCP, and bundle size.

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

Eliminate Next.js data fetching waterfalls by applying targeted server components and client-side fetching patterns, reducing sequential requests to improve overall load times and interactivity.

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

Reduce Next.js bundle size by auditing your project against a prioritized rule set covering bundle size, anti-patterns, and advanced patterns to ship leaner applications with automated refactoring guardrails.

Does this React performance guide support automated refactoring?▼

Yes, this React performance guide supports automated refactoring with guardrails, providing concrete rules and practical code examples to safely optimize re-rendering and JavaScript performance.

When should I use server components to improve Next.js server-side performance?▼

Use Next.js server components to improve server-side performance when addressing data fetching waterfalls and rendering bottlenecks, applying prioritized patterns to optimize UI performance.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
Gabrielloopes33Gabrielloopes33

perf-lighthouse

Run Lighthouse audits locally via CLI or Node API to measure performance and enforce budgets.

Community
Intermediate
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate