@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/localized/zh-CN/templates/shared/rules/fec-responsive-design.md

@@ -0,0 +1,50 @@
+# 响应式设计规则
+
+凡是任务涉及移动端适配、响应式布局、多端兼容、触摸目标或视口行为时，都应用本文件。本文只保留项目常驻约束；布局模式、container query、响应式表格、媒体和验证细节交给 `fec-responsive-layout`。
+
+## 核心原则
+
+- **移动优先**：从小屏幕开始设计，逐步增强到大屏幕。
+- **内容优先**：小屏优先展示核心任务、关键操作和反馈，次要内容折叠、延后或进入详情层。
+- **触摸友好**：所有交互元素必须适配手指操作，关键功能不能只依赖 hover。
+- **性能优先**：移动端网络和设备性能较弱，首屏资源、图表、动效和大列表要克制。
+- **容器感知**：可复用组件优先适配所在容器，而不是假设整页断点。
+- **稳定尺寸**：工具栏、表格列、棋盘、卡片网格和计数器需要稳定约束，避免状态变化导致布局跳动。
+
+## 断点与容器策略
+
+- 默认验证 375px、768px、1024px、1440px，以及断点中间值。
+- 使用 mobile-first `min-width` 断点；不要先写桌面样式再用 `max-width` 补移动端。
+- Tailwind 前缀从小到大使用：默认 → `sm:` → `md:` → `lg:` → `xl:` → `2xl:`。
+- 页面级结构可以使用断点；会被放进侧栏、弹窗、卡片或主内容区的复用组件优先使用 container query。
+- grid/flex 子项包含长文本、图表、代码、媒体或表格时，必须考虑 `min-width: 0`、`minmax()`、`aspect-ratio` 和明确溢出策略。
+
+## 触摸目标与移动端交互
+
+- 空间允许时，按钮、链接、关闭按钮等交互目标至少 44x44px；紧凑工具界面最低也要保证可操作。
+- 输入框字号避免低于 16px，防止 iOS Safari 自动缩放。
+- 固定底部栏、操作条、抽屉和对话框必须考虑 safe area 与虚拟键盘。
+- hover-only 信息必须有点击、焦点或常驻可见替代方案。
+- 横竖屏切换后，主操作、焦点位置、滚动容器和错误提示仍应可达。
+
+## 数据密集区域
+
+- 表格、列表、看板、编辑器和画布可以局部横向滚动，但页面整体不应出现无意水平溢出。
+- 移动端数据密集视图需先定义列优先级：主标识、状态和主操作优先保留；低优先级字段进入详情、展开行或抽屉。
+- 小屏仍要保留排序、筛选、分页和选择能力。
+- 虚拟滚动只解决 DOM 数量问题，不能替代信息层级设计。
+
+## 响应式媒体
+
+- 图片和视频要有稳定尺寸、`aspect-ratio` 或容器约束，避免加载后推挤布局。
+- 需要多尺寸资源时使用 `srcset`、`sizes`、`picture` 或框架图片组件，避免移动端下载桌面大图。
+- 媒体裁切必须保留主体信息，不为填满卡片裁掉产品、人物、图表或状态关键区域。
+
+## 检查清单
+
+- [ ] 320-375px 页面级无水平溢出。
+- [ ] 断点切换后阅读顺序合理，主操作不被隐藏。
+- [ ] 触摸目标、输入字号、safe area、虚拟键盘和横竖屏行为已验证。
+- [ ] loading、empty、error、disabled、hover/focus、长翻译文本和大数字不会撑坏固定格式控件。
+- [ ] 数据密集区域有列优先级、局部滚动或移动端摘要策略。
+- [ ] 首屏媒体尺寸稳定，非首屏媒体不会拖慢移动端主路径。

package/localized/zh-CN/templates/shared/rules/fec-source-driven-development.md

