skills.rest
ByeongminLee
ByeongminLeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to codebases.

2|1|Updated Mar 16, 2026
Search Tags:#performance#react#optimization#vercel#nextjs#best-practices
One-click install
npx skills add https://github.com/ByeongminLee/nextjs-claude-code --skill vercel-react-best-practices-byeongminlee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ByeongminLee/nextjs-claude-code/tree/main/template/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/ByeongminLee/nextjs-claude-code --skill vercel-react-best-practices-byeongminlee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides production-grade guidance for applying React and Next.js performance best practices to reduce waterfalls, shrink bundle sizes, and improve user-perceived performance across projects.

Core Features & Use Cases

  • Structured guidance across Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Practical use in code reviews, refactoring tasks, performance audits, and automated tooling to surface and apply recommended patterns.
  • Applicable to React components, Next.js pages, and both server-side and client-side data-fetching scenarios.

Quick Start

Run this skill to surface React/Next.js performance patterns for your codebase.

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 by reducing data fetching waterfalls?▼

To optimize React performance and reduce data fetching waterfalls, apply parallel data fetching patterns and prefetching strategies. This Skill provides structured guidance to eliminate sequential server-side and client-side waterfalls across modern web apps.

What are the best practices for optimizing bundle size in a Next.js application?▼

Next.js bundle size optimization best practices include analyzing component imports, applying dynamic imports, and eliminating redundant client-side JavaScript. This Skill surfaces production-grade patterns to shrink bundle sizes and improve user-perceived load times.

How do I prevent unnecessary re-renders in my React components?▼

Prevent unnecessary React re-renders by applying memoization techniques, optimizing state placement, and using stable references. This Skill provides explicit examples and safe defaults to optimize rendering performance across new and existing components.

Can I use these React performance patterns during a code review or refactoring task?▼

Yes, these React performance patterns are designed for practical use in code reviews, refactoring tasks, and performance audits. The Skill surfaces recommended patterns and safe defaults directly applicable to React components and Next.js pages.

Does this guidance cover both server-side and client-side data fetching scenarios?▼

Yes, the performance guidance covers both server-side and client-side data fetching scenarios in Next.js. It includes specific patterns for server-side performance optimization and client-side data fetching to improve overall web app load times.

Related Skills

Explore More Software Engineering Skills→
martind751martind751

vercel-react-best-practices

Apply Vercel's 57 performance rules to React and Next.js code.

Community
Intermediate
hiddink-aihiddink-ai
1

optimize-bundle

Analyze build output and apply code splitting and tree-shaking optimizations.

Official
Intermediate
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
Marcus-BoniMarcus-Boni
1

vercel-react-best-practices

Optimize React and Next.js application performance with best practices.

Community
Advanced