SuperAPI AI 工具集

feature-sliced-design

设计与创作

查看项目

更新于 10-16 05:07

技能介绍

Feature-Sliced Design(FSD)是一套前端架构方法参考技能,用于指导项目目录分层、模块依赖与导入规则。技能本身以文档形式组织,包含 SKILL.md、references、samples、scripts、rules 等目录,并提供任务到文档的映射表,便于按需查阅。

用途:在遵循 FSD 的项目中确定代码应放置的层级、允许的依赖方向,以及如何通过 Public API 对外暴露模块。

主要能力:文档覆盖层结构、导入规则、Public API 模式、切片与分段定义;示例覆盖典型项目结构、Next.js 与 React Query 集成、跨实体依赖与 pages/widgets 中的组合方式;脚本部分涉及工具链安装与命令行操作,包括用 steiger 做架构合规检查、用 @feature-sliced/cli 生成代码;规则部分覆盖层依赖方向、Public API 强制、切片隔离与分段命名。

必要用法与核心规则:代码分为 app、pages、widgets、features、entities、shared 六个标准层;导入只能指向更低层,同层切片之间不得互相导入;每个切片用 index.ts 定义 Public API,外部只能经 Public API 导入;不使用 export *,需显式列出导出内容;分段按目的命名,如 ui、model、api、lib、config,而非 components、hooks、types;app 与 shared 不含切片,只由分段组成。任务可按映射表定位 references/<topic>.md 与 rules/<rule>.md。

适用场景:采用 React 等组件化前端框架、希望约束模块边界与依赖方向的中大型项目,以及需要统一目录与导入规范的团队协作。

限制:资料为文档型参考,未提供具体版本号、安装命令细节、价格或实际运行效果;不同框架的具体落地方式需结合各自示例。具体命令与配置请以技能目录内 scripts 文档为准,本处暂未提供完整命令内容。