@@ -0,0 +1,31 @@
+# 来源驱动开发规则
+
+当实现依赖框架、库、浏览器、运行时、构建工具或平台行为时，先确认事实来源，再写代码或评审结论。
+
+## 事实来源优先级
+
+1. 项目内 README、配置、测试、模板和已有实现。
+2. 官方文档、源码、类型定义、release notes、migration guide。
+3. Web 标准、浏览器兼容数据和平台文档。
+4. Issue、讨论、博客和第三方文章仅作为线索。
+
+## 使用场景
+
+- 框架新版本、路由、渲染模式、缓存、构建配置、浏览器 API。
+- 公共接口、组件 API、设计系统 token、CLI 命令和插件元数据。
+- 依赖升级、迁移、废弃 API 替换、跨运行时兼容。
+- 与安全、性能、可访问性相关的版本敏感判断。
+
+## 输出要求
+
+- 写清来源、版本或项目事实、决策结论、影响范围和验证方式。
+- 若项目现状与官方推荐冲突，说明冲突原因和渐进迁移策略。
+- 不复制长篇外部文档；只保留必要结论、链接或项目内文件路径。
+- 无法验证时标注不确定性和需要用户/团队确认的事项。
+
+## 反模式
+
+- 凭记忆使用版本敏感 API。
+- 用过时教程替代官方文档。
+- 为追新推翻稳定项目约定。
+- 在组件里散落外部库行为假设，而不是集中到适配层。

package/localized/zh-CN/templates/shared/rules/fec-state-management.md

@@ -0,0 +1,60 @@
+# 状态管理规范
+
+本文件约定前端状态归属底线。状态清单、Store 形状示例、URL 状态、持久化适配器和 SSR 隔离细节交给 `fec-state-management`；请求缓存细节交给数据获取 workflow；表单字段和校验交给表单 workflow。
+
+## 状态分类
+
+| 类型 | 示例 | 默认归属 |
+| ---- | ---- | -------- |
+| 本地 UI 状态 | modal 开关、tab、展开行、hover 编辑态 | 组件内 state / ref |
+| 表单状态 | 输入值、脏字段、校验错误、提交中 | 表单库或表单组件 |
+| 服务端状态 | 列表、详情、分页结果、远程错误 | 请求缓存库 |
+| URL 状态 | 搜索词、筛选、排序、页码、选中 tab | 路由参数 / search params |
+| 全局客户端状态 | 登录用户、主题、权限快照、购物车草稿 | 全局 store |
+| 浏览器持久化状态 | 偏好、非敏感草稿、离线队列 | 存储层 + 状态适配器 |
+
+## 核心原则
+
+- **先归属，后选库**：不要先选 Redux、Zustand、Pinia 或 Context；先确定每个状态的唯一 owner。
+- **就近管理**：状态放在需要它的最近公共祖先。
+- **单一数据源**：同一份数据只在一个地方维护。
+- **派生优于同步**：可从 props、server state、URL 或已有 state 推导的值，不另存一份。
+- **最小全局状态**：全局 store 只保存真正跨页面、跨 feature 或需要统一动作的客户端状态。
+
+## React 状态边界
+
+- 单组件或小子树使用 `useState` / `useReducer`。
+- 低频全局配置、主题或依赖注入可用 Context；高频变化的大对象不要放 Context。
+- 中等复杂业务状态可用 Zustand、Jotai 或仓库既有方案；大型严格动作流可用 Redux Toolkit。
+- 服务端数据使用请求缓存库，不复制到全局 store。
+
+## Vue 状态边界
+
+- 局部状态使用 `ref` / `reactive` / `computed`。
+- 局部跨层级上下文使用 `provide/inject`。
+- 全局业务状态使用 Pinia 或项目既有 store。
+- 服务端数据优先使用请求库或 composable 管理，不原封不动写入 Pinia。
+
+## URL 与持久化状态
+
+- 搜索、筛选、排序、分页、选中 tab 等需要分享或刷新保留的视图状态优先放 URL。
+- 浏览器持久化只保存稳定偏好或非敏感草稿，并明确字段白名单、版本号、迁移路径、过期策略和敏感字段排除。
+- SSR 场景不要在模块顶层创建带用户数据的单例 store；每次请求需要独立实例。
+
+## 反模式
+
+- 将所有状态都放进全局 store。
+- 在 store 中存放 UI 临时状态或表单每个字段。
+- 手动同步多份相同数据，而不是从源状态派生。
+- 将服务端响应原封不动存入全局 store，而不用请求缓存库。
+- 用 Context / provide 承载高频变化大对象，导致大范围重渲染。
+- 持久化 token、权限细节、个人敏感数据或未版本化的大对象。
+
+## 检查清单
+
+- [ ] 每个状态都有明确归属：本地 / 表单 / 服务端缓存 / URL / 全局 store / 浏览器持久化。
+- [ ] 可派生的值没有被存为独立 state。
+- [ ] 全局 store 只包含真正跨边界共享的数据。
+- [ ] 服务端数据通过请求库管理，刷新、回退、权限变化和错误状态仍可恢复。
+- [ ] URL 状态与路由参数同步，刷新和分享行为符合预期。
+- [ ] 持久化状态有白名单、版本、迁移和敏感字段排除。

