@givolt/i3-composer-agent 2.2.2 → 2.3.0

package/skills/i3-idea-refine/SKILL.md

@@ -17,8 +17,18 @@ Skill/Command/Agent 标识、文件路径、命令参数、代码/API 名称、
 
 # Idea Refine
 
+## Overview
+
 Refines raw ideas into sharp, actionable concepts worth building through structured divergent and convergent thinking.
 
+## When to Use
+
+- Use when an idea is still vague and needs shaping before it can become a plan
+- Use when you need to stress-test assumptions before committing to a direction
+- Use when you want to expand options before converging on one
+- Trigger phrases: "Help me refine this idea", "Ideate on [concept]", "Stress-test my plan"
+- Not for: a user who is unsure what they want at all (use `i3-interview-me`), or a direction already chosen that needs a spec (use `i3-spec-driven-development`)
+
 ## How It Works
 
 1.  **Understand & Expand (Divergent):** Restate the idea, ask sharpening questions, and generate variations.
@@ -34,11 +44,6 @@ This skill is primarily an interactive dialogue. Invoke it with an idea, and the
 bash skills/i3-idea-refine/scripts/idea-refine.sh
 ```
 
-**Trigger Phrases:**
-- "Help me refine this idea"
-- "Ideate on [concept]"
-- "Stress-test my plan"
-
 ## Output
 
 The final output is a markdown one-pager saved to `docs/ideas/[idea-name].md` (after user confirmation), containing:
@@ -167,6 +172,16 @@ Direct, thoughtful, slightly provocative. You're a sharp thinking partner, not a
 
 Read `examples.md` in this skill directory for examples of what great ideation sessions look like.
 
+## Common Rationalizations
+
+| Rationalization | Reality |
+|---|---|
+| I'll generate 20+ ideas to cover all bases | 5-8 well-considered variations beat 20 shallow ones. Quality over quantity. |
+| The user just needs encouragement, not critique | A yes-machine produces weak ideas. Push back with specificity and kindness. |
+| Who this is for is obvious — no need to ask | Every good idea starts with a person and their problem. Skipping it means designing for nobody. |
+| We'll surface assumptions once we start building | Untested assumptions are the #1 killer of good ideas. Surface them before committing. |
+| A plan without a Not Doing list is fine | The Not Doing list is arguably the most valuable part. Make trade-offs explicit. |
+
 ## Red Flags
 
 - Generating 20+ shallow variations instead of 5-8 considered ones

package/skills/i3-incremental-implementation/SKILL.md

@@ -192,6 +192,10 @@ Each increment should be independently revertable:
 - Database migrations should have corresponding rollback migrations
 - Avoid deleting something in one commit and replacing it in the same commit — separate them
 
+## UI Slices with Prototype Baselines
+
+For a UI slice, check `.i3-ui-prototypes.json` for an applicable approved prototype. Read its design contract, business mapping and baseline before implementation, and include affected interaction/visual checks in the slice acceptance. Preserve prior snapshots; coordinate contract changes through `i3-ui-prototype`. Backend-only slices and projects without a baseline continue the existing increment workflow.
+
 ## Working with Agents
 
 When directing an agent to implement incrementally:

package/skills/i3-performance-optimization/SKILL.md

@@ -57,12 +57,12 @@ Two complementary approaches — use both:
 - **RUM (web-vitals library, CrUX):** Real user data in real conditions. Required to validate that a fix actually improved user experience.
 
 **Frontend:**
-```bash
-# Synthetic: Lighthouse in Chrome DevTools (or CI)
-# Chrome DevTools → Performance tab → Record
-# Chrome DevTools MCP → Performance trace
+```javascript
+// Synthetic: Lighthouse in Chrome DevTools (or CI)
+// Chrome DevTools → Performance tab → Record
+// Chrome DevTools MCP → Performance trace
 
-# RUM: Web Vitals library in code
+// RUM: Web Vitals library in code
 import { onLCP, onINP, onCLS } from 'web-vitals';
 
 onLCP(console.log);
@@ -71,12 +71,12 @@ onCLS(console.log);
 ```
 
 **Backend:**
-```bash
-# Response time logging
-# Application Performance Monitoring (APM)
-# Database query logging with timing
+```javascript
+// Response time logging
+// Application Performance Monitoring (APM)
+// Database query logging with timing
 
-# Simple timing
+// Simple timing
 console.time('db-query');
 const result = await db.query(...);
 console.timeEnd('db-query');

package/skills/i3-security-and-hardening/references/hardening-patterns.md

