What problem does it solve? Long component files become unreadable past a few hundred lines, and ad-hoc splitting creates circular imports, vague utility files, and broken import paths. This Skill defines a repeatable folder layout for splitting a component without changing how the rest of the codebase imports it. ## Core Features & Use Cases - Folder structure convention: Converts a component file like CatchDialog.tsx into a kebab-case folder with index.tsx, pure helper files, and one-file-per-section sub-components, keeping external import paths unchanged. - Import direction rules: Enforces that parts never import from index, pushes shared types down into parts, and resolves cycles by extracting shared code into a third file. - Prioritized extraction order: Pulls pure functions and constants first, then markup sections with explicit props, then the reading half of a resource. - Use Case: A Solid or React component has grown past 600 lines. Apply this layout to split it into index.tsx, describe.ts, and a sections/ folder while every existing importer keeps working unchanged. ## Quick Start Split this oversized component file into a folder following the component-layout conventions, keeping all existing import paths working.
