# Nuxt FSD 架构技能

`Nuxt` `Feature-Sliced Design` `架构` `AI技能` `前端`

# nuxt-fsd

一个用于在 [Nuxt 4+](https://nuxt.com/) 项目中应用 [Feature-Sliced Design](https://feature-sliced.design/)（FSD）架构的 Agent 技能。

## 安装

```bash
npx skills add adamkasper/nuxt-fsd-skills
```

或使用直接 URL：

```bash
npx skills add https://github.com/adamkasper/nuxt-fsd-skills
```

## 功能介绍

该技能教导 AI 编程 Agent 如何使用 Feature-Sliced Design 方法论来组织 Nuxt 4+ 项目结构，涵盖以下内容：

- **核心原则**：FSD 专属于 `src/` 目录，而 Nuxt 的 `app/` 目录作为运行时外壳来消费 FSD 内容
- **层级结构**：`pages → widgets → features → entities → shared`（均位于 `src/` 下）
- **轻量页面模式**：`app/pages/` 仅包含路由外壳，将实际逻辑委托给 `src/pages/` 中的 FSD 页面切片
- **导入规则**：使用 `~~/src/` 前缀，通过 `index.ts` 强制执行公共 API，严格遵循单向向下导入
- **页面优先工作流**：从 `src/pages/` 开始，仅在复用需求明确时（3次以上使用）才进行提取
- **Widget 与 Feature 的选择**：耦合的逻辑+UI（widget）vs 独立逻辑（feature）
- **TypeScript 配置**：在 Nuxt 生成的 tsconfig 中包含 `src/` 目录
- **迁移指南**：在现有 Nuxt 项目中引入 FSD 架构

## 触发时机

当 Agent 遇到以下情况时，该技能将自动激活：

- Nuxt 项目中的架构决策
- 关于新代码应放置位置的问题
- 创建新的 pages、features、entities 或 widgets
- 提及 FSD、feature-sliced、layers 或 slices
- 跨模块导入决策
- 代码提取与重构

## 许可证

MIT