component-splitter

What problem does it solve?

This Skill tackles the issue of overly large and complex React components that become difficult to manage, understand, and maintain by automatically decomposing them into smaller, more focused units.

Core Features & Use Cases

• Automated Component Decomposition: Analyzes large React components (100+ lines) and identifies logical boundaries for splitting.
• Refactoring Strategy: Applies standard patterns like Container/Presentational, custom hook extraction, or sub-component extraction.
• Migration Guidance: Generates a clear migration guide detailing the changes and how to update imports.
• Use Case: When a React component grows to over 150 lines with mixed UI, data fetching, and business logic, use this Skill to split it into a custom hook for logic, a presentational component for UI, and potentially smaller sub-components for distinct UI sections.

Quick Start

Use the component-splitter skill to refactor the file '/path/to/LargeComponent.tsx' into smaller, manageable components.