feature-arch

Organize your React project structure using feature-based folders that group components, hooks, APIs, and tests together. This enforces feature isolation and unidirectional imports, making each feature self-contained and improving team autonomy and maintainability.

Feature-based architecture in React groups code around features rather than technical types. Each feature is self-contained, colocating related data fetching, UI, and state, and exposes a public API through a per-feature index to enforce explicit module boundaries.

Enforce module boundaries and unidirectional imports by configuring the app layer as the sole consumer of features. Each feature exposes a public API via a per-feature index, reducing cross-feature coupling and ensuring explicit contracts across app layers.

Yes, you can refactor an existing React codebase into feature folders. The skill guides both creation and refactor tasks to enforce feature isolation, requiring each feature to colocate related data fetching, UI, and state for independent testing and deployment.

Grouping React components and hooks by feature instead of technical type improves scalability and team autonomy. It enables independent testing, deployment, and refactoring by making each feature self-contained with clear module boundaries and explicit interfaces.

You need a per-feature public API in React when establishing feature-based folders to ensure explicit contracts across app layers. Exposing an index per feature enforces unidirectional imports, reduces cross-feature coupling, and maintains feature isolation.