React Refactor

What it does

This skill provides an architectural refactoring guide for React applications, offering 40 rules categorized by impact – from critical (component and state architecture) to incremental (refactoring safety). It helps developers restructure existing codebases, review pull requests, decompose components, extract reusable hooks, improve testability, reduce coupling, and manage data and side effects within React projects. The guide prioritizes best practices for building robust frontend UIs and user experiences.

When to use it

• Refactoring existing React codebases or planning large-scale restructuring efforts.
• Reviewing pull requests (PRs) to identify architectural issues and potential code smells.
• Breaking down oversized components into smaller, more focused units.
• Extracting reusable hooks from component logic.
• Improving the testability of React code.

Key capabilities

• Provides 40 prioritized rules for React refactoring across 7 categories (Component Architecture, State Architecture, Hook Patterns, Component Decomposition, Coupling & Cohesion, Data & Side Effects, Refactoring Safety).
• Offers guidance on key topics such as compound components, state machines, URL state, single responsibility hooks, dependency injection, and error boundaries.
• Highlights critical patterns to prioritize (e.g., using compound components, colocating state) and common mistakes to avoid (e.g., lifting state unnecessarily).

Example prompts

• "What are the best practices for component architecture in React?"
• "How can I decompose a large React component into smaller units?"
• "Suggest ways to improve the testability of my React code."
• “Explain how to use compound components instead of props explosion”

Tips & gotchas

• Focus on the "Critical" categories first, as these have the highest impact.
• Be mindful of common anti-patterns like lifting state unnecessarily or using context for rapidly changing values.
• The skill provides a reference guide; it doesn't automatically refactor code.