feature-arch

Name: feature-arch
Author: pymodel

github.com/pymodel开发40488 次安装4 周前更新

代码仓库

关于 feature-arch

围绕功能组织 React 应用的参考技能，包含 42 条规则，分为八类，涵盖目录布局、导入边界、数据获取、状态管理、测试与命名。

主要功能

01八类共 42 条规则
02按功能组织目录
03导入边界与公共 API
04功能隔离与接口约定
05数据获取和状态管理建议
06组件、测试与命名实践

适用场景

01组织新的 React 功能模块
02制定导入规则和模块边界
03审查架构违规问题
04规划功能级数据获取与测试

安装

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

$npx skills add https://github.com/pymodel/react-frontend-skills --skill feature-arch

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

包含的文件

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

references/

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

import-path-aliases.md

import-public-api.md

import-type-only.md

import-unidirectional-flow.md

name-descriptive-exports.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/<rule-id>.md：了解其重要性，以及错误与正确的代码示例。

分层和边界规则符合 Feature-Sliced Design（FSD），这是目前应用最广泛的 React 架构标准；完整方法请参阅 feature-sliced.design。

基本信息

作者: pymodel
仓库: pymodel/react-frontend-skills
分类: 开发
安装次数: 488
GitHub Stars: 40

报告问题

feature-arch

关于 feature-arch

主要功能

适用场景

安装

包含的文件

详细介绍

基于功能的架构最佳实践

适用场景

按优先级划分的规则类别

速查

1. 目录结构（关键）

2. 导入与依赖（关键）

3. 模块边界（高）

4. 数据获取（高）

5. 组件组织（中高）

6. 状态管理（中）

7. 测试策略（中）

8. 命名约定（低）

使用方法

相关技能

评论