mcpField
F
feature-arch

feature-arch

github.com/thongdn-it开发5110 次安装41 周前更新
代码仓库

关于 feature-arch

feature-arch 是面向 React 应用的按功能组织架构指南，适用于开发团队规划模块边界和代码结构。指南包含按优先级划分的 42 条规则，覆盖目录、依赖、数据获取、状态和测试等方面。

主要功能

  1. 01按功能组织目录结构
  2. 02规定导入方向与模块边界
  3. 03提供数据获取和状态管理规则
  4. 04涵盖组件组织与测试策略
  5. 05按优先级编排 42 条规则

适用场景

  1. 01规划 React 项目的目录结构
  2. 02审查功能模块间的依赖
  3. 03统一团队的数据获取模式
  4. 04评估架构规则并组织测试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thongdn-it/react-agent-skills --skill feature-arch

安装后在 Claude Code 中输入/feature-arch确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
bound-event-based-communication.md
bound-feature-isolation.md
bound-feature-scoped-routing.md
bound-feature-size.md
bound-interface-contracts.md
bound-minimize-shared-state.md
fcomp-colocate-styles.md
fcomp-composition-over-props.md
fcomp-container-presentational.md
fcomp-error-boundaries.md
fcomp-props-as-data-boundary.md
fcomp-single-responsibility.md
fquery-avoid-n-plus-one.md
fquery-colocate-with-feature.md
fquery-feature-scoped-keys.md
fquery-parallel-fetching.md
fquery-server-component-fetching.md
fquery-single-responsibility.md
fstate-context-sparingly.md
fstate-feature-scoped-stores.md
fstate-lift-minimally.md
fstate-reset-on-unmount.md
fstate-server-state-separation.md
import-avoid-barrel-files.md
import-no-cross-feature.md

详细介绍

基于功能的架构最佳实践

全面的架构指南，介绍如何按功能组织 React 应用，从而支持各团队独立开展可扩展的开发。包含 8 个类别中的 42 条规则，并按影响程度排序，从关键项（目录结构、导入）到渐进改进项（命名约定）。

适用场景

在以下情况下，请参考这些指南：

  • 创建新功能或模块
  • 组织项目目录结构
  • 设置导入规则和边界
  • 实现数据获取模式
  • 组合来自多个功能的组件
  • 审查代码是否违反架构规范

按优先级划分的规则类别

优先级类别影响前缀
1目录结构关键struct-
2导入与依赖关键import-
3模块边界高bound-
4数据获取高fquery-
5组件组织中高fcomp-
6状态管理中fstate-
7测试策略中test-
8命名约定低name-

速查

1. 目录结构（关键）
  • struct-feature-folders - 按功能而非技术类型组织
  • struct-feature-self-contained - 使功能自成一体
  • struct-shared-layer - 仅将真正通用的代码放入共享层
  • struct-flat-hierarchy - 保持目录层级扁平
  • struct-optional-segments - 只包含必要的层级
  • struct-app-layer - 将应用层与各功能分开
2. 导入与依赖（关键）
  • import-unidirectional-flow - 强制采用单向导入流
  • import-no-cross-feature - 禁止跨功能导入
  • import-public-api - 仅通过公共 API 导出
  • import-avoid-barrel-files - 避免通过深层 Barrel 文件重新导出
  • import-path-aliases - 使用一致的路径别名
  • import-type-only - 对类型使用纯类型导入
3. 模块边界（高）
  • bound-feature-isolation - 强制功能隔离
  • bound-interface-contracts - 定义明确的接口契约
  • bound-feature-scoped-routing - 将路由限定在功能范围内
  • bound-minimize-shared-state - 尽量减少功能之间的共享状态
  • bound-event-based-communication - 使用事件进行跨功能通信
  • bound-feature-size - 让功能保持适当的规模
4. 数据获取（高）
  • fquery-single-responsibility - 让查询函数只负责单一任务
  • fquery-colocate-with-feature - 将数据获取逻辑与功能放在一起
  • fquery-parallel-fetching - 并行获取相互独立的数据
  • fquery-avoid-n-plus-one - 避免 N+1 查询模式
  • fquery-feature-scoped-keys - 使用功能范围内的查询键
  • fquery-server-component-fetching - 在服务端组件层级获取数据
5. 组件组织（中高）
  • fcomp-single-responsibility - 让组件遵循单一职责原则
  • fcomp-composition-over-props - 优先使用组合，而非逐层传递属性
  • fcomp-container-presentational - 分离容器逻辑与展示逻辑
  • fcomp-props-as-data-boundary - 使用属性作为功能边界
  • fcomp-colocate-styles - 将样式与组件放在一起
  • fcomp-error-boundaries - 使用功能级错误边界
6. 状态管理（中）
  • fstate-feature-scoped-stores - 将状态存储限定在功能范围内
  • fstate-server-state-separation - 将服务端状态与客户端状态分开
  • fstate-lift-minimally - 仅在必要时向上提升状态
  • fstate-context-sparingly - 谨慎使用上下文管理功能状态
  • fstate-reset-on-unmount - 卸载时重置功能状态
7. 测试策略（中）
  • test-colocate-with-feature - 将测试与功能放在一起
  • test-feature-isolation - 隔离测试各项功能
  • test-shared-utilities - 创建功能专用的测试工具
  • test-integration-at-app-layer - 在应用层编写集成测试
8. 命名约定（低）
  • name-feature-naming - 使用领域驱动的功能名称
  • name-file-conventions - 使用一致的文件命名约定
  • name-descriptive-exports - 使用描述性导出名称

使用方法

阅读单独的参考文件，了解详细说明和代码示例：

  • 章节定义 - 类别结构和影响级别
  • 规则模板 - 添加新规则的模板
  • 单条规则：references/{prefix}-{slug}.md

相关技能

  • 如需进行功能规划，请参阅 feature-spec 技能
  • 如需获取数据，请参阅 tanstack-query 技能
  • 如需了解 React 组件模式，请参阅 react-19 技能

完整汇编文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown