mcpField
R
react-architect-skills

react-architect-skills

github.com/tianyiliDevelopment152 installsUpdated 10w ago
Repository

About react-architect-skills

react-architect-skills is a guide for organizing React feature modules. It helps developers make decisions about layers, naming, component props, and module boundaries, with guidance for when to consult the full guide.

Key features

  1. 01Data, Domain, Integration, and Presentational layers
  2. 02Folder and file naming conventions
  3. 03Domain-first module boundaries
  4. 04Pure component prop guidance
  5. 05Cross-module import and ESLint rules

Use cases

  1. 01Planning a React feature module layout
  2. 02Reviewing boundaries between modules
  3. 03Choosing names for React files and folders
  4. 04Deciding how components communicate

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tianyili/skills --skill react-architect-skills

After installing, type/react-architect-skillsin Claude Code to confirm it loaded.

Bundled filesAGENTS.md

Details

From the project README

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

LayerFoldersPurpose
Dataapi/, stores/API hooks, cache keys, stores for cross-component state
Domainhooks/, utils/, types/, contexts/Business logic, pure utils, types, DI
Integrationcontainers/, pages/Data + UI wiring, route entry, layout
Presentationalcomponents/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.

Comments

Markdown supported