# React Architect Skills

> 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.

- Skill: `tianyili/react-architect-skills` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tianyili/react-architect-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tianyili/react-architect-skills/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: tianyili (https://skillmd.com/u/tianyili)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tianyili/react-architect-skills

---


# 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](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](AGENTS.md)**.