component-organization

What problem does it solve?

Maintaining a scalable React TypeScript codebase becomes unwieldy without a consistent structure. This Skill provides a standardized layout that promotes reuse, clean separation of concerns, and predictable imports across UI bases, composed components, and routing.

Core Features & Use Cases

• Standard Directory Layout: Enforces src/ with components/ui, components/shared, pages, layouts, and optional assets/references/scripts.
• Barrel Exports Policy: Encourages index.ts barrels to simplify imports and enable safe refactors.
• Guided Component Organization: Distinguishes base UI components (ui), composed components (shared), and page-level routing (pages).
• Use Case: You are adding a new button component used by multiple features; place it under components/ui and export via barrel; then reuse across pages.

Quick Start

Follow the component-organization guide to lay out your src/ folders and create barrel exports. Start by creating an index.ts barrel in each directory, add base and composed components under the correct folders, and use the recommended naming conventions.