关于 react-architect-skills
react-architect-skills 为 React 功能模块提供组织指南，帮助开发者规划分层、命名、组件属性和模块边界，并说明何时查阅完整指南。
主要功能
- 01Data、Domain、Integration、Presentational 分层
- 02文件与目录命名约定
- 03领域优先的模块边界
- 04纯组件属性设计建议
- 05跨模块导入与 ESLint 规则
适用场景
- 01规划 React 功能模块结构
- 02审查模块之间的边界
- 03选择 React 文件和目录名称
- 04决定组件间的通信方式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-architect-skills确认已加载。
附带文件AGENTS.md
详细介绍
React 功能模块架构
React 功能模块布局、层级分离（Data / Domain / Integration / Presentational）、命名和跨模块边界指南。
适用场景
在以下情况使用此技能：
- 定义或审查 React 文件夹结构和模块边界
- 为文件、文件夹或层级（组件、容器、页面、钩子、工具）命名
- 决定代码的归属位置（就近放置、封装、层级分离）
- 设计纯组件的属性（无冗余或可选参数）或跨模块通信
何时加载完整指南： 对于涉及模块边界、层级布局、命名约定或跨模块通信的任务，请先完整阅读 AGENTS.md。
请勿加载 AGENTS.md：对于单文件重命名、仅修改样式，或只修复拼写错误或单个组件逻辑的情况。
快速参考
| 层级 | 文件夹 | 用途 |
|---|---|---|
| Data | api/、stores/ | API 钩子、缓存键、用于跨组件状态的 store |
| Domain | hooks/、utils/、types/、contexts/ | 业务逻辑、纯工具函数、类型、DI |
| Integration | containers/、pages/ | 数据与 UI 的连接、路由入口、布局 |
| Presentational | components/ | 纯 UI、属性向下传递／事件向上冒泡、不使用可选或冗余属性 |
- 命名：文件和文件夹使用 kebab-case；后缀示例：
-page、-container、-context、.types、.schema，钩子使用use-*。 - 模块：以领域为先划分边界（例如
user-profile、order-processing）；采用扁平结构；直接从源文件导入（不使用 barrelindex.ts）；通过 ESLint 规则强制执行边界。 - 纯组件：传递基本类型／特定值，而非完整数据结构；仅使用必需属性；在父组件中验证 undefined。
完整指南（原则、模块结构、层级规则、命名、通用模块、跨模块通信、测试）：AGENTS.md。
评论
支持 Markdown