@@ -167,7 +167,7 @@ The `range() !== 'unicast'` check covers loopback, link-local `169.254.169.254`
 import { z } from 'zod';
 
 const CreateTaskSchema = z.object({
-  title: z.string().min(1).max(200).trim(),
+  title: z.string().max(200).trim().min(1),
   description: z.string().max(2000).optional(),
   priority: z.enum(['low', 'medium', 'high']).default('medium'),
   dueDate: z.string().datetime().optional(),

package/skills/i3-shipping-and-launch/SKILL.md

@@ -202,6 +202,12 @@ Client metrics:
 ```typescript
 // Set up error boundary with reporting
 class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
   componentDidCatch(error: Error, info: React.ErrorInfo) {
     // Report to error tracking service
     reportError(error, {

package/skills/i3-test-driven-development/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: i3-test-driven-development
-description: "执行测试先行的红绿重构循环。适用于实现逻辑、修复缺陷、修改行为、复现报错及证明改动有效；缺陷修复使用先证明失败的 Prove-It 模式。"
-# i3-description-source: "description: Drives development with tests using the red-green-refactor loop. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality."
+description: "执行测试先行的红绿重构循环。适用于实现逻辑、修复缺陷、修改行为、复现报错及证明改动有效；也用于为函数补测试、修复或修改直接粘贴的代码，即使请求未提到测试；缺陷修复使用先证明失败的 Prove-It 模式。"
+# i3-description-source: "description: Drives development with tests using the red-green-refactor loop. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality. Use when asked to add tests to a function, fix a bug in it or change its behavior, even when the code is pasted inline and the request does not mention tests."
 ---
 
 <!-- i3:zh-CN:start -->
@@ -12,7 +12,7 @@ description: "执行测试先行的红绿重构循环。适用于实现逻辑、
 Skill/Command/Agent 标识、文件路径、命令参数、代码/API 名称、工具调用参数、JSON 键/类型/枚举、机器状态、测试期望字面量及引用原文保持原样。生成文档正文用中文，SPEC.md、tasks/plan.md、tasks/todo.md、CONSTRAINTS.md 等约定路径不改名。
 严重程度按原规则判断，面向用户可写“严重（Critical）”“必须修复（Required）”“小问题（Nit）”“可选（Optional）”“建议考虑（Consider）”“仅供参考（FYI）”；High/Medium/Low、APPROVE/REQUEST CHANGES 和 GO/NO-GO 保留其原始语义与机器值。不得因翻译降低门槛，角色不能互相委派。
 
-适用说明：执行测试先行的红绿重构循环。适用于实现逻辑、修复缺陷、修改行为、复现报错及证明改动有效；缺陷修复使用先证明失败的 Prove-It 模式。
+适用说明：执行测试先行的红绿重构循环。适用于实现逻辑、修复缺陷、修改行为、复现报错及证明改动有效；也用于为函数补测试、修复或修改直接粘贴的代码，即使请求未提到测试；缺陷修复使用先证明失败的 Prove-It 模式。
 <!-- i3:zh-CN:end -->
 
 # Test-Driven Development

package/skills/i3-ui-prototype/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: i3-ui-prototype
+description: "根据业务需求选择 UI 模板，生成、评审并迭代交互原型。适用于选择原型模板、制作可操作审查原型、检查原型一致性及维护已确认的原型基线。"
+# i3-description-source: "description: Creates and iterates reviewable interactive UI prototypes from selected templates and business requirements. Use when choosing UI prototype templates, generating interactive prototypes for review, inspecting prototype fidelity, or maintaining approved prototype baselines."
+---
+
+<!-- i3:zh-CN:start -->
+## 中文交互与输出
+
+默认使用简体中文回复，包括追问、选项说明、阶段进度、分析、规格、计划、验收、代码审查与发布报告。只有用户明确要求其他语言时才切换；输入中出现英文术语、代码或引用不构成切换语言的要求。
+下文的工程步骤、审批要求、退出条件和工具约束完整有效。英文示例中的人类可读标题、说明和占位内容在实际输出时应译为中文；保留原有信息与验证标准，不删减方法。
+Skill/Command/Agent 标识、文件路径、命令参数、代码/API 名称、工具调用参数、JSON 键/类型/枚举、机器状态、测试期望字面量及引用原文保持原样。生成文档正文用中文，SPEC.md、tasks/plan.md、tasks/todo.md、CONSTRAINTS.md 等约定路径不改名。
+严重程度按原规则判断，面向用户可写“严重（Critical）”“必须修复（Required）”“小问题（Nit）”“可选（Optional）”“建议考虑（Consider）”“仅供参考（FYI）”；High/Medium/Low、APPROVE/REQUEST CHANGES 和 GO/NO-GO 保留其原始语义与机器值。不得因翻译降低门槛，角色不能互相委派。
+
+适用说明：根据业务需求选择 UI 模板，生成、评审并迭代交互原型。适用于选择原型模板、制作可操作审查原型、检查原型一致性及维护已确认的原型基线。
+<!-- i3:zh-CN:end -->
+
+# UI Prototype
+
+## Overview
+
+基于业务需求与选定模板交付可操作、可评审的 HTML 原型，保留设计决策、业务映射、浏览器证据和已确认基线。默认使用专业增强模式；用户明确选择后可使用模板模式。原型认可、正式规格、生产开发与发布分别处理。
+
+## When to Use
+
+- 选择 UI 原型模板，按业务需求生成交互原型。
+- 根据评审意见修改原型，检查与既有基线的一致性。
+- 确认具体原型版本，维护后续迭代使用的设计基线。
+
+仅实现已有设计的生产组件时 use the `i3-frontend-ui-engineering` skill。普通排错、纯后端工作和不涉及原型的代码评审继续使用对应工程技能。
+
+## Process
+
+### 1. 读取上下文与选择操作
+
+读取项目规则、实际需求和技术栈，以及项目根 `.i3-ui-prototypes.json` 指向的相关原型。没有正式规格时先整理最小业务范围与待确认项，不能补造审批权限或把演示规则写成已确认需求。
+
+选择 `create`、`revise`、`inspect` 或 `confirm-baseline`；无参数默认 `create`。操作契约及产物规则见 [workflow-contract.md](references/workflow-contract.md) 和 [artifact-contract.md](references/artifact-contract.md)。
+
+### 2. 检测专业能力并继续模板预览
+
+新增原型默认 `professional`（专业增强模式）。从当前宿主实际暴露的技能位置发现 UI/UX Pro Max，再运行本技能 `scripts/check-design-provider.cjs --provider <实际技能根>`。不能硬编码开发者的缓存路径、把另一宿主的安装误当当前可用，或仅凭目录存在判断可执行。需要按宿主目录检测时使用明确的 `--host` 和 `--project`。
+
+检测不阻断模板预览，先继续展示模板并记录选择。生成前已可用时自动使用；缺失或不可执行时明确给出安装/修复与“模板模式继续”“先整理需求和模板选择”。用户选择安装后按该宿主的官方方法安装并验证；已有授权或已选择模板模式时不重复确认。安装系统运行环境需根据实际缺项处理，不能静默改动操作系统。
+
+模板模式使用 `template`，仍使用同一套业务和浏览器验收标准。不得静默切换，交付记录必须说明实际模式。专业接入的查询与建议适配见 [expert-adapter.md](references/expert-adapter.md)。
+
+### 3. 选择模板并固定版本
+
+运行 `node <skill-root>/scripts/init-prototype.cjs templates` 查看四类：企业管理后台、AI 工作台、数字孪生大屏、移动端应用。按 availability 区分可操作模板与 planned；不能把待建设类型生成成其他类型。通过 `node <skill-root>/assets/templates/serve-gallery.cjs` 打开选择页。企业后台直接复用 EASEL 完整 HTML 审查版，当前可供人工测试，其余三类待后续实施。已有模板选择时沿用。
+
+选择页只切换预览，不创建或确认业务实例。可生成模板使用 catalog/manifest 显式指定运行层；未知或缺失 adapter 不回退到 common。资源组织、独立模板扩展与旧实例兼容见 [template-adapters.md](references/template-adapters.md)。
+
+企业后台保留原 EASEL 的全部页面、样式、控件和交互。审查整套模板时显式使用 `--purpose template-review`；为新业务生成时沿用默认 business-prototype，替换项目菜单、字段、状态、角色、数据和需求映射，完成后才将 business.status 标为 adapted。旧 classic-admin、modern-workspace、data-operations 仅保留兼容和历史样例迭代，不再作为新项目首选。框架工程保持既有设计规则，交接包含真实组件映射，HTML 审查版不等于真实 Vue/React 组件工程。
+
+创建示例：
+
+```sh
+node <skill-root>/scripts/init-prototype.cjs --project <project-root> --id enterprise-review --template enterprise-admin --purpose template-review --provider <uiux-skill-root>
+# 仅在用户明确选择模板模式后：
+node <skill-root>/scripts/init-prototype.cjs --project <project-root> --id enterprise-review --template enterprise-admin --purpose template-review --expert-mode template
+```
+
+企业后台初始化保留完整 EASEL 示例。template-review 用于本次模板人工审查；business-prototype 初始为 needs-adaptation，未完成实际业务适配时验收守卫拒绝通过。复制的 app/qa 是历史来源材料，本次验收使用原型根 qa/。目标已存在时使用迭代流程，不覆盖。完整复用、来源核对与响应式规则见 [enterprise-admin.md](references/enterprise-admin.md)。
+
+### 4. 专业设计与业务实现
+
+将需求编号映射到页面、字段、操作、角色、可见范围、状态与验收场景。专业增强模式加载已发现的 UI/UX Pro Max 指令，运行真实查询并核对匹配；建议不能覆盖选定模板、需求或已认可的规则。查询失配时缩小问题重试一次，仍失配则拒绝并记录依据。
+
+专业建议的采用/拒绝写入 `qa/design-advice.json`，包括查询、结果身份、原因和验证条件。被采用规则写入 `design-system/MASTER.md`、token 或页面规则。基础工程与业务映射始终由 i3 维护。
+
+有实际查询及适用建议采用记录后，将 prototype.json 的 expert.status 更新为 used；没有适用结果时记录 no-match。HANDOFF.md 同步本次真实使用情况，不能保留初始化时“专业建议待适配”的描述冒充已完成。
+
+Follow the `i3-frontend-ui-engineering` skill 实现原型。固定模板版本和 token，新增页面复用组件约定。演示数据、状态切换和本地权限模拟必须可复现；普通按钮反馈不能代替完整的业务流程。修改 token 后同步 `app/tokens.css`。
+
+### 5. 验证并交付候选
+
+运行 `node <skill-root>/scripts/check-prototype.cjs <prototype-root>`，再启动 `node app/serve.cjs`。Follow the `i3-browser-testing-with-devtools` skill 或当前宿主可用的等效真实浏览器能力，检查需求映射中的主流程、校验、权限演示、失败反馈、窄屏、键盘焦点和控制台。
+
+先取 `manage-baseline.cjs manifest <prototype-root>` 的版本与内容摘要，将实际浏览器结果、场景 ID、视口和截图保存到 `qa/browser.json`，绑定同一摘要。运行 `check-prototype.cjs <prototype-root> --acceptance` 核对证据与覆盖；有修改则旧证据失效。
+
+没有实际浏览器证据时交付待验证候选，不能填写 `passed`。本地通过仍是 `pending-review`。提供可打开的预览、模式、范围、待确认问题、检查结果和 `HANDOFF.md`；关键检查失败时明确阻断项。
+
+实际验收通过后，将 prototype.json 的 verification 更新为 passed 并记录对应 digest；review 保持 pending-review。文件再变化时重新验证，不能只修改状态字段。
+
+### 6. 迭代与确认
+
+`revise` 先运行 `manage-baseline.cjs revise <prototype-root> --revision r002`，读取当前设计契约和旧基线，按反馈产生新候选并重新验证受影响场景。保留旧基线和其确认记录；修改全局设计或业务状态规则必须说明差异。
+
+`confirm-baseline` 只能依据用户对明确版本的认可。确认 JSON 含 `revision`、`digest`、`reviewer`、`statement`、`source`，记录用户原意和来源，不能由代理自我认可。先通过当前验收，再运行 `manage-baseline.cjs confirm-baseline <prototype-root> --confirmation <record.json>`。版本或摘要不符、必需证据缺失、旧基线已存在时脚本拒绝。
+
+后续 UI 实现读取项目清单、适用基线及页面规则，运行差异检查。`check-prototype.cjs --enforce-baseline` 可作为设计契约变更检查；它检查原型及其契约，不自动证明任意生产代码的视觉一致性。需要强制合并门禁时由项目实际 Hook/CI 接入并验证。
+
+## Common Rationalizations
+
+| 想法 | 要求 |
+| --- | --- |
+| 专业技能缺失就直接换成模板模式 | 先提示安装或修复，用户明确选择后才切换 |
+| 搜索返回了配色和首页结构就全部采用 | 核对产品与页面匹配，业务界面不能被营销结构替换 |
+| 通用演示生成成功就是完成用户业务 | 按实际需求实现并更新业务映射与验收 |
+| 测试通过可以标记用户已批准 | 本地验证与具体版本的用户认可分别记录 |
+| 更新参考截图即可消除设计差异 | 先解释变更并评审，再更新对应基线 |
+
+## Red Flags
+
+- 未说明模式变化，声称使用了未安装或没有实际采用建议的专业技能。
+- 保留通用演示数据却报告真实业务完成，或把演示授权当服务端权限。
+- 文件变化后继续使用旧的浏览器报告或用户确认。
+- 覆盖已认可的快照、随意更换模板，或为了检查通过降低原有门槛。
+- 用结构校验、词法路由或截图文件存在冒充浏览器和宿主执行证据。
+
+## Verification
+
+- [ ] 模板、版本、运行形态、模式和专业能力实际使用有记录。
+- [ ] 业务映射完整，原型行为与本次范围一致；待确认项可见。
+- [ ] 专业建议已核对并形成具体规则；模板模式明确记录未使用。
+- [ ] 结构校验通过，实际浏览器覆盖必要场景并绑定当前内容摘要。
+- [ ] 候选交付待评审；冻结仅依据同一版本的人类确认。
+- [ ] 迭代读取适用基线，设计变更和工程交接保持可追溯。

package/skills/i3-ui-prototype/assets/templates/catalog.json

@@ -0,0 +1,147 @@
+{
+  "schemaVersion": 2,
+  "templates": [
+    {
+      "id": "enterprise-admin",
+      "name": "企业管理后台",
+      "version": "0.1.0",
+      "availability": "available",
+      "reviewStatus": "pending-review",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "source": "EASEL v0.14 / Antdv Next HTML 审查版",
+      "bestFor": [
+        "企业管理",
+        "审批台账",
+        "复杂表单及多模块业务"
+      ],
+      "preview": "enterprise-admin/index.html#/workbench",
+      "fixed": [
+        "原 EASEL 设计 token",
+        "导航和控件规范",
+        "权限及状态语义"
+      ],
+      "adjustable": [
+        "业务模块",
+        "业务字段",
+        "按需求适配的流程"
+      ],
+      "manifest": "enterprise-admin/manifest.json"
+    },
+    {
+      "id": "ai-workbench",
+      "name": "AI 工作台",
+      "version": null,
+      "availability": "planned",
+      "source": "https://github.com/TencentCloud/Octop",
+      "bestFor": [
+        "Agent 会话",
+        "执行过程",
+        "工具及产物工作区"
+      ]
+    },
+    {
+      "id": "digital-twin",
+      "name": "数字孪生大屏",
+      "version": null,
+      "availability": "planned",
+      "bestFor": [
+        "场景对象",
+        "指标告警",
+        "联动下钻"
+      ]
+    },
+    {
+      "id": "mobile-app",
+      "name": "移动端应用",
+      "version": null,
+      "availability": "planned",
+      "bestFor": [
+        "移动业务",
+        "待办",
+        "触控表单"
+      ]
+    }
+  ],
+  "legacyTemplates": [
+    {
+      "id": "classic-admin",
+      "name": "企业管理后台",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "申请审批",
+        "台账",
+        "组织管理"
+      ],
+      "preview": "common/gallery.html?template=classic-admin",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "classic-admin/manifest.json"
+    },
+    {
+      "id": "modern-workspace",
+      "name": "现代工作空间",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "项目协作",
+        "任务",
+        "内容管理"
+      ],
+      "preview": "common/gallery.html?template=modern-workspace",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "modern-workspace/manifest.json"
+    },
+    {
+      "id": "data-operations",
+      "name": "数据运营控制台",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "指标与明细",
+        "异常处置",
+        "运营台账"
+      ],
+      "preview": "common/gallery.html?template=data-operations",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "data-operations/manifest.json"
+    }
+  ],
+  "defaultTemplate": "enterprise-admin"
+}

package/skills/i3-ui-prototype/assets/templates/classic-admin/manifest.json

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "adapter": "legacy-html",
+  "preset": "classic-admin/preset.json",
+  "resources": {
+    "common": "common"
+  },
+  "defaultTitle": "立项申请"
+}

package/skills/i3-ui-prototype/assets/templates/classic-admin/preset.json

@@ -0,0 +1,6 @@
+{
+  "layout": "admin",
+  "primitive": { "blue": "#2563eb", "slate": "#172b4d", "spacing": [4, 8, 12, 16, 24, 32] },
+  "semantic": { "color-primary": "#2563eb", "color-text": "#172b4d", "color-muted": "#53657f", "color-background": "#f4f6fa", "color-surface": "#ffffff", "color-border": "#dce3ee", "color-sidebar": "#ffffff", "color-sidebar-text": "#172b4d", "color-success": "#166534", "color-warning": "#92400e", "color-danger": "#b91c1c", "space-page": "32px", "font-body": "system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif" },
+  "component": { "radius-panel": "8px", "control-height": "40px", "table-cell-space": "16px", "sidebar-width": "220px" }
+}

package/skills/i3-ui-prototype/assets/templates/common/app/app.mjs

@@ -0,0 +1,89 @@
+import { statusLabels, validateApplication, canPerform, transition } from './domain.mjs';
+const $ = selector => document.querySelector(selector);
+const escape = value => String(value ?? '').replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
+const badge = value => `<span class="badge ${value}">${statusLabels[value]}</span>`;
+const money = value => new Intl.NumberFormat('zh-CN').format(value);
+const [config, seeds] = await Promise.all([fetch('./config.json').then(r => r.json()), fetch('../mocks/applications.json').then(r => r.json())]);
+const previewTemplate = new URLSearchParams(location.search).get('template');
+if (config.preview && ['classic-admin', 'modern-workspace', 'data-operations'].includes(previewTemplate)) {
+  const preset = await fetch(`../../${previewTemplate}/preset.json`).then(r => r.json());
+  config.layout = preset.layout;
+  config.templateName = { 'classic-admin': '企业管理后台', 'modern-workspace': '现代工作空间', 'data-operations': '数据运营控制台' }[previewTemplate];
+  config.id = `preview-${previewTemplate}`;
+  for (const [key, value] of Object.entries({ ...preset.semantic, ...preset.component })) document.documentElement.style.setProperty(`--${key}`, value);
+}
+document.body.dataset.layout = config.layout;
+document.title = config.title;
+$('#template-name').textContent = config.templateName;
+const storageKey = `i3-prototype-${config.id}`;
+let records = seeds;
+try { const stored = JSON.parse(localStorage.getItem(storageKey)); if (Array.isArray(stored)) records = stored; } catch {}
+let role = 'requester', scene = 'normal', filter = '', reviewing = null;
+function persist() { try { localStorage.setItem(storageKey, JSON.stringify(records)); } catch { notify('浏览器未允许保存，当前演示仍可继续'); } }
+function notify(message) { $('#feedback').textContent = message; }
+function navigate(route) { if (location.hash === route) render(); else location.hash = route; }
+function pageTitle(title, description, action = '') { return `<div class="page-heading"><div><div class="eyebrow">申请与审批</div><h1>${title}</h1><p>${description}</p></div>${action}</div>`; }
+function metrics() { const visible = records.filter(r => role !== 'requester' || r.applicant === '李思'); return `<section class="metrics" aria-label="申请概览">${[['全部申请', visible.length], ['待审批', visible.filter(r => r.status === 'submitted').length], ['已通过', visible.filter(r => r.status === 'approved').length], ['草稿', visible.filter(r => r.status === 'draft').length]].map(([label, count]) => `<div><span>${label}</span><strong>${count}</strong></div>`).join('')}</section>`; }
+function listPage() {
+  const visible = scene === 'empty' ? [] : records.filter(record => (role !== 'requester' || record.applicant === '李思') && (record.title + record.department).includes(filter));
+  $('#page').innerHTML = pageTitle(escape(config.title), '集中查看申请进度，按角色完成提交与审批。', role === 'requester' ? '<a class="button primary" href="#/new">新建申请</a>' : '') + metrics() + `<section class="panel"><div class="panel-toolbar"><h2>申请台账 <span class="count">${visible.length}</span></h2><form id="filter-form"><label class="sr-only" for="filter">搜索项目或部门</label><input id="filter" placeholder="搜索项目或部门" value="${escape(filter)}"><button>查询</button><button type="button" id="clear-filter">重置</button></form></div>${scene === 'loading' ? '<div class="empty" role="status" aria-busy="true"><h3>正在加载申请</h3><p>请稍候，申请列表正在准备。</p></div>' : scene === 'failed' ? '<div class="empty" role="alert"><h3>暂时无法加载</h3><p>已保留当前筛选条件，请重试。</p><button id="retry">重新加载</button></div>' : visible.length ? `<div class="table-scroll"><table><thead><tr><th scope="col">项目名称</th><th scope="col">申请部门</th><th scope="col">申请金额</th><th scope="col">状态</th><th scope="col">申请人</th><th scope="col">操作</th></tr></thead><tbody>${visible.map(r => `<tr><td><a class="record-title" href="#/detail/${r.id}">${escape(r.title)}</a><small>${r.id} · ${r.date}</small></td><td>${escape(r.department)}</td><td class="numeric">¥ ${money(r.amount)}</td><td>${badge(r.status)}</td><td>${escape(r.applicant)}</td><td><a href="#/detail/${r.id}">查看详情</a></td></tr>`).join('')}</tbody></table></div>` : '<div class="empty"><h3>暂无申请</h3><p>调整筛选条件，或新建一份申请。</p></div>'}<div class="panel-foot">共 ${visible.length} 条记录 · 当前为本地演示</div></section>`;
+  $('#filter-form').onsubmit = event => { event.preventDefault(); filter = $('#filter').value.trim(); render(); };
+  $('#clear-filter').onclick = () => { filter = ''; render(); };
+  if ($('#retry')) $('#retry').onclick = () => { scene = 'normal'; $('#scene').value = scene; render(); };
+}
+function fieldErrors(errors) { return Object.entries(errors).map(([key, value]) => `<li><a href="#${key}">${value}</a></li>`).join(''); }
+function formPage(record = null) {
+  if (role !== 'requester' || (record && !canPerform(record, role, 'save'))) { $('#page').innerHTML = pageTitle('当前角色无法编辑', '切换到申请人查看可操作范围。') + '<a class="button" href="#/list">返回台账</a>'; return; }
+  const value = record || { title: '', department: '', amount: '', description: '' };
+  $('#page').innerHTML = pageTitle(record ? '编辑申请' : '新建申请', '填写基本信息与申请说明，保存草稿或提交审批。') + `<section class="panel form-panel"><form id="application-form" novalidate><div id="error-summary" tabindex="-1" role="alert" hidden><h2>请检查以下内容</h2><ul></ul></div><h2>基本信息</h2><div class="fields"><div class="field wide"><label for="title">项目名称 <span aria-hidden="true">*</span></label><input id="title" name="title" required maxlength="100" value="${escape(value.title)}"><p class="field-error" id="title-error"></p></div><div class="field"><label for="department">申请部门 <span aria-hidden="true">*</span></label><select id="department" name="department" required><option value="">请选择部门</option>${['运营中心', '产品中心', '技术中心'].map(d => `<option ${value.department === d ? 'selected' : ''}>${d}</option>`).join('')}</select><p class="field-error" id="department-error"></p></div><div class="field"><label for="amount">申请金额（元） <span aria-hidden="true">*</span></label><input id="amount" name="amount" inputmode="decimal" type="number" min="1" required value="${escape(value.amount)}"><p class="field-error" id="amount-error"></p></div><div class="field wide"><label for="description">申请说明 <span aria-hidden="true">*</span></label><textarea id="description" name="description" rows="5" required>${escape(value.description)}</textarea><p class="field-error" id="description-error"></p></div></div><div class="form-actions"><a class="button" href="#/list">取消</a><button name="action" value="save">保存草稿</button><button class="primary" name="action" value="submit">提交审批</button></div></form></section>`;
+  $('#application-form').onsubmit = event => {
+    event.preventDefault();
+    const data = Object.fromEntries(new FormData(event.currentTarget));
+    data.amount = Number(data.amount);
+    const errors = validateApplication(data);
+    for (const field of ['title', 'department', 'amount', 'description']) {
+      $(`#${field}-error`).textContent = errors[field] || '';
+      $(`#${field}`).setAttribute('aria-invalid', String(Boolean(errors[field])));
+      $(`#${field}`).setAttribute('aria-describedby', `${field}-error`);
+    }
+    const summary = $('#error-summary');
+    summary.hidden = !Object.keys(errors).length;
+    summary.querySelector('ul').innerHTML = fieldErrors(errors);
+    if (!summary.hidden) { summary.focus(); summary.querySelectorAll('a').forEach(link => link.onclick = event => { event.preventDefault(); $(link.getAttribute('href')).focus(); }); return; }
+    if (scene === 'submit-failed') { notify('提交失败，已保留填写内容，请稍后重试'); return; }
+    const draft = { ...(record || { id: `A-${String(records.length + 1).padStart(3, '0')}`, applicant: '李思', status: 'draft', date: '2026-10-14', history: [] }), ...data };
+    const result = transition(draft, role, event.submitter?.value || 'save');
+    records = record ? records.map(r => r.id === record.id ? result : r) : [...records, result];
+    persist(); navigate(`#/detail/${result.id}`); notify(result.status === 'submitted' ? '申请已提交，等待审批' : '草稿已保存');
+  };
+}
+function detailPage(id) {
+  const record = records.find(r => r.id === id && (role !== 'requester' || r.applicant === '李思'));
+  if (!record) { $('#page').innerHTML = pageTitle('未找到申请', '记录不存在或当前演示角色无法查看。') + '<a class="button" href="#/list">返回台账</a>'; return; }
+  $('#page').innerHTML = pageTitle(escape(record.title), `${record.id} · ${record.date}`, '<a class="button" href="#/list">返回台账</a>') + `<div class="detail-grid"><section class="panel detail-panel"><div class="panel-title"><h2>申请信息</h2>${badge(record.status)}</div><dl><div><dt>申请部门</dt><dd>${escape(record.department)}</dd></div><div><dt>申请金额</dt><dd>¥ ${money(record.amount)}</dd></div><div><dt>申请人</dt><dd>${escape(record.applicant)}</dd></div><div class="wide"><dt>申请说明</dt><dd class="description">${escape(record.description)}</dd></div></dl><div class="form-actions">${canPerform(record, role, 'save') ? '<button id="edit">编辑申请</button>' : ''}${canPerform(record, role, 'submit') ? '<button class="primary" id="submit-existing">提交审批</button>' : ''}${canPerform(record, role, 'approve') ? '<button id="reject" class="danger">退回申请</button><button id="approve" class="primary">审批通过</button>' : ''}${role === 'viewer' ? '<span class="muted">当前角色仅可查看</span>' : ''}</div></section><section class="panel history-panel"><h2>审批记录</h2>${record.history.length ? `<ol class="timeline">${record.history.map(item => `<li><strong>${item.action}</strong><span>${escape(item.actor)}</span><p>${escape(item.note || '已完成操作')}</p></li>`).join('')}</ol>` : '<p class="muted">尚未提交审批</p>'}</section></div>`;
+  if ($('#edit')) $('#edit').onclick = () => formPage(record);
+  if ($('#submit-existing')) $('#submit-existing').onclick = () => {
+    if (scene === 'submit-failed') { notify('提交失败，申请内容已保留'); return; }
+    records = records.map(r => r.id === id ? transition(r, role, 'submit') : r); persist(); render(); notify('申请已提交，等待审批');
+  };
+  for (const action of ['approve', 'reject']) if ($(`#${action}`)) $(`#${action}`).onclick = () => {
+    reviewing = { id, action }; $('#review-title').textContent = action === 'approve' ? '审批通过' : '退回申请'; $('#review-description').textContent = record.title; $('#review-note').value = ''; $('#review-error').textContent = ''; $('#review-dialog').showModal(); $('#review-note').focus();
+  };
+}
+function render() {
+  const route = location.hash || '#/list';
+  $('#breadcrumb').textContent = route.startsWith('#/detail') ? '申请详情' : route === '#/new' ? '新建申请' : '申请台账';
+  document.querySelectorAll('.nav-link').forEach(link => { const active = link.getAttribute('href') === (route.startsWith('#/detail') ? '#/list' : route); link.classList.toggle('active', active); if (active) link.setAttribute('aria-current', 'page'); else link.removeAttribute('aria-current'); });
+  if (route === '#/new') formPage(); else if (route.startsWith('#/detail/')) detailPage(route.split('/')[2]); else listPage();
+}
+$('#role').onchange = event => { role = event.target.value; render(); };
+$('#scene').onchange = event => { scene = event.target.value; if (!$('#application-form')) render(); };
+$('#reset').onclick = () => { records = structuredClone(seeds); filter = ''; scene = 'normal'; $('#scene').value = scene; persist(); navigate('#/list'); notify('示例数据已恢复'); };
+$('#close-review').onclick = () => $('#review-dialog').close();
+$('#review-form').onsubmit = event => {
+  event.preventDefault();
+  try { records = records.map(r => r.id === reviewing.id ? transition(r, role, reviewing.action, $('#review-note').value) : r); persist(); $('#review-dialog').close(); render(); notify(reviewing.action === 'approve' ? '申请已通过' : '申请已退回'); }
+  catch (error) { $('#review-error').textContent = error.message; $('#review-note').focus(); }
+};
+window.addEventListener('hashchange', render);
+render();

package/skills/i3-ui-prototype/assets/templates/common/app/config.json

@@ -0,0 +1 @@
+{ "id": "template-preview", "title": "立项申请", "templateName": "企业管理后台", "layout": "admin", "preview": true }

package/skills/i3-ui-prototype/assets/templates/common/app/domain.mjs

@@ -0,0 +1,20 @@
+export const statusLabels = { draft: '草稿', submitted: '待审批', approved: '已通过', rejected: '已退回' };
+export function validateApplication(value) {
+  const errors = {};
+  if (!value.title?.trim()) errors.title = '请输入项目名称';
+  if (!value.department?.trim()) errors.department = '请选择申请部门';
+  if (!Number.isFinite(Number(value.amount)) || Number(value.amount) <= 0) errors.amount = '申请金额必须大于零';
+  if (!value.description?.trim()) errors.description = '请填写申请说明';
+  return errors;
+}
+export function canPerform(record, role, action) {
+  if (['approve', 'reject'].includes(action)) return role === 'approver' && record.status === 'submitted';
+  return ['save', 'submit'].includes(action) && role === 'requester' && record.applicant === '李思' && ['draft', 'rejected'].includes(record.status);
+}
+export function transition(record, role, action, note = '') {
+  if (!canPerform(record, role, action)) throw new Error('当前角色或申请状态不允许此操作');
+  if (action === 'submit' && Object.keys(validateApplication(record)).length) throw new Error('申请信息校验未通过');
+  if (action === 'reject' && !note.trim()) throw new Error('请填写退回原因');
+  const next = { save: 'draft', submit: 'submitted', approve: 'approved', reject: 'rejected' }[action];
+  return { ...record, status: next, history: [...record.history, { action: { save: '保存草稿', submit: '提交申请', approve: '审批通过', reject: '退回申请' }[action], actor: role === 'requester' ? '李思' : '审批人', note }] };
+}

package/skills/i3-ui-prototype/assets/templates/common/app/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>立项申请</title><link rel="icon" href="data:,"><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./styles.css"></head>
+<body>
+  <a class="skip-link" href="#main">跳到主要内容</a>
+  <div class="shell">
+    <aside class="sidebar"><a class="brand" href="#/list"><span class="brand-mark" aria-hidden="true">工</span><span>业务工作台<small id="template-name">申请与审批</small></span></a><nav aria-label="工作台导航"><a class="nav-link" href="#/list">申请台账</a><a class="nav-link" href="#/new">新建申请</a></nav><div class="sidebar-note">交互原型<br>本地演示数据</div></aside>
+    <div class="workspace"><header class="topbar"><span class="breadcrumb">工作台 / <span id="breadcrumb">申请台账</span></span><label class="role-control">演示角色 <select id="role"><option value="requester">申请人 · 李思</option><option value="approver">审批人</option><option value="viewer">只读人员</option></select></label></header>
+      <main id="main" tabindex="-1"><div id="page"></div></main>
+      <footer><span>交互演示 · 数据仅保存在本机</span><label>演示情景 <select id="scene"><option value="normal">正常数据</option><option value="empty">空列表</option><option value="loading">加载中</option><option value="failed">加载失败</option><option value="submit-failed">提交失败</option></select></label><button class="text-button" id="reset">恢复示例</button></footer>
+    </div>
+  </div>
+  <div id="feedback" role="status" aria-live="polite"></div>
+  <dialog id="review-dialog" aria-labelledby="review-title"><form id="review-form"><h2 id="review-title">审批申请</h2><p id="review-description"></p><label for="review-note">审批意见</label><textarea id="review-note" rows="4"></textarea><p id="review-error" class="field-error" role="alert"></p><div class="form-actions"><button type="button" id="close-review">取消</button><button type="submit" class="primary">确认审批</button></div></form></dialog>
+  <script type="module" src="./app.mjs"></script>
+</body>
+</html>

