vercel-react-best-practices

Optimizes React and Next.js applications by enforcing 57 performance rules across 8 categories.

Updated Feb 10, 2026
One-click install
npx skills add https://github.com/Temp-37538/moderniptvplayer --skill vercel-react-best-practices-temp-37538
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Temp-37538/moderniptvplayer/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Temp-37538/moderniptvplayer --skill vercel-react-best-practices-temp-37538

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and guidelines to optimize the performance of React and Next.js applications, ensuring faster load times, better user experience, and more efficient development.

Core Features & Use Cases

  • Performance Optimization: Offers 57 rules across 8 categories, from critical bundle size reduction to advanced patterns.
  • Code Refactoring Guidance: Provides detailed explanations, incorrect vs. correct code examples for each rule.
  • AI Agent Assistance: Optimized for automated refactoring and code generation by AI agents.
  • Use Case: When developing a new Next.js page, consult this Skill to ensure data fetching is parallelized, bundle size is minimized, and server-side rendering is efficient.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component for optimal performance.

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 and reduce bundle size?

To optimize React and Next.js performance, apply 57 prioritized rules covering bundle size reduction, waterfall elimination, and server-side rendering efficiency, utilizing detailed incorrect versus correct code examples to guide refactoring.

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

Eliminating data fetching waterfalls in Next.js requires parallelizing data requests during server-side rendering. This Skill provides specific refactoring guidance with correct code examples to ensure efficient data fetching patterns.

Can AI agents automatically refactor my React components for better performance?

Yes, AI agents can automatically refactor React components for better performance using this Skill. It is optimized for AI agent assistance, providing structured rules across 8 categories to guide automated code generation and refactoring.

Does this React optimization guide include code examples for refactoring?

Yes, this React optimization guide includes detailed incorrect versus correct code examples for each of its 57 rules, demonstrating how to refactor components to achieve faster load times and better user experience.

When should I consult Next.js server-side rendering performance rules?

Consult Next.js server-side rendering performance rules when developing new pages or refactoring existing ones. This Skill ensures data fetching is parallelized, bundle size is minimized, and rendering is efficient.