React Feature Module Architecture
Guidelines for React feature-module layout, layer separation (Data / Domain / Integration / Presentational), naming, and cross-module boundaries.
When to Apply
Use this skill when:
- Defining or reviewing React folder structure and module boundaries
- Naming files, folders, or layers (components, containers, pages, hooks, utils)
- Deciding where code belongs (colocation, encapsulation, layer separation)
- Designing pure component props (no redundant/optional params) or cross-module communication
When to load the full guide: For tasks that involve module boundaries, layer layout, naming conventions, or cross-module communication, read AGENTS.md in full before proceeding.
Do NOT load AGENTS.md for single-file renames, style-only changes, or when only fixing a typo or a single component’s logic.
Quick Reference
| Layer |
Folders |
Purpose |
| Data |
api/, stores/ |
API hooks, cache keys, stores for cross-component state |
| Domain |
hooks/, utils/, types/, contexts/ |
Business logic, pure utils, types, DI |
| Integration |
containers/, pages/ |
Data + UI wiring, route entry, layout |
| Presentational |
components/ |
Pure UI, props-down/events-up, no optional/redundant props |
- Naming: kebab-case for files and folders; suffixes like
-page, -container, -context, .types, .schema, use-* for hooks.
- Modules: Domain-first boundaries (e.g.
user-profile, order-processing); flat structure; direct imports from source files (no barrel index.ts); enforce boundaries via ESLint rules.
- Pure components: Pass primitives/specific values, not full data shapes; required props only; validate undefined in parent.
Full guide (principles, module structure, layer rules, naming, common module, cross-module communication, testing): AGENTS.md.
1---2name: react-architect-skills3description: Use when writing, reviewing, or refactoring React or TanStack Router code for folder structure, naming, colocation, encapsulation, or layer separation. Triggers on React folder structure, naming rules, feature-module boundaries, or architecture decisions.4license: MIT5---67# React Feature Module Architecture89Guidelines for React feature-module layout, layer separation (Data / Domain / Integration / Presentational), naming, and cross-module boundaries.1011## When to Apply1213Use this skill when:1415- Defining or reviewing React folder structure and module boundaries16- Naming files, folders, or layers (components, containers, pages, hooks, utils)17- Deciding where code belongs (colocation, encapsulation, layer separation)18- Designing pure component props (no redundant/optional params) or cross-module communication1920**When to load the full guide:** For tasks that involve **module boundaries**, **layer layout**, **naming conventions**, or **cross-module communication**, read **[AGENTS.md](AGENTS.md)** in full before proceeding.2122**Do NOT load AGENTS.md** for single-file renames, style-only changes, or when only fixing a typo or a single component’s logic.2324## Quick Reference2526| Layer | Folders | Purpose |27|-------|---------|---------|28| Data | `api/`, `stores/` | API hooks, cache keys, stores for cross-component state |29| Domain | `hooks/`, `utils/`, `types/`, `contexts/` | Business logic, pure utils, types, DI |30| Integration | `containers/`, `pages/` | Data + UI wiring, route entry, layout |31| Presentational | `components/` | Pure UI, props-down/events-up, no optional/redundant props |3233- **Naming**: kebab-case for files and folders; suffixes like `-page`, `-container`, `-context`, `.types`, `.schema`, `use-*` for hooks.34- **Modules**: Domain-first boundaries (e.g. `user-profile`, `order-processing`); flat structure; direct imports from source files (no barrel `index.ts`); enforce boundaries via ESLint rules.35- **Pure components**: Pass primitives/specific values, not full data shapes; required props only; validate undefined in parent.3637Full guide (principles, module structure, layer rules, naming, common module, cross-module communication, testing): **[AGENTS.md](AGENTS.md)**.
tianyili