skills.rest
itsmichaelwest
itsmichaelwestCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Guide React and Next.js performance optimization with 50 rules across 8 categories.

1|1|Updated Mar 7, 2026
Search Tags:#code quality#developer tools#performance#react#optimization#next.js
One-click install
npx skills add https://github.com/itsmichaelwest/agent-kit --skill vercel-react-best-practices-itsmichaelwest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/itsmichaelwest/agent-kit/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/itsmichaelwest/agent-kit --skill vercel-react-best-practices-itsmichaelwest

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of best practices to significantly improve the performance of React and Next.js applications, addressing issues like slow load times, bundle size bloat, and inefficient rendering.

Core Features & Use Cases

  • Performance Optimization: Apply over 50 rules across 8 categories, from critical waterfall elimination to advanced patterns.
  • Agent-Assisted Refactoring: Guides AI agents in writing, reviewing, and refactoring React/Next.js code for optimal performance.
  • Use Case: When developing a new feature, consult this Skill to ensure data fetching is parallelized, components are memoized correctly, and the final bundle size is minimized, leading to a faster user experience.

Quick Start

Apply the react best practices skill to optimize the provided React component code for 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 application performance?▼

Optimize React and Next.js performance by applying over 50 structured rules across 8 categories, targeting waterfall elimination, bundle size reduction, server-side efficiency, and rendering optimizations for faster load times.

What is the best way to reduce bundle size in Next.js?▼

Reduce Next.js bundle size by applying best practices for bundle size reduction, ensuring components are correctly memoized and data fetching is parallelized to minimize bloat and improve user experience.

How do I eliminate data fetching waterfalls in React?▼

Eliminate data fetching waterfalls in React by parallelizing data requests during development and refactoring, ensuring adherence to structured performance best practices for optimal server-side efficiency.

Can I use this to guide AI agents in refactoring React code?▼

Yes, you can guide AI agents in refactoring React code by applying these best practices to ensure data fetching is parallelized, components are correctly memoized, and the final bundle size is minimized.

When do I need to apply rendering optimizations in Next.js?▼

Apply Next.js rendering optimizations when developing new features or refactoring code to address inefficient rendering, ensuring strict adherence to best practices for faster load times and improved user experience.

Related Skills

Explore More Software Engineering Skills→
hiddink-aihiddink-ai
1

optimize-report

Generate optimization reports analyzing bundle size, performance metrics, and code quality.

Official
Intermediate
koralliskorallis
90

performance-optimization

Analyze performance metrics and implement code splitting, lazy loading, and caching strategies.

Community
Advanced
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced
manhthien2005manhthien2005

vercel-react-best-practices

Optimize React and Next.js code for performance and bundle size.

Community
Advanced