---

name: react-optimizer description: Optimize React components for performance and maintainability. Identifies unnecessary re-renders, memoization opportunities, and prop-drilling issues. Use when reviewing client-side code in client/src/. allowed-tools: Read, Grep, Glob

React Component Optimizer

Standards

Performance

• ✅ Use useMemo for expensive calculations
• ✅ Use useCallback for stable function references passed to optimized children
• ✅ Identify and eliminate redundant state
• ✅ Use code-splitting (React.lazy) for large components/routes

Maintainability

• ✅ Extract complex logic into custom hooks
• ✅ Keep components small and focused (Single Responsibility Principle)
• ✅ Use ShadCN/UI components consistently
• ✅ Proper TypeScript types for all props

Styling

• ✅ Use Tailwind CSS utility classes
• ✅ Avoid inline styles unless dynamic and necessary
• ✅ Use cn() utility for conditional class joining

Review Checklist

1. Re-renders: Are there components re-rendering unnecessarily?
2. Hooks: Are hook dependency arrays correct and complete?
3. Complexity: Is the component too large? Should it be split?
4. Consistency: Does it follow the established UI patterns (ShadCN, Tailwind)?

Auto-Invocation Triggers

This Skill should activate when:

• Reviewing files in client/src/components/ or client/src/pages/
• Reviewing .tsx files
• User asks to "optimize react code" or "improve component performance"