react-component-extraction

What problem does it solve?

Large or duplicated React components and tangled UI/logic make code hard to maintain, reason about, and reuse. This Skill guides developers to split components or pull out custom Hooks while preserving behavior, preventing regressions, and clarifying interfaces so refactors are safe and incremental.

Core Features & Use Cases

• Dependency analysis: Enumerates props, state, context, refs, external functions, side effects, and style dependencies required for extraction.
• Extraction strategy: Recommends minimal extraction boundaries (Hook vs child component vs full component) and designs TypeScript prop interfaces with sensible defaults and guards.
• Safety checks & verification: Suggests file locations, ensures Providers/refs remain valid, adds cleanup for effects, and preserves original caller compatibility.
• Use Case: Converting a large page component into a set of focused presentational components and a reusable data-fetching Hook to enable reuse across multiple pages.

Quick Start

Extract the selected JSX and logic into a reusable component or custom Hook, preserving props, context, refs, effects, and TypeScript interfaces so existing callers continue to work.