web-nuxt 的 Skills 与 vibe coding

web-nuxt 现在补了一套更适合 prompt 驱动改造的 skills 入口。目标很直接：让使用者先描述产品改动，再由 Codex 把请求映射到正确的页面、配置文件和共享层，而不是从一堆文件名开始猜。

推荐的 skills 组合

• $onboard 先看仓库分层、确认某个功能到底归哪个 layer。
• $customize-web-nuxt 当你就是要直接修改 apps/web-nuxt 本体时使用。适合 landing hero、pricing、docs、auth、guest-demo、dashboard 激活路径、前台代理路由等改动。
• $create-app 当你不想继续直接改模板，而是希望先从 apps/web-nuxt 复制出一个独立前台时使用。
• $customize-brand 适合复制出独立 app 之后做品牌、SEO、footer、manifest 级配置。
• $add-page 适合新增独立页面和路由。
• $add-dashboard 适合给用户仪表盘增加新的功能页或新入口。

什么时候直接改模板，什么时候先复制

如果当前工作对象就是 apps/web-nuxt，直接用 $customize-web-nuxt。

如果你需要租户隔离、独立包名，或者希望产品前台拥有自己的发布节奏，就先用 $create-app 复制，再对复制出来的 app 使用其它 skills。

最常见的改动面

• apps/web-nuxt/zship.app.json 品牌信息、SEO、footer、analytics、dashboard feature 开关。
• apps/web-nuxt/app/components/LandingPage.vue 首页 hero、CTA、营销区块、社证内容、尾部 CTA。
• apps/web-nuxt/app/pages/pricing.vue 定价页结构、对比表、销售 CTA。
• apps/web-nuxt/content/docs/* 中英文站内文档内容。
• apps/web-nuxt/server/api/* 前台页面用到的服务端代理。

如果某个改动明显属于 packages/nuxt-common-layer 或 packages/nuxt-ai-layer，Codex 应该先说明边界，而不是把一个局部页面需求直接扩散成共享层大改。

示例提示词

• Use $customize-web-nuxt to turn the landing hero into a waitlist-first launch page for an AI video tool.
• Use $customize-web-nuxt to simplify the dashboard home so the primary action is opening AI Playground.
• Use $customize-web-nuxt to add a docs page about API keys and link it in the existing docs list.
• Use $customize-web-nuxt to adjust pricing for annual plans only and update the CTA language across the landing page.
• Use $create-app NAME=my-product to fork web-nuxt, then use $customize-brand APP=apps/my-product to replace the default branding.

实际使用方式

1. 从仓库根目录开始。
2. 在提示词里显式写出 skill 名称。
3. 先描述产品改动目标，不要只丢一个文件名。
4. 让 Codex 先读现有实现，再补丁。
5. 改完后要求它在对应路由上做验证。

这样做的效果是：web-nuxt 会更像一个可以持续“边聊边改”的产品前台，而不是一个只能手工拆解的静态模板。