关于 feature-slicing
为前端开发者提供按 Feature-Sliced Design v2.1 判断模块归属和边界的指南，强调遵循现有项目结构并明确导入规则。
主要功能
- 01判断模块所属层级
- 02遵循 FSD 导入约定
- 03设计切片公共 API
- 04保留框架目录与边界
- 05提供迁移和实现参考
适用场景
- 01评估新模块应放置的位置
- 02检查跨层导入是否合规
- 03按需整理现有代码结构
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/feature-slicing确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/CHEATSHEET.mdIMPLEMENTATION.mdLAYERS.mdMIGRATION.mdNEXTJS.mdPUBLIC-API.md详细介绍
Feature-Sliced Design
将 FSD v2.1 应用于所请求的模块边界决策。用户的明确指示优先于本指南；普通的前端编辑并不意味着可以迁移其架构。
在项目中工作
将受影响的文件、导入、框架／路由器以及所请求的行为作为输入。判断仓库是否已使用 FSD，或用户是否要求采用 FSD。如果两者都不是，则保留现有结构。
优先由页面本地负责，直到共享使用或明确的职责足以证明提取的合理性：
| 层 | 职责 |
|---|---|
app | 初始化、提供程序、路由 |
pages | 页面及其本地 UI、数据和逻辑 |
widgets | 自包含的 UI 模块 |
features | 可复用的用户交互 |
entities | 共享的业务概念 |
shared | 基础设施和与领域无关的实用工具／UI |
只使用所需的层。保留框架预留目录和服务端／客户端边界，尤其是在 Next.js 中。
维护导入约定
- 切片只能从较低层导入其他切片，不能横向或向上导入。显式的
@xAPI 是文档规定的跨实体例外。 app和shared使用分段而非切片；它们的分段可以相互导入。- 有意设计公开 API。使用内部相对导入，避免导入切片自身的导出入口；将仅限服务端的导出排除在客户端入口点之外。
- 按用途命名 FSD 分段（
ui、api、model、lib、config）。不要只为匹配示例而重命名无关文件夹。
根据请求完成文件放置、重构或审查，并提供最终的导入路径。对于代码更改，验证受影响的导入，并在可用时使用现有的架构检查工具。只有在任务要求配置工具时，才安装 Steiger 或重写路径别名。
参考资料
选择能解决当前决策的参考资料。
| 任务 | 参考资料 |
|---|---|
| 层的归属与提取 | LAYERS.md |
公开 API、导出入口、循环依赖、@x | PUBLIC-API.md |
| 具体的实体／功能／组件／页面示例 | IMPLEMENTATION.md |
| Next.js 路由目录及服务端／客户端导出 | NEXTJS.md |
| 按请求迁移现有代码 | MIGRATION.md |
| 导入矩阵或精简的结构查询 | CHEATSHEET.md |
有关规范问题，请参阅 FSD 官方文档。根据已安装的技术栈调整示例库和别名。
评论
支持 Markdown