react-optimizer
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/.
When & Why to Use This Skill
The React Component Optimizer is a specialized Claude skill designed to enhance the performance and maintainability of React applications. It systematically identifies unnecessary re-renders, optimizes memoization using useMemo and useCallback, and resolves prop-drilling issues. By enforcing standards like the Single Responsibility Principle and consistent styling with Tailwind CSS and ShadCN/UI, it ensures high-quality, scalable frontend code during the development and review process.
Use Cases
- Performance Auditing: Identifying and fixing performance bottlenecks in complex React pages by detecting redundant state updates and missing memoization.
- Code Refactoring: Streamlining bloated components by extracting complex logic into custom hooks and ensuring adherence to Single Responsibility Principles.
- Design System Compliance: Ensuring all frontend components consistently use Tailwind CSS utility classes and ShadCN/UI patterns for a unified UI/UX.
- Automated Code Review: Scanning pull requests for .tsx files to catch common React pitfalls like incorrect hook dependency arrays or missing TypeScript types before deployment.
| 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
useMemofor expensive calculations - ✅ Use
useCallbackfor 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
- Re-renders: Are there components re-rendering unnecessarily?
- Hooks: Are hook dependency arrays correct and complete?
- Complexity: Is the component too large? Should it be split?
- Consistency: Does it follow the established UI patterns (ShadCN, Tailwind)?
Auto-Invocation Triggers
This Skill should activate when:
- Reviewing files in
client/src/components/orclient/src/pages/ - Reviewing
.tsxfiles - User asks to "optimize react code" or "improve component performance"