skills.rest
mikeOnBreeze
mikeOnBreezeCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Eliminate React and Next.js performance bottlenecks with prioritized actionable rules.

284|94|Updated Feb 11, 2026
Search Tags:#code review#web development#frontend#react#bundle size#next.js#performance optimization
One-click install
npx skills add https://github.com/mikeOnBreeze/cc-crossbeam --skill react-best-practices-mikeonbreeze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/mikeOnBreeze/cc-crossbeam --skill react-best-practices-mikeonbreeze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves common performance bottlenecks in React and Next.js applications, including async waterfalls, oversized bundles, unnecessary re-renders, and suboptimal server-side rendering that lead to slow load times, poor user experience, and low SEO rankings.

Core Features & Use Cases

  • 40+ Prioritized Performance Rules: Comprehensive guidelines across 8 categories ranked by impact (critical to low) to guide automated refactoring, code generation, and code review.
  • Full Coverage of Key Performance Areas: Rules for eliminating async waterfalls, reducing bundle size, optimizing server-side rendering, improving client-side data fetching, minimizing re-renders, and optimizing DOM/JavaScript performance.
  • Real-World Use Cases: Use when writing new React/Next.js components, reviewing code for performance issues, refactoring existing codebases, or optimizing bundle size and load times for production applications.

Quick Start

Use the react-best-practices skill to audit your existing Next.js e-commerce product page and implement the top 3 high-impact performance improvements to reduce initial load time and improve Time to Interactive.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React component re-renders and reduce bundle size?▼

To optimize React performance and reduce bundle size, apply prioritized rules targeting unnecessary component re-renders and oversized JavaScript bundles. This involves refactoring data fetching patterns and eliminating async waterfalls to improve application load times and Time to Interactive.

What are common Next.js performance bottlenecks affecting server-side rendering?▼

Common Next.js performance bottlenecks include suboptimal server-side rendering patterns, async waterfalls in client-side data fetching, and oversized JavaScript bundles. These issues lead to slow load times, poor user experience, and low SEO rankings.

How do I review React code for frontend performance issues?▼

Review React code for frontend performance issues by applying 40+ prioritized rules across 8 categories ranked by impact. Check components for unnecessary re-renders, suboptimal server-side rendering, and bundle size inefficiencies during code generation and refactoring tasks.

Does this approach work for optimizing API routes and client-side data fetching in Next.js?▼

Yes, this approach works for optimizing API routes and client-side data fetching in Next.js. It eliminates async waterfalls and improves server response latency by providing actionable rules for React components, Next.js pages, and API route workflows.

What is the best way to reduce initial load time for a Next.js e-commerce page?▼

The best way to reduce initial load time for a Next.js e-commerce page is to audit existing components and implement high-impact performance improvements. Prioritize minimizing server response latency, optimizing server-side rendering, and reducing bundle size.

Related Skills

Explore More Software Engineering Skills→
aberrantCodeaberrantCode
1

vercel-react-best-practices

Identify and eliminate performance bottlenecks in React and Next.js applications.

Community
Intermediate
rahlplxrahlplx

astro-performance-expert

Apply engineering rules to improve Astro site performance and Core Web Vitals.

Community
Advanced
alfredolopez80alfredolopez80
145

vercel-react-best-practices

Enforce Vercel Engineering best practices for React and Next.js performance.

Community
Advanced
julianobarbosajulianobarbosa
7

Commit

Automate Git commits with pre-commit security scans and Conventional Commits enforcement.

Community
Advanced