package/localized/zh-CN/templates/shared/rules/fec-testing.md

@@ -0,0 +1,98 @@
+# 测试与校验规则
+
+凡是新增、修改、重构或评审代码时，都应用本文件。
+
+## 校验顺序
+
+优先按以下顺序执行：
+
+1. lint
+2. type check
+3. unit test
+4. build
+
+优先使用仓库已有脚本。
+如果命令不确定，先检查 `package.json`。
+
+## 改动校验原则
+
+- 先修复范围最小且正确的问题
+- 每次关键修复后重新执行受影响的命令
+- 不要盲目压掉报错或关闭规则
+- 不要为了通过检查而降低类型安全
+- 不要因为一个局部测试失败就重写无关模块
+
+## 测试要求
+
+新增或修改行为时，考虑是否需要覆盖以下内容：
+
+- 组件渲染
+- 交互行为
+- 状态切换
+- 边界场景
+- loading / empty / error 状态
+- 与可访问性相关的关键交互
+
+如果没有补测试，需要说明原因。
+
+## Fixture 与 Mock
+
+- Fixture 表达业务场景，不使用随机、无语义或只对测试作者有意义的数据
+- 复杂对象使用 builder 填充默认值，每个测试只覆盖当前场景相关字段
+- 测试间不共享可变全局状态、fake timer、store 或 mock server handler
+- 网络 mock 应模拟公开契约和用户可见错误，不复制后端内部实现
+
+## TDD 与回归测试
+
+新增行为、修复 Bug 或重构关键逻辑时，优先采用 TDD：
+
+1. 先写能描述期望行为的失败测试。
+2. 运行测试并确认失败原因正确。
+3. 写最小实现让测试通过。
+4. 测试保持通过后再重构。
+
+Bug 修复应优先保留能复现问题的回归测试。若现有项目缺少测试基础设施，不要盲目引入新框架；先给出最小测试落地建议并说明维护成本。
+
+## 代码评审输出风格
+
+评审代码时，返回：
+
+- 总体评估
+- 必修问题
+- 建议优化
+- 可选优化项
+- 风险等级
+
+结论要具体且可执行。
+
+## E2E 测试规则
+
+使用 Playwright 或 Cypress 时：
+
+- 遵循 **Page Object**，spec 内不写裸选择器；优先 **`data-testid`**，其次 **`role` / `label`**
+- 用 **`test.describe` + `beforeEach`** 组织场景，单用例可独立运行、不依赖执行顺序
+- 禁止用固定 **`sleep`** 当主要同步手段；用 **Locator 自动等待**、`expect`、`waitForResponse` 等
+- Playwright：**`playwright.config.ts`** 中配置 `baseURL`、CI 下 `retries`/`workers`、`trace`/`screenshot`/`video`、**`webServer`** 与多 **`projects`（含移动端）**
+- 关键流程至少覆盖桌面、平板、移动端视口（或等价 device 项目）
+- **不稳定用例**：`test.fixme` / `test.skip` 需写原因与 issue；用 `--repeat-each` 辅助定位 flaky
+- 失败时保留 **截图、Trace、视频**，CI 用 **artifact** 上传 HTML 报告与产物
+- 高风险/资金类流程：**勿在生产跑真实 E2E**；staging 或 mock，必要时 `test.skip`
+- 测试数据可重复：优先 seed、测试账号或 mock 服务；随机值必须带唯一前缀并在 teardown 清理
+
+详细模式与示例见插件 **`fec-e2e-testing`** skill。
+
+## 重构规则
+
+进行重构时：
+
+- 除非任务明确要求改行为，否则保持行为一致
+- 说明可能的迁移风险
+- 优先做渐进式修改，而不是大范围重写
+- 总结改动文件、执行过的命令和剩余风险
+
+## 验证失败处理
+
+- 按文件和根因分组错误，一次修复一类问题。
+- 每次修复后重新运行最近的失败命令。
+- 不删除失败测试、不关闭规则、不降低类型安全来换取通过。
+- 同一错误多次修复仍失败时，停止扩大改动并报告阻塞。

