What problem does it solve? React codebases often degrade into giant type-based folders where related code is scattered across components/, hooks/, and api/ directories, making features hard to find, modify, or delete. This Skill provides concrete conventions for structuring React projects so domain code stays grouped by feature and generic UI stays reusable. ## Core Features & Use Cases - Two-layer component model: Separates generic base UI components (buttons, modals, layout primitives in src/components/ui/) from domain components that live inside feature modules. - Feature-based organization: Groups components, hooks, API clients, and types per feature under src/features/ with clear boundaries and public APIs via index.ts barrel files. - Naming and placement rules: Defines kebab-case file naming, sub-component prefixing, page suffixes, co-located tests folders, and a decision table for where any new file belongs. - Use Case: When adding a new invoices feature to an existing React app, use this Skill to decide exactly where the list component, data hook, API client, and tests should live, and how to name them consistently. ## Quick Start Use the react-project-structure skill to decide where to place a new AgentCard component and its hook in my React app.