package/skills/i3-ui-prototype/assets/templates/common/app/serve.cjs

@@ -0,0 +1,16 @@
+'use strict';
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const root = path.resolve(__dirname, '..');
+const types = { '.html': 'text/html', '.mjs': 'text/javascript', '.css': 'text/css', '.json': 'application/json' };
+const server = http.createServer((req, res) => {
+  let relative;
+  try { relative = decodeURIComponent(new URL(req.url, 'http://localhost').pathname); } catch { res.writeHead(400).end(); return; }
+  if (relative === '/') { res.writeHead(302, { Location: '/app/index.html' }).end(); return; }
+  const file = path.resolve(root, '.' + relative);
+  if (!file.startsWith(root + path.sep) || !fs.existsSync(file) || !fs.statSync(file).isFile() || !fs.realpathSync(file).startsWith(fs.realpathSync(root) + path.sep)) { res.writeHead(404).end(); return; }
+  res.writeHead(200, { 'Content-Type': (types[path.extname(file)] || 'application/octet-stream') + '; charset=utf-8', 'Cache-Control': 'no-store' });
+  fs.createReadStream(file).pipe(res);
+});
+server.listen(Number(process.argv[2] || 0), '127.0.0.1', () => process.stdout.write(`原型预览：http://127.0.0.1:${server.address().port}/\n`));