用途:在 apps/web/src/pages 目录下快速生成符合项目架构规范的新页面,先产出代码骨架,再由开发者或 AI 填充业务逻辑。触发时机为用户要求创建新页面、增加路由页面或生成页面脚手架时。
主要能力:支持无监督生成与有监督生成两种模式。无监督模式全自动推导结构,直接使用 judgeHasStore.ts 逻辑判断选项;有监督模式在关键节点(如是否需要 Store)提供推荐并询问用户确认。UI 复杂度分为 simple、standard、complex 三级,由 judgeUIComplexity.ts 智能判断,也可手动指定覆盖。生成文件包括基础的 index.ts、[PageName].tsx、[PageName]Content.tsx,以及当 hasStore=true 时的 _store 目录下 index.ts、provider.tsx、slice 与 store 文件。
使用方式:技能必须在开始生成前主动询问用户选择生成模式,不得跳过或默认。随后校验参数(pageName 需为 PascalCase),判断 Store 与 UI 复杂度,规划文件列表,按顺序复用模版生成 Store、Content、Wrapper 和 Index,最后提醒用户在路由文件中注册页面。
质量要求:生成代码需通过 TypeScript 编译,强制使用 Zustand selectors,Store 仅存储 UI 状态不存储业务实体数据,Wrapper 在有 Store 时必须正确嵌套 StoreProvider。
限制:执行完全依赖 ANATOMY.md、schema.ts、judgeHasStore.ts、judgeUIComplexity.ts 及各 TEMPLATE 文档;生成前需验证目标路径不存在以避免覆盖。具体配置与目录结构示例需参考资料所列文档。