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
You can accelerate your entire antenna design workflow—from initial concept to optimized specifications—by leveraging Claude's knowledge of electromagnetic theory, antenna types, and design trade-offs. Claude helps you parameterize designs, identify optimal configurations for your frequency band and application, and prepare detailed briefs for simulation and manufacturing. You'll generate design reviews, impedance-matching solutions, and validation checklists without context-switching to multiple tools.
You can convert raw API code, OpenAPI specs, GraphQL schemas, and implementation details into production-ready reference documentation. The skill generates systematically organized endpoint documentation with parameter tables, real request/response examples, error code catalogs, authentication details, rate limits, and SDK usage snippets in multiple programming languages—creating the authoritative developer reference for REST APIs, GraphQL APIs, WebSocket APIs, and webhook schemas.
Rapidly analyze production incidents by correlating observability signals—logs, metrics, traces, and events—to identify the true root cause instead of symptoms. You'll reconstruct incident timelines, quantify impact scope, and generate both immediate remediation steps and long-term prevention measures.
This skill guides you through designing Kalman filters for your specific state estimation and sensor fusion problems. You'll learn to diagnose filter divergence, tune covariance matrices (Q and R), and validate observability—turning mathematical theory into production-ready filters. The skill provides step-by-step workflows, diagnostic tools, and practical templates for common applications like GPS/IMU fusion, SLAM, and aircraft navigation.
Claude analyzes your code diffs and generates standardized commit messages that follow the Conventional Commits specification. The skill automatically determines the correct commit type, scope, and description based on the changes you've made, ensuring your messages are parseable by automation tools while remaining human-readable for code reviewers.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can rapidly design, optimize, and validate chromatographic and LC-MS/MS methods for analyzing drugs and metabolites in biological matrices. This skill guides you through analytical method development workflows—including parameter selection, sensitivity optimization, and regulatory strategy—while ensuring ICH Q2(R2) and FDA compliance throughout the development process.