component-splitter

To break down large React components, this Skill analyzes files exceeding 100 lines and decomposes them into smaller, focused units based on data fetching, business logic, and UI rendering concerns. It automatically identifies logical boundaries for splitting.

You need to extract custom hooks when a React component grows past 150 lines with mixed UI, data fetching, and business logic. This separation refactors logic into custom hooks and UI into presentational components for better maintainability.

Standard refactoring patterns used to split React components include container and presentational splits, custom hook extraction, and sub-component creation. These patterns isolate distinct concerns like data fetching and UI rendering into separate files.

To update imports after splitting a React component, this Skill generates a clear migration guide detailing the changes. The guide ensures seamless integration by explaining how to update imports for the newly created hooks and sub-components.

Yes, you can use this to refactor React components with mixed business logic and UI. It identifies these mixed concerns and applies decomposition strategies to separate logic into custom hooks and rendering into presentational components.