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