skills.rest
mshaheerz
mshaheerzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

review-react-best-practices

Review React and Next.js code for performance and reliability issues.

1|Updated Feb 25, 2026
Search Tags:#code review#performance#refactoring#react#optimization#nextjs
One-click install
npx skills add https://github.com/mshaheerz/hive-mind --skill review-react-best-practices-mshaheerz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-react-best-practices
Source: https://github.com/mshaheerz/hive-mind/tree/main/agent-skills/review-react-best-practices
Command: npx skills add https://github.com/mshaheerz/hive-mind --skill review-react-best-practices-mshaheerz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a systematic and prioritized approach to reviewing and refactoring React and Next.js code, specifically targeting performance and reliability issues.

Core Features & Use Cases

  • Prioritized Rule Library: Offers a structured set of rules categorized by impact (Critical, High, Medium, Low) for efficient review.
  • Performance Focus: Addresses key areas like waterfalls, bundle size, server/client data fetching, re-renders, and rendering performance.
  • Use Case: When a Next.js page feels slow or a PR introduces performance regressions, use this Skill to identify and fix issues related to data fetching waterfalls or excessive bundle size.

Quick Start

Use the review-react-best-practices skill to review the code in './src/components/UserProfile.tsx' for performance issues.

Frequently Asked Questions about review-react-best-practices

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

FAQPage Schema
How do I review React code for performance issues and re-renders?▼

To review React code for performance, this skill applies a prioritized rule library to identify and refactor re-renders, data fetching waterfalls, and bundle size issues in your components.

What is the best way to optimize Next.js App Router pages for speed?▼

Optimizing Next.js App Router pages is handled by reviewing server and client data fetching patterns, addressing waterfalls, and refactoring code for reliability using structured performance rules.

How do I fix data fetching waterfalls in my React components?▼

Fixing data fetching waterfalls involves applying prioritized refactoring rules to your React and Next.js code, restructuring sequential server and client fetches to improve loading speed.

Can I use this to review a pull request for React bundle size regressions?▼

Yes, you can use this to review a pull request by identifying performance regressions, specifically targeting excessive bundle size and rendering optimizations introduced in the new code.

How are the React and Next.js refactoring rules prioritized during a code review?▼

The refactoring rules are prioritized by impact level—Critical, High, Medium, and Low—ensuring the most significant React and Next.js performance issues are addressed first for efficient reviewing.

Does this work with both React client-side fetching and Next.js server components?▼

Yes, the review process evaluates both server and client data fetching patterns within your React and Next.js code to pinpoint and resolve performance bottlenecks effectively.

Related Skills

Explore More Software Engineering Skills→
HeyvhuangHeyvhuang
339

review-react-best-practices

Review React/Next.js code for performance and reliability using a prioritized rule library.

Community
Advanced
SolaneHubSolaneHub

react-best-practices

Review React and Next.js code for performance anti-patterns.

Community
Advanced
jangtrinhjangtrinh

web-perf

Analyze web performance gaps and optimize Core Web Vitals with Lighthouse.

Community
Intermediate
ps-carvalhops-carvalho

performance-optimization

Profile CPU and memory usage to identify and fix performance bottlenecks.

Community
Advanced