| name | forge-starter-new-page |
| description | Add admin UI only in Forge Starter: list, form modal, detail (modal or full page), menu entry. Chooses layout by cloning accounts (heavy) or approvals (light). Requires API/store already present or created via new-module first. Use for dashboard pages or finishing a resource after new-module.
|
Forge Starter New Page（只 UI）
页面 + 导航，不新建业务表/service（缺后端先跑 new-module）。
选型：docs/page-roles.md、docs/module-template.md §B。
When to use
- 「加列表页」「做详情 UI」「看板页」
- 「加 xxx 管理」的 第二步（数据已有或刚做完 new-module）
禁止
- 在本 skill 里从零加 schema/service（应先 new-module）
- 两行筛选 pills
- 侧栏塞「返回列表」
- 写死「默认全页详情」或「默认弹窗」
- 第二 UI 库、Tailwind 默认色、假按钮
sortable: true 却未实现排序（DataTable 不会自动排序）- 只 curl 验收
Step 0 — 选组件（禁止跳过）
写代码前 必须：
- 打开
docs/forge-components.md
- 按页面角色选组件包
- 记下要抄的 Starter 样板 + monorepo case 名
- 旁路有 monorepo 时：
../forge/.agents/skills/forge/SKILL.md- props 不确定 → 打开
../forge/src/app/cases/<name>/page.tsx（case 名见 forge-components 表）
- Modal 宿主：
components/ui/modal.tsx
- 表里没有的组件 →
FORGE-GAP，禁止 div 手搓
交付报告里写一句：用了哪些 Kit 组件 + 对照了哪个 case/样板。
Step 1 — 定角色与样板
从用户描述确定。先打开 /ref/ 对照范式，再抄业务样板接真数据。
| 角色 | 参考页（不进菜单） | 业务可运行样板 |
|---|
| collection 表格 | /ref/list-table | accounts、approvals |
| collection 卡片 | /ref/list-cards | — |
| form-modal | /ref/form-modal | *-form-dialog |
| form-page 整页 | /ref/form-page（CRM leads/new） | 字段极多时 |
| detail-modal | /ref/detail-modal | approval-detail-dialog |
| detail 业务对象 | /ref/detail | accounts/[id] |
| person CRM 人物 | /ref/person（john-bushmill） | — |
| profile 项目成员 | /ref/profile（members/[id]） | — |
| product 多 Tab | /ref/product | — |
| calendar | /ref/calendar | — |
| chat | /ref/chat | — |
| files | /ref/files | — |
| split 主从 | /ref/split | — |
| queue | /ref/queue | approvals 待办 |
| settings | /ref/settings | settings/* |
| activity | /ref/activity | — |
| dashboard 通用/精简 | /ref/dashboard-board · /ref/dashboard-kpi | /dashboard（ecommerce-2 完整） |
| dashboard CRM | /ref/dashboard-crm | monorepo dashboards/crm |
| dashboard Analytics | /ref/dashboard-analytics | monorepo dashboards/analytics |
| dashboard Project | /ref/dashboard-project | monorepo |
目录：docs/reference-pages.md、lib/reference/catalog.ts。
详情：
用户指定？ → 听用户
字段少、看完回列表？ → approvals（弹窗）
多区块、Tab、档案？ → accounts（全页）
拿不准？ → 问用户
交付说明里写 选了哪种 + 一句话理由。
Step 2 — 实现
列表
app/(app)/<res>/page.tsx- Header + 单行 ButtonGroup + 搜索 + DataTable + 空态
- 新建按钮 → form dialog
config/menu.tsx + config/site.ts（hideHeader: true）
表单弹窗
components/<res>-form-dialog.tsx- 调 store/API；成功后关窗或打开详情（按选型）
详情 · 弹窗
- 抄
components/approval-detail-dialog.tsx
- 列表行点击打开；可选
?id=；[id]/page 可 redirect
详情 · 全页
- 抄
app/(app)/accounts/[id]/page.tsx
- 顶栏主操作；侧栏只 meta；页内
← 或面包屑
数据层（UI 侧）
- API 必须已存在（new-module 产物）；没有 → 停，先 new-module。
- **store 默认在本步创建：
components/<res>-store.tsx + app/(app)/layout.tsx Provider（抄 accounts/approvals store）。
- 也可页内直接
fetch，但列表+弹窗+详情共享状态时优先 store。
- 业务持久化需要
DATABASE_URL；与 AUTH_MODE=demo 无关。
删除确认
- 使用
ConfirmationDialog 时，外层必须包 Modal 或半透明遮罩宿主（抄 accounts/page 删除流程），不要只渲染裸 Dialog 卡。
Step 3 — Verify
pnpm check
浏览器（必做）：
- 菜单进入列表
- 筛选只有一行
- 新建 → 持久化（刷新还在）
- 打开详情（弹窗或全页），主操作可用
- 能回到列表（关弹窗、页内返回、面包屑）
Step 4 — Audit（必做，不可省略）
按 .agents/skills/forge-starter-audit/SKILL.md 对本次改动执行完整四步审计（对照 docs/audit-checklist.md 逐条核查 → 样板结构对照 → 截图 → 修复重验），修复全部红线后才算交付。
Report
- 路由、菜单 label
- 详情形态 + 理由
- 对照样板：accounts 或 approvals