package/localized/zh-CN/templates/shared/rules/fec-typescript.md

@@ -0,0 +1,112 @@
+# TypeScript / JavaScript 规则
+
+编写、修改或评审 `.ts`、`.tsx`、`.js`、`.jsx` 时应用本文件。本文只保留项目常驻硬约束；复杂类型建模、`tsconfig` 分层、声明产物、DTO / view model 边界、类型测试与发布入口设计，交给 `fec-typescript-project-standard` skill 或专项评审处理。注释风格另见 `fec-code-comments.md`；E2E 与校验流程另见 `fec-testing.md`。
+
+## 类型与接口
+
+用类型让对外 API、共享模型与组件 props 显式、可读、可复用。
+
+### 对外导出的 API
+
+- 对**导出**的函数、共享工具函数、公开类方法，写明参数与返回值类型。
+- **局部**变量在类型显而易见时交给 TypeScript 推断，不为显而易见的中间变量重复标注。
+- 重复出现的内联对象形状抽成具名 `interface` 或 `type`，避免同一契约散落在多个签名中。
+- 外部数据、API DTO、路由参数、表单值与组件 props 的边界要显式命名；复杂建模分流到 `fec-typescript-project-standard`。
+
+### `interface` 与 `type`
+
+- 可能被扩展或 `implements` 的**对象形状**优先用 `interface`。
+- **联合、交叉、元组、映射类型、工具类型组合**用 `type`。
+- 状态、类型、角色等有限业务取值优先用字符串字面量联合；仅在互操作或团队统一要求时使用 `enum`。
+
+### 函数参数：复杂类型宜具名
+
+- 参数上的**复杂联合**、**内联对象类型**、**较复杂的回调签名**等，应优先提取为具名 `type` / `interface`，再在函数签名中引用。
+- 仅当类型简单、短小、一眼可读，且明显无复用价值时，允许在参数位置内联。
+- 回调参数与返回值必须表达清楚；不要用 `Function`、宽泛对象或隐式 `any` 承接业务契约。
+
+### 避免 `any`
+
+- 业务代码中避免 `any`；已有遗留 `any` 不随手扩散。
+- 外部或不可信数据用 `unknown`，通过 `typeof`、`in`、`instanceof`、schema parse 或自定义 predicate 安全收窄。
+- 类型随调用方变化时用泛型，但不要为简单场景引入难以理解的泛型层。
+- `as` 类型断言只用于明确的边界互操作或已验证收窄后的补充表达，不用于压制类型错误。
+
+### React 组件 Props
+
+- 用具名 `interface` 或 `type` 定义 props，复杂公共 props 分流到类型模块。
+- 回调 props 写清参数与返回值；事件 payload 不用裸对象长期内联。
+- 无特殊理由不使用 `React.FC`，避免隐式 `children` 等差异。
+- TSX 泛型、复杂组件 props 或外部 DTO 映射问题，交给 React 规则与 `fec-typescript-project-standard` 共同收敛。
+
+## 单文件规模与模块拆分
+
+- `.ts` / `.tsx` / `.js` / `.jsx` 单文件建议控制在**约 300 行以内**。该阈值是可维护性与评审效率的经验上限，不是机械硬限制。
+- 当文件明显超过该规模且承担多重职责时，应优先按职责拆分：数据访问、业务规则、视图渲染、适配层、常量与映射、类型定义。
+- 超阈值优先提取纯函数、子组件、自定义 Hook、`*.types.ts` 类型模块、常量表；不要仅为压行数做无意义切分。
+- 可接受例外：生成代码、极薄的 re-export 聚合文件、经团队评审确认的高内聚模块；例外建议在文件头简短注明原因。
+
+### 仍为 JavaScript 的文件
+
+- 在 `.js` / `.jsx` 中，若短期无法迁 TS，可用 JSDoc 补类型，并与运行时行为一致。
+- 不为迁移方便引入新的隐式全局、宽松对象或未验证外部输入。
+
+## 禁止 Magic Number / Magic String
+
+- **业务代码中禁止**使用**无语义**的硬编码数字或字符串直接表示状态、类型、标识或业务含义，包括 `if` / `switch` / 赋值 / API 字段映射。
+- 固定且有限的取值范围须在单一真源处定义，并在全仓引用名称，避免裸值散落。
+- 前端主路径优先使用 `as const` 常量对象配合字面量联合；与后端协议或团队约定强绑定时可使用 `enum`。
+- 不属本条的典型例外仍应保持可读：纯算法下标、明显的 `0` / `1` 长度判断、与业务无关的 UI 刻度；视觉值若已有设计 Token，应改走 `fec-design-system.md`。
+
+## 不可变更新
+
+- 优先返回新对象或新数组，避免直接改写入参、props、store 快照或缓存对象。
+- 对不应被修改的数据优先建模为 `readonly` / `Readonly<T>`。
+- 大型嵌套更新应使用项目既有状态方案或清晰的 reducer / helper，不在组件中堆叠临时可变逻辑。
+
+## 异步与错误处理
+
+- 使用 `async` / `await` 与明确的错误边界；不要吞掉 promise rejection。
+- `catch` 中将错误视为 `unknown` 再收窄，统一映射为用户可见错误、日志错误或调用方可处理的领域错误。
+- API、认证、上传、支付等跨边界错误遵循 `fec-api-layer.md`、`fec-error-handling.md` 和安全规则，不在业务组件中散落裸处理。
+
+## 输入校验
+
+- 外部输入（表单、API、URL 参数、localStorage、postMessage、第三方 SDK 回调等）必须在边界处校验或收窄。
+- 可使用 Zod、Valibot、Yup 或项目选用的同类 schema 工具；不要把具体库作为无条件新依赖引入。
+- schema 推导类型可作为输入类型单一真源；复杂 DTO、领域模型与 UI view model 的分层交给 `fec-typescript-project-standard`。
+
+## 类型资产分层与命名
+
+- 模块或特性专属类型使用 `*.types.ts`，并与实现文件同目录或同 feature 目录放置。
+- 全局与环境相关声明放在 `global.d.ts`、`env.d.ts` 或 `types/*.d.ts`，仅用于真全局或 ambient 声明，不将可模块化类型放入全局。
+- 仅用于类型的导入导出优先使用 `import type` 与 `export type`，减少值空间歧义并提升编译语义清晰度。
+- 与 API DTO 同源的类型，放在对应 feature 或 API 子目录，避免在页面或组件实现内散落大型匿名类型。
+- `index.ts` 聚合导出应保持浅层且按 feature 边界组织，避免深层 barrel 引发循环依赖与不必要耦合。
+
+## 工程化与惯用法补充
+
+- 需要同时满足字面量保留与结构校验时优先使用 `satisfies`，再考虑类型断言。
+- 使用判别式联合表达清晰状态；关键分支需要穷尽性时用 `never` 检查。
+- 新业务代码默认采用 ES Module；`namespace` 与三斜线指令仅用于声明合并或遗留互操作场景。
+- 扩展第三方类型时使用独立声明文件并通过局部 `declare module` 扩展，避免污染全局实现文件。
+- `tsconfig`、package exports、声明文件、路径别名和 public API 类型属于 TypeScript 项目规范深水区，不在本规则内展开。
+
+## 日志与 `console.log`
+
+- 生产路径避免遗留 `console.log`；使用项目统一的日志方案。
+- 调试日志提交前应删除，或按团队工具链通过 lint / hook / CI 提示。
+
+## 密钥与敏感配置
+
+- **禁止**在源码中硬编码密钥、Token、私钥或真实凭证示例。
+- 必须通过环境变量或构建期注入读取配置，并在缺失时显式失败或提供清晰降级策略。
+- 涉及认证、支付、上传、第三方脚本或敏感数据处理时，结合项目安全规范做专项评审。
+
+## 与测试规则的关系
+
+类型改动影响 public API、DTO、外部输入收窄或关键业务分支时，应补充 typecheck、类型测试、组件测试或消费方 fixture。关键用户路径的端到端覆盖方式（Playwright、Cypress、Page Object 等）以 `fec-testing.md` 为准；本文件不重复展开 E2E 细则。
+
+## 与 `typescript-reviewer` 子代理
+
+对 **`.ts` / `.tsx` / `.js` / `.jsx`** 进行专项评审（先跑 typecheck / eslint、PR 合并就绪检查、分级结论）时，可委托插件内置的 **`typescript-reviewer`** 子代理；其报告默认写入 `reports/typescript-review-YYYY-MM-DD-HHmmss.md`，规则底线仍以本文件与项目 `CLAUDE.md` 为准。

