skills/ruan-cat/monorepo/init-shadcn-docs-nuxt

init-shadcn-docs-nuxt

Installation
SKILL.md

初始化 shadcn-docs-nuxt 组件库文档

以"最小可用 + 快速稳定"为目标,给任意项目建立可长期维护的 shadcn-docs-nuxt 文档站。

本技能拆分为三层:

  • SKILL.md — 导航与流程
  • references/ — 排错手册与配置说明
  • templates/ — 可直接复制的代码模板(含完整注释,注释即文档)

执行时按流程推进,遇到配置细节查 reference,需要代码直接读 template。

模板文件索引(templates/)

代码模板包含完整的注释说明,注释中记录了每个配置项的根因、不配置的后果、以及历史事故。使用时直接读取模板文件,不要跳过注释。

模板文件 对应文档站文件 说明
templates/nuxt.config.minimal.ts nuxt.config.ts 最小启动骨架
templates/nuxt.config.full.ts nuxt.config.ts 生产级完整配置(含全部兼容补丁)
templates/app.config.ts app.config.ts 站点元信息与 UI 配置
templates/tailwind.config.js tailwind.config.js 完整 Tailwind + shadcn-vue 主题
templates/assets/css/tailwind.css assets/css/tailwind.css CSS 入口 + 亮/暗主题变量
templates/assets/css/main.css assets/css/main.css 自定义样式示例
templates/shims/debug.ts shims/debug.ts debug ESM 兼容 shim
templates/workspace-aliases.ts workspace-aliases.ts 组件库源码别名函数
templates/plugins/ui-lib.ts plugins/xxx.ts Nuxt Plugin 注册模式
templates/package.json package.json 依赖与脚本基线
templates/prettierrc.json .prettierrc MDC 防护(兜底方案)
templates/prettierignore .prettierignore MDC 防护(主方案)

参考文档索引(references/)

文件 内容
references/nuxt-config.md 按需补丁策略、禁改项清单
references/compat.md ESM/CJS 兼容速查表、排查顺序、常见误判表
references/tailwind-css.md content 扫描规则、CSS 变量格式、常见样式问题排查
references/mdc-prettier.md MDC 标准语法、5 种错误写法对照、hydration mismatch 因果链
references/windows.md 构建假卡死、子进程链清理、EPERM 文件锁、单进程复现法
references/workspace.md 别名顺序陷阱、plugin 注册、i18n 单语、OG Image、目录结构

核心原则(5 条铁律)

  1. 保持精简nuxt.config.tsapp.config.ts 先最小化,不先堆功能。
  2. 先跑通再美化:优先确保 dev / build 稳定,再做样式和内容扩展。
  3. 先修运行链再修样式:交互异常(暗黑模式、侧边栏折叠失效)先查 hydration 和模块导入报错,不要先改 CSS。
  4. 避免错误扩展:不要第一时间折腾 i18n / icon 自定义方案,先使用模板默认可用路径。
  5. 内容语法严格:MDC 容器语法要标准化,参见 references/mdc-prettier.md

历史事故强约束(6 条记忆)

执行本技能时,必须默认带着这些"已发生过"的事故记忆

  1. 不要假设 workspace 组件库已经先构建完成;文档站需要能直接从源码启动。→ 见 references/workspace.md
  2. 不要把交互失效先归因到样式;先排除 hydration 被模块导入错误打断。→ 见 references/compat.md
  3. 不要让 prettier 改写 content/**/\*.md 的 MDC 结构。→ 见 references/mdc-prettier.md
  4. 不要在 Windows 下把"日志停住"直接判定为"进程卡死",先排查残留子进程。→ 见 references/windows.md
  5. 不要一开始就重写 i18n / icon 体系;先拿模板默认链路跑通。→ 见 references/nuxt-config.md
  6. 不要直接启用 ogImage 模块;会触发 vue.runtime.mjs does not provide an export named toValue 的 500 错误。→ 见 references/nuxt-config.md

推荐参考仓库优先级

