react-expert

Diagnose and fix complex React 18/19 component issues.

Updated Dec 5, 2025
One-click install
npx skills add https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI --skill react-expert-botphu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-expert
Source: https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI/tree/main/.agent/skills/react-expert
Command: npx skills add https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI --skill react-expert-botphu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers diagnose and fix complex React 18/19 issues, including hook misuses, rendering bottlenecks, and Server Components challenges, enabling robust, maintainable UIs.

Core Features & Use Cases

  • Guided debugging for common React pitfalls (hooks, effects, state).
  • Performance optimization recommendations for render paths and memoization.
  • Server Components awareness guidance for SSR/CSR trade-offs and architecture decisions.
  • Best practices for component patterns, state management, and testability.
  • Use Case: You are refactoring a large React app with frequent re-renders; this skill provides targeted patterns, review criteria, and step-by-step improvements.

Quick Start

Run the skill to diagnose a slow render of a list and propose concrete code changes.

Frequently Asked Questions about react-expert

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

FAQPage Schema
How do I fix frequent re-renders in a large React app?

To fix frequent re-renders in React, you need targeted performance optimization patterns like memoization and render path analysis to diagnose bottlenecks and apply concrete code changes for maintainable UIs.

Why does my React useEffect hook cause infinite loops or stale state?

React hooks like useEffect cause infinite loops or stale state due to common hook misuses, which require guided debugging to correct dependency arrays and state management patterns.

How do I decide between Server Components and Client Components in React 18?

Deciding between React Server Components and Client Components requires understanding SSR and CSR trade-offs, using architecture guidance to determine the optimal rendering strategy for your UI.

What is the best way to structure state management for scalable React applications?

The best way to structure React state management is applying expert best practices and component patterns, ensuring scalable and maintainable UI development across complex application architectures.

Can this Skill diagnose a slow list rendering issue in React?

Yes, this Skill can diagnose slow React list rendering by analyzing render paths and proposing concrete code changes, providing step-by-step improvements to resolve performance bottlenecks.