package/localized/zh-CN/templates/shared/rules/fec-vue.md

@@ -0,0 +1,64 @@
+# Vue 规则
+
+当仓库或目标模块使用 Vue 时，应用本文件。
+
+## 技术栈
+
+<!-- 请根据项目实际情况修改 -->
+
+- 框架: Vue 3 + TypeScript
+- 状态管理: Pinia
+- UI 组件库: 按项目实际选择（如 Element Plus、Naive UI、Vant 或内部 Design System）
+- 版本与依赖：新建模块、补充 `package.json` 或更新本节前，优先采用彼此兼容的主流稳定版本（对齐官方文档、脚手架默认值或包管理器推荐），避免混用已停止维护或与仓库主线 major 不匹配的依赖。
+
+## Vue 组件规范
+
+- 使用 `<script setup lang="ts">`
+- 明确使用 `defineProps` 和 `defineEmits`
+- 保持模板逻辑简单、可读
+- 将可复用逻辑提取到 composables
+- 优先使用 computed，而不是大范围 watcher
+- 保持组件职责聚焦，避免上帝组件
+- props、emits、refs 和 expose 方法尽量使用强类型
+
+## Vue 实现指导
+
+创建新组件前：
+
+1. 先搜索项目中是否已有可复用组件
+2. 判断逻辑是否适合提取到 composable
+3. 检查样式是否应沿用周边现有模式
+
+编辑 Vue 组件时：
+
+- 在可能的情况下，不要把 API 调用直接放进纯展示组件
+- 不要在组件文件中内联大段业务逻辑
+- 不要重复维护可从 props 或 store 推导出的状态
+- 事件 payload 要明确且有类型约束
+
+## Vue 文件组织
+
+优先遵循项目已有约定。
+常见输出可能包括：
+
+- `ComponentName.vue`
+- `types.ts`
+- `useXxx.ts`
+- 只有在符合仓库模式时才新增本地样式文件
+
+## 组件文件规模
+
+- 单个 `.vue` 文件或同一组件模块保持**职责单一**、语义清晰、易于维护。
+- **行数参考**：优先控制在约 **300 行**以内；超过 **500 行**应视为**强烈拆分信号**。
+- **未到 500 行也应拆分**的情形：同时存在**复杂响应式状态**、**过多副作用 / watch**、**模板嵌套过深**、**`<script setup>` 内逻辑过长**、密集条件分支等，应拆为**子组件**、**Composables**、**工具模块**、**常量**与**类型定义**等（与上文「Vue 组件规范」「Vue 文件组织」一致）。
+
+## Vue 反模式
+
+避免：
+
+- 本该使用 computed 却使用大范围 watcher
+- 对 props、emits 或 refs 无理由使用 `any`
+- 模板分支层级过深却不提取
+- 在一个组件中混入无关职责
+- 单 `.vue` **逾 500 行或复杂度已高**仍拒不拆分（参见上文「组件文件规模」）
+- 用大范围全局样式覆盖去解决局部 UI 问题

