react-component-refactor

What problem does it solve?

This Skill helps developers convert large, tangled, or repetitive React component files into clean, maintainable structures without changing runtime behavior. It targets components that are hard to read, contain duplicated logic, or mix presentation, state, and side effects in ways that hinder maintenance and reuse.

Core Features & Use Cases

• Structural analysis: Inspect component scale, JSX nesting, duplicated logic, state distribution, and side effects to identify extraction candidates.
• Automated refactor planning: Produce a clear split plan (subcomponents, custom hooks, and a refactored main file) and request user confirmation before making changes.
• Type-safe extraction: Extract subcomponents and hooks with TypeScript interfaces, follow file and hook conventions, and preserve props and return shapes.
• 1:1 logic preservation: Guarantee no behavioral changes by keeping state initial values, useEffect timing/dependencies, event handling, and render conditions identical; surface any obvious bugs as annotated notes rather than fixes.
• Verification checklist: Provide a logic-equivalence checklist to validate conditional rendering, list keys, event bindings, side-effect dependencies, and state flows after refactor.

Quick Start

Refactor the component at src/components/BigWidget.tsx into smaller subcomponents and extract any reusable hooks while preserving all runtime behavior.