| name | react-performance-optimizer |
| description | Analyzes React/Next.js code for performance bottlenecks, focusing on waterfalls, bundle size, and rendering efficiency. |
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
- Waterfall Detection: Identifies nested data fetching patterns that block rendering.
- Bundle Size Analysis: Suggests dynamic imports (
next/dynamic, React.lazy) for heavy components.
- Render Optimization: Checks for unnecessary re-renders and suggests
useMemo, useCallback, or composition patterns.
- Image Optimization: Verifies usage of
next/image and proper sizing attributes.
- Server Components: Recommends moving logic to Server Components (RSC) where appropriate to reduce client JS.
Workflow
- Analyze Imports: Check for heavy libraries (e.g., moment.js, lodash) that could be tree-shaken or replaced.
- 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.
- Inspect Rendering Logic:
- Look for expensive computations directly in the render body.
- Check for
useEffect usage that triggers cascading updates.
- Review References: Consult
references/performance_rules.md for specific patterns to avoid.
Example Usage
User: "Why is my dashboard loading so slowly?"
Agent:
- Read
src/app/dashboard/page.tsx and components.
- Identify multiple sequential
await fetch(...) calls.
- Suggest using
Promise.all or moving data fetching up to a layout/parent RSC.
- Suggest wrapping the Chart component with
next/dynamic.
References
references/performance_rules.md: detailed explanation of the rules.
