React Component Architecture Review & Refactoring
Audit and refactor React components for reusability, performance, and maintainability
What You Can Do
This skill analyzes your React component codebase to identify structural issues, redundancy, and performance bottlenecks. Claude evaluates your components against React best practices, generates a prioritized refactoring roadmap, and provides actionable code improvements for extracting reusable patterns, optimizing props drilling, fixing memory leaks, and improving type safety. You'll receive detailed refactoring recommendations with before/after code examples and implementation guidance.
Features
Audits props drilling, composition patterns, and separation of concerns
Identifies duplicated logic and opportunities for custom hooks and shared components
Detects unnecessary re-renders, missing memoization, and render bottlenecks
Reviews TypeScript usage and suggests prop type improvements across components
Scans for cleanup issues in effects and event listeners that could cause problems
Provides concrete refactoring implementations with explanations for each fix
Suggests unit test improvements for better component isolation and coverage
Creates a phased refactoring plan based on impact, effort, and dependencies
Example Output
Component Analysis Report
Issue #1: Props Drilling (High Priority)
Current Pattern:
- UserProfile passes 8 props through 3 nested components
- Impact: Harder to maintain and refactor, creates tight coupling
Recommended Fix: Create a UserContext to provide user data directly to deeply nested components, eliminating intermediate prop passing.
Issue #2: Missing Memoization (Medium Priority)
- ProductList re-renders on every parent update despite unchanged product data
- Solution: Wrap with React.memo() and optimize child callbacks with useCallback()
Quick Wins (Low Effort, High Impact)
- Extract 3 duplicated button components into a unified ButtonVariants component
- Add useCallback to 5 event handlers causing unnecessary child re-renders
- Convert 2 large useEffect blocks into a custom useFetchData hook
What's Included
- SKILL.md: Complete architecture review and refactoring framework
- React audit checklist: Component evaluation criteria and anti-patterns
- Refactoring templates: Before/after patterns for common React issues
- Type safety guide: TypeScript best practices for prop types and generics
- Performance optimization patterns: memoization strategies, lazy loading, and code splitting
- Custom hook extraction guide: Identify and extract reusable logic
Who It's For
- Frontend engineers optimizing component architecture in React applications
- Tech leads reviewing codebases for maintainability and technical debt
- React developers learning modern patterns and best practices
- Teams transitioning to scalable component structures
- Startup developers building reusable component libraries from scratch
Best For
- Auditing component structure in existing React applications
- Identifying technical debt and prioritizing refactoring work
- Improving component reusability and testability across projects
- Optimizing render performance and reducing bundle size
- Enforcing type safety and reducing runtime errors in React codebases
- Extracting custom hooks from duplicated logic
- Planning large-scale refactoring initiatives
You might also like
Analyze Solidity and other smart contract code for security vulnerabilities, gas inefficiencies, and best practice violations. Get detailed reports with risk scoring, remediation suggestions, and optimization recommendations. Whether you're auditing before deployment or reviewing third-party contracts, this skill identifies critical issues faster than manual review.
You can systematically diagnose database performance bottlenecks by sharing your schema, slow query logs, and execution plans with Claude. It identifies root causes—missing indexes, inefficient joins, lock contention—and provides prioritized recommendations with ready-to-implement SQL. Skip the manual log analysis and get tuning strategies tailored to your workload.
This skill provides a structured approach to analyzing process problems, identifying root causes, and recommending capacity optimizations. You'll get clear bottleneck identification, data-driven recommendations, and a framework to validate whether your solutions actually work. Perfect for diagnosing why workflows are slow and finding the leverage points that matter most.
Use Claude to systematically analyze your database queries, execution plans, and schema to identify performance bottlenecks. The skill generates actionable optimization recommendations with SQL rewrites, index strategies, and configuration tuning. You'll receive detailed before-and-after performance analysis to validate improvements and prioritize work by impact.
This skill evaluates your research protocols against institutional review board requirements, identifies compliance gaps, and generates the documentation needed for IRB submission. You receive a detailed assessment report, risk analysis, and ready-to-use documentation templates tailored to your specific research design.
Conduct organized security assessments using Claude as your strategic partner. You'll develop comprehensive test plans, identify vulnerabilities through systematic reconnaissance, document findings with professional rigor, and map security gaps to compliance frameworks. Claude helps you maintain audit trails, prioritize risks by business impact, and generate executive reports.
You can systematically evaluate cloud platforms, document architectural decisions with tradeoffs, and validate designs against security and compliance requirements. This skill accelerates architecture reviews, ensures consistency across teams, and reduces the cycles needed to reach approval on complex infrastructure decisions.
You can architect multi-node ROS control systems from scratch, including node design patterns, communication flows, and real-time constraints. You'll debug complex node interactions using publisher/subscriber analysis, service call tracing, and action server diagnostics. You can optimize motion controllers through PID tuning, trajectory planning validation, and performance profiling to achieve precise, responsive robotic behavior.