package/localized/zh-CN/templates/shared/rules/fec-working-modes.md

@@ -0,0 +1,50 @@
+# 工作模式规则
+
+根据任务阶段选择合适的工作模式，避免一边探索一边大改代码。
+
+## 调研模式
+
+适用于需求不清、现状复杂、需要比较方案或定位风险时。
+
+- 先阅读 README、项目规则、相关源码和最近变更。
+- 用 `rg` 查找已有模式、组件、工具函数和测试。
+- 先列发现，再给建议。
+- 在证据不足时不要下确定结论。
+- 涉及版本敏感框架、库或平台行为时，先查项目内事实和官方来源。
+
+## 计划模式
+
+适用于复杂功能、架构调整、跨文件重构和高风险修复。
+
+- 重述目标、成功标准和不做什么。
+- 标出影响范围、文件边界、依赖关系、风险和验证方式。
+- 计划应能分批执行，每批都有可验证结果。
+- 用户未确认前，不执行大范围实现。
+
+## 开发模式
+
+适用于目标明确且已有计划或范围很小的实现。
+
+- 优先复用现有模式。
+- 行为变更优先使用 TDD：先失败测试，再最小实现，再重构。
+- 每次关键修改后运行最近的验证命令。
+- 完成时总结改动、命令和剩余风险。
+- 行为、接口或性能假设必须能被类型、测试、构建、浏览器观察或文档来源支撑。
+
+## 评审模式
+
+适用于 PR、最近变更、合并前检查和专项审查。
+
+- 先通读上下文，再按严重程度列问题。
+- 优先报告会导致 bug、安全风险、回归或维护成本明显上升的问题。
+- 每个问题给出文件位置、影响、建议修复方式和置信度。
+- 无问题时明确说明剩余测试缺口。
+
+## 收尾模式
+
+适用于提交前或交付前。
+
+- 运行 lint、type-check、test、build 中与改动相关的命令。
+- 检查是否有调试代码、临时文件、未同步文档或未说明的风险。
+- 不在未经确认时提交或推送。
+- 不用“应该可以”作为交付依据；交付前报告实际运行过的命令和结果。

