fsd
指导在前端项目中应用Feature-Sliced Design v2.1架构方法。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：fsd。 它的用途是：指导在前端项目中应用Feature-Sliced Design v2.1架构方法。 完整的 Skill 内容见：https://321skill.com/skills/fsd/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在启动一个新的React管理后台项目，请按照FSD v2.1的‘页面优先’原则，为我规划核心的用户管理和订单管理模块的目录结构。” 它会根据FSD的分层规则，建议你将用户登录表单、用户列表页面等代码先放在`pages/`和`widgets/`目录下，并说明何时应将`User`模型提取到`entities/user/`，或将“修改密码”功能提取到`features/auth/change-password/`。
介绍
Feature-Sliced Design (FSD) v2.1 是一个前端架构方法论，旨在解决大型前端项目因代码结构混乱、职责不清而导致的维护困难、团队协作成本高和需求变更响应慢的问题。它通过一套明确的规则和分层约定，将代码按业务意义和复用层级组织起来，使项目结构更清晰、可预测。
FSD v2.1的核心是“页面优先”原则和六层架构。使用时，开发者首先将代码组织在页面和部件层，仅在确实需要复用时，才将代码下沉到功能、实体或共享层。这六层从上到下依次是：应用层、页面层、部件层、功能层、实体层和共享层，并遵循严格的单向依赖规则，即上层模块只能导入下层模块。
这个Skill适合正在构建或重构中大型前端项目的开发者、技术负责人和架构师，尤其适用于React、Vue等组件化框架的项目，以及需要长期维护和多人协作的团队。它帮助团队建立统一的架构语言，降低新成员的理解成本。
与传统的MVC、MVVM或原子设计（Atomic Design）等模式相比，FSD v2.1更侧重于按业务领域（特性）和复用层级进行垂直切分，而非单纯按技术角色或组件粒度划分。其最新的“页面优先”理念，避免了过早抽象带来的过度设计，倡导一种更务实、渐进式的代码组织方式。
核心特点
FSD v2.1引入了革命性的“页面优先”原则，强调代码应首先保留在使用它的页面和部件中，仅在需要复用时才向下层迁移，这与许多架构方法鼓励的“提前抽象”截然不同，能有效减少过度设计。同时，它提供了清晰、严格的六层单向依赖规则，为前端项目提供了可落地的、标准化的架构约束，而非模糊的概念。
注意事项
对于小型、一次性或原型项目，引入FSD的完整分层可能会增加不必要的复杂性和开销。
常见问题
FSD和微前端有什么区别？
FSD是单体应用内的代码组织架构，关注模块间的职责与依赖；微前端是将应用拆分为独立部署的子应用，关注技术栈隔离与独立发布。两者可结合使用。
FSD v2.1最大的变化是什么？
v2.1核心是“页面优先”原则，建议代码优先放在页面和部件层，反对过早提取到功能/实体层，并正式弃用了“processes”层。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/fsd/raw/index.md 读取 fsd 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/fsd/raw/index.md（查看排版版本）