按以下顺序学习并抽取配置(从高到低):

  1. nuxt-umami-docs(真实项目的稳定配置范式)
  2. shadcn-docs-nuxt-starter(最小骨架)
  3. shadcn-docs-nuxt(框架源码,仅用于查默认行为)
  4. shadcn-docs-ui-thing(组件库扩展思路,谨慎吸收)

每个仓库重点优先阅读这 6 个文件:package.jsonnuxt.config.tsapp.config.tstailwind.config.*assets/css/*content/index.md


标准落地流程

第 1 步:建立最小骨架

docs-site/
├─ package.json
├─ nuxt.config.ts
├─ app.config.ts
├─ tailwind.config.js
├─ assets/css/
│  ├─ tailwind.css
│  └─ main.css
├─ content/
│  └─ index.md
├─ shims/                  ← 按需,仅当 debug 兼容问题出现时
│  └─ debug.ts
├─ components/content/     ← 按需,自定义 MDC 组件
└─ plugins/                ← 按需,注册 workspace 组件库

如果是重构已有文档站,先保留现有 content/ 层级,不要和"底座重建"混在一次改动里。

第 2 步:依赖与脚本

详见 references/workspace.md § package.json 基线

核心要点:

  • 依赖:nuxtshadcn-docs-nuxtvuevue-routertailwindcsstailwindcss-animate
  • 如需消费 workspace 组件库,补 workspace:* 依赖
  • devDependencies:@iconify-json/lucide(Nuxt Icon 必需)
  • 脚本必须包含 predev / prebuild / postinstall 三处 nuxt prepare

第 3 步:Nuxt 配置

详见 references/nuxt-config.md

先用最小骨架启动,遇到客户端报错再按"按需补丁"策略逐项补兼容。

第 4 步:Tailwind + CSS

详见 references/tailwind-css.md

硬性检查content 扫描必须覆盖 node_modules/shadcn-docs-nuxt,否则主题类缺失、暗黑样式异常。

第 5 步:MDC 内容

详见 references/mdc-prettier.md

第 6 步:验证

执行后至少提供以下证据:

验证项 方法
启动 pnpm --filter <pkg> dev → 首页 HTTP 200
构建 pnpm --filter <pkg> build → 有 .output 产物
交互 暗黑模式切换、侧边栏折叠可用
内容 抽查至少 1 个 ::demo-playground 页面,无裸 marker 文本
console 无阻断 hydration 的 error

常见故障排查顺序

交互失效(暗黑模式切换失败、侧栏按钮无效)时,严格按此顺序

  1. 看浏览器 console 是否有模块导入错误 → references/compat.md
  2. 修依赖入口兼容(alias / optimizeDeps / dedupe / ssr.noExternal)
  3. 最后再做 Tailwind / 主题样式检查 → references/tailwind-css.md

构建卡住时 → references/windows.md

MDC 裸文本 / hydration mismatch → references/mdc-prettier.md


禁改项(无明确证据前不动)

  1. extends: ["shadcn-docs-nuxt"](它通常不是根因)
  2. 内容目录层级(底座改造阶段避免和内容重排耦合)
  3. i18n 多语言路线(单语文档站先保持最小配置)
  4. icon 体系大改(先沿用模板可用默认方案)
  5. ogImage: { enabled: false }(直接启用会触发 500)

反模式清单

  1. 先写大量"自定义配置",最后才验证能否启动。
  2. 用样式改动掩盖运行时导入错误。
  3. 批量格式化 content/**/*.md 后不做页面与 console 回归。
  4. 在同一轮同时重排内容架构 + 重构底座,导致回归不可定位。
  5. 只报"看起来好了",不附任何可重复验证证据。
  6. ::demo-playground 写成 ## ::demo-playground
  7. 在 Windows 下把"日志停住"直接判定为"进程卡死"而不先清理旧进程。

输出要求

执行本技能时,最终至少给出:

  1. 关键改动文件列表(配置、样式、内容)
  2. 运行与构建验证结果
  3. 若有风险项,给出下一步最小补救建议
Weekly Installs
5
GitHub Stars
3
First Seen
Mar 23, 2026