package/openclaw.plugin.json

@@ -2,7 +2,7 @@
     "id": "frontend-craft",
     "name": "Frontend Craft",
     "description": "Frontend team skills, OpenClaw workspace templates, optional init tool, exec safety hooks, and design MCP reference.",
-    "version": "2.7.0",
+    "version": "2.8.0",
     "skills": [
         "skills",
         "commands"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bovinphang/frontend-craft",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.",
   "type": "module",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "agents",
     "skills",
     "commands",
+    "localized",
     "hooks",
     "templates",
     ".mcp.json",
@@ -54,7 +55,7 @@
     "clean": "node scripts/clean-dist.mjs",
     "typecheck": "npm run typecheck:ts && npm run typecheck:skill-scripts",
     "typecheck:ts": "tsc --noEmit -p tsconfig.json",
-    "typecheck:skill-scripts": "tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs skills/fec-image-generation/scripts/png-qa.mjs",
+    "typecheck:skill-scripts": "tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs skills/fec-image-generation/scripts/png-qa.mjs skills/fec-image-generation/scripts/tech-diagram-render.mjs skills/fec-image-generation/scripts/interactive-diagram-server.mjs skills/fec-image-generation/scripts/export-diagram.mjs",
     "build": "npm run clean && npm run typecheck && tsx scripts/build-dist.ts",
     "test:only": "node --import tsx --test --test-concurrency=1 tests/converters/codex-agents.test.ts tests/install/cli.test.ts tests/install/end-to-end.test.ts tests/install/update.test.ts tests/install/all-runtimes-dry.test.ts tests/install/metadata-consistency.test.ts tests/install/npm-pack.test.ts tests/install/skill-package.test.ts tests/install/ui-design-intelligence.test.ts tests/install/image-generation-skill.test.ts tests/install/drawio-studio-skill.test.ts tests/install/sync-version.test.ts tests/install/claude-cache.test.ts",
     "test": "npm run build && npm run test:only",