catalog/repos/adamkasper--nuxt-fsd-skills.md

Nuxt FSD 架构技能

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

nuxt-fsd

一个用于在 Nuxt 4+ 项目中应用 Feature-Sliced Design（FSD）架构的 Agent 技能。

安装

npx skills add adamkasper/nuxt-fsd-skills

或使用直接 URL：

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