vercel-react-best-practices

Apply React and Next.js performance optimization rules to codebases.

Updated Dec 4, 2025
One-click install
npx skills add https://github.com/hiroto0701/dotfiles --skill vercel-react-best-practices-hiroto0701
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/hiroto0701/dotfiles/tree/main/private_dot_claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/hiroto0701/dotfiles --skill vercel-react-best-practices-hiroto0701

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices to significantly improve the performance of React and Next.js applications, addressing issues from critical waterfalls to incremental JavaScript optimizations.

Core Features & Use Cases

  • Performance Optimization: Apply over 50 rules across 8 categories to enhance speed and efficiency.
  • Code Refactoring Guidance: Use detailed examples to refactor code for better bundle size, server-side performance, and rendering speed.
  • Use Case: When developing a new Next.js feature, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized, and server-side rendering is efficient, leading to a faster user experience.

Quick Start

Apply the vercel-react-best-practices skill to review the current React component for performance bottlenecks.

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 when developing new features?▼

To optimize React and Next.js performance, apply over 50 categorized rules covering data fetching parallelization, bundle size minimization, and efficient server-side rendering to eliminate waterfalls and improve rendering speed.

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

Best practices for reducing Next.js bundle size involve applying incremental JavaScript optimizations and specific refactoring rules that minimize code payload and improve overall client-side rendering efficiency.

How do I eliminate data fetching waterfalls in React components?▼

To eliminate React data fetching waterfalls, consult structured performance rules that guide you in parallelizing data requests and refactoring components for optimal server-side and client-side rendering.

Can I use these performance rules to refactor an existing React codebase?▼

Yes, you can refactor an existing React codebase using detailed examples that guide you in applying optimization rules for better bundle size, enhanced server-side performance, and faster rendering speed.

What is the impact of server-side rendering on Next.js performance?▼

Server-side rendering significantly impacts Next.js performance by requiring efficient data fetching and parallelized requests to prevent critical waterfalls and ensure a faster user experience.

When should I apply performance optimization rules to my Next.js project?▼

You should apply performance optimization rules during new feature development and code refactoring to ensure data fetching is parallelized, bundle sizes are minimized, and rendering remains efficient.