<!-- # COPYRIGHT NOTICE # This file is part of the "Universal Biomedical Skills" project. # Copyright (c) 2026 MD BABU MIA, PhD <md.babu.mia@mssm.edu> # All Rights Reserved. # # This code is proprietary and confidential. # Unauthorized copying of this file, via any medium is strictly prohibited. # # Provenance: Authenticated by MD BABU MIA -->

---

name: 'react-performance-optimizer' description: 'Analyzes React/Next.js code for performance bottlenecks, focusing on waterfalls, bundle size, and rendering efficiency.' measurable_outcome: Execute skill workflow successfully with valid output within 15 minutes. allowed-tools:

• read_file
• run_shell_command

---

React Performance Optimization Skill

This skill assists in identifying and resolving common performance issues in React and Next.js applications. It applies rules from Vercel's engineering best practices.

When to Use This Skill

• When a user asks to "optimize" a React component or page.
• When a user mentions "slow loading", "waterfalls", or "large bundle size".
• When reviewing code for production readiness.

Core Capabilities

1. Waterfall Detection: Identifies nested data fetching patterns that block rendering.
2. Bundle Size Analysis: Suggests dynamic imports (

   next/dynamic

   ,

   React.lazy

   ) for heavy components.
3. Render Optimization: Checks for unnecessary re-renders and suggests

   useMemo

   ,

   useCallback

   , or composition patterns.
4. Image Optimization: Verifies usage of

   next/image

   and proper sizing attributes.
5. Server Components: Recommends moving logic to Server Components (RSC) where appropriate to reduce client JS.

Workflow

1. Analyze Imports: Check for heavy libraries (e.g., moment.js, lodash) that could be tree-shaken or replaced.
2. Check Data Fetching:
   • Look for

     await

     inside loops or sequential

     await

     calls that could be

     Promise.all

     .
   • Identify Client Components fetching data that could be Server Components.
3. Inspect Rendering Logic:
   • Look for expensive computations directly in the render body.
   • Check for

     useEffect

     usage that triggers cascading updates.
4. Review References: Consult

   references/performance_rules.md

   for specific patterns to avoid.

Example Usage

User: "Why is my dashboard loading so slowly?"

Agent:

1. Read

   src/app/dashboard/page.tsx

   and components.
2. Identify multiple sequential

   await fetch(...)

   calls.
3. Suggest using

   Promise.all

   or moving data fetching up to a layout/parent RSC.
4. Suggest wrapping the Chart component with

   next/dynamic

   .

References

• references/performance_rules.md

  : detailed explanation of the rules.

<!-- AUTHOR_SIGNATURE: 9a7f3c2e-MD-BABU-MIA-2026-MSSM-SECURE -->