react-architect-skills

Structure scalable React architecture by organizing folder-based projects into feature modules with colocated components, hooks, and tests, defining Presentational, Integration, Domain, and Data layers to separate concerns and minimize cross-feature coupling.

Enforce layer separation by defining Presentational (UI), Integration (containers/pages), Domain (hooks/utils), and Data (api/store) layers, establishing consistent naming and public API boundaries via index.ts to ensure module isolation and maintainability.

Refactor tangled React code by auditing the project against modularization guidelines, drafting a plan to reorganize code into feature modules with colocated directories, stable public APIs, and strict module isolation to support safe refactors.

This Skill applies to folder-based React projects using features, containers, hooks, and domain layers, guiding modularization and boundaries, making it compatible with folder-driven routing setups like TanStack Router.

Use public API boundaries and index.ts files in React feature modules to establish module isolation, enforce consistent naming conventions, and ensure maintainable code across teams by preventing unauthorized cross-feature imports.

Avoid a layered architecture for small React applications where the overhead of defining Presentational, Integration, Domain, and Data layers outweighs the benefits, as this Skill targets growing apps struggling with tangled code and fragile dependencies.