react-component-organization

What problem does it solve?

This Skill provides a proven pattern for organizing React components into small, focused units with clear ownership, reducing maintenance burden and onboarding time.

Core Features & Use Cases

• Single Responsibility: Each component handles one concern and remains easy to test.
• Layered Architecture: Separation of UI, business logic, and data hooks keeps route components lean.
• Pattern Templates: Predefined folder structures for route components, feature stores, and shared primitives.
• Use Case: When starting a new feature, apply this structure to ensure consistent organization across the codebase.

Quick Start

Create a new route by following the recommended folder layout under src/client/routes, duplicate a minimal route component, and adapt it to your feature naming conventions.