@bovinphang/frontend-craft 2.6.0 → 2.8.0

package/README.openclaw.zh-CN.md

@@ -12,7 +12,7 @@
 
 **Language / 语言**
 
-[English](README.md) | [**简体中文**](README.zh-CN.md)
+[English](README.openclaw.md) | [**简体中文**](README.openclaw.zh-CN.md)
 
 </div>
 
@@ -136,40 +136,92 @@ frontend-craft/
 
 ### 技能
 
-| 技能                             | 用途                                                           |
-| -------------------------------- | -------------------------------------------------------------- |
-| `fec-code-review`                | 架构、类型安全、渲染、样式、可访问性、测试、安全评审           |
-| `fec-security-review`            | XSS、CSRF、敏感数据泄露、不安全输入处理                        |
-| `fec-accessibility-check`        | 面向 WCAG 的语义结构、键盘支持、焦点、标签检查                 |
-| `fec-react-project-standard`     | React + TypeScript 项目规范                                    |
-| `fec-vue3-project-standard`      | Vue 3 + TypeScript 项目规范                                    |
-| `fec-implement-from-design`      | 基于 Figma、Sketch、MasterGo、Pixso、墨刀或截图实现 UI         |
-| `fec-validation-fix`             | 执行校验命令、分析失败并安全修复                               |
-| `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS 传统前端规范                    |
-| `fec-legacy-to-modern-migration` | 遗留前端现代化、目标栈识别与分阶段迁移策略                     |
-| `fec-testing-strategy`           | 测试层级选择、风险矩阵与覆盖规划                               |
-| `fec-e2e-testing`                | Playwright / Cypress E2E 结构、产物、CI 与不稳定用例治理       |
-| `fec-nextjs-project-standard`    | Next.js App Router、SSR/SSG、路由、元数据、中间件              |
-| `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG、组合式函数、路由、中间件                       |
-| `fec-monorepo-project-standard`  | pnpm workspace、Turborepo、Nx 结构与任务编排                   |
-| `fec-data-fetching`              | 服务端状态获取、缓存、失效、SSR 与无限加载                     |
-| `fec-state-management`           | 状态归属、store 选型、URL/服务端/表单/本地状态边界             |
-| `fec-form-handling`              | 跨框架表单选型、schema 校验、动态字段、上传、多步流程          |
-| `fec-tailwind-design-system`     | Tailwind token、主题扩展、组件变体、class 治理和暗色模式       |
-| `fec-responsive-layout`          | 移动优先布局、容器查询、数据密集型响应式界面                   |
-| `fec-browser-storage`            | localStorage/sessionStorage/IndexedDB/Cookies 选型与安全持久化 |
-| `fec-route-protection`           | React Router、Next.js、Vue Router、Nuxt 的权限路由保护         |
-| `fec-component-testing`          | RTL / Vue Test Utils 组件测试与回归用例                        |
-| `fec-storybook-component-doc`    | Storybook 组件文档、Addon、MDX、交互与视觉测试集成             |
-| `fec-list-virtualization`        | 按框架选型的大列表虚拟滚动、测量、网格和无限滚动               |
-| `fec-pwa-implementation`         | PWA manifest、Service Worker、离线缓存与安装提示               |
-| `fec-web-workers`                | Web Worker、Transferable、Comlink、Worker 池                   |
-| `fec-canvas-threejs`             | Canvas 2D、Three.js、React Three Fiber、WebGL 性能与可访问性   |
-| `fec-svg-animation`              | CSS、Framer Motion、GSAP SVG 动画与 reduced-motion 降级        |
-| `fec-ui-design`                  | UI 方向、视觉识别、界面打磨、状态与视觉 QA                     |
-| `fec-typescript-type-safety`     | 类型契约、DTO 映射、类型守卫、泛型和类型级检查                 |
-| `fec-dependency-upgrade`         | 依赖升级、lockfile 评审、CVE 修复和迁移验证                    |
-| `fec-vite-project-standard`      | Vite 配置、环境变量安全、HMR、开发代理、构建优化与库模式       |
+OpenClaw 包包含 `skills/` 下全部 45 个公开工作流技能，按使用场景分组如下。
+
+**项目规范**
+
+| 技能                             | 用途                                                |
+| -------------------------------- | --------------------------------------------------- |
+| `fec-react-project-standard`     | React + TypeScript 项目规范                         |
+| `fec-vue3-project-standard`      | Vue 3 + TypeScript 项目规范                         |
+| `fec-nextjs-project-standard`    | Next.js App Router、SSR/SSG、路由、元数据、中间件   |
+| `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG、组合式函数、路由、中间件            |
+| `fec-vite-project-standard`      | Vite 配置、环境变量安全、HMR、开发代理、构建优化    |
+| `fec-monorepo-project-standard`  | pnpm workspace、Turborepo、Nx 结构与任务编排        |
+| `fec-typescript-project-standard` | TypeScript 配置、公开类型、声明文件、DTO 和泛型     |
+
+**实现能力**
+
+| 技能                      | 用途                                                           |
+| ------------------------- | -------------------------------------------------------------- |
+| `fec-data-fetching`       | 服务端状态获取、缓存、失效、SSR 与无限加载                     |
+| `fec-api-integration`     | 类型化 API 客户端、鉴权刷新、上传与实时通信                    |
+| `fec-state-management`    | 状态归属、store 选型、URL/服务端/表单/本地状态边界             |
+| `fec-form-handling`       | 跨框架表单选型、schema 校验、动态字段、上传、多步流程          |
+| `fec-browser-storage`     | localStorage/sessionStorage/IndexedDB/Cookies 选型与安全持久化 |
+| `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt 的权限路由保护         |
+| `fec-pwa-implementation`  | PWA manifest、Service Worker、离线缓存与安装提示               |
+| `fec-web-workers`         | Web Worker、Transferable、Comlink、Worker 池                   |
+| `fec-canvas-threejs`      | Canvas 2D、Three.js、React Three Fiber、WebGL 性能与可访问性   |
+| `fec-svg-animation`       | CSS、Framer Motion、GSAP SVG 动画与 reduced-motion 降级        |
+| `fec-list-virtualization` | 按框架选型的大列表虚拟滚动、测量、网格和无限滚动               |
+
+**测试**
+
+| 技能                    | 用途                                                     |
+| ----------------------- | -------------------------------------------------------- |
+| `fec-testing-strategy`  | 测试层级选择、风险矩阵与覆盖规划                         |
+| `fec-component-testing` | RTL / Vue Test Utils 组件测试与回归用例                  |
+| `fec-e2e-testing`       | Playwright / Cypress E2E 结构、产物、CI 与不稳定用例治理 |
+| `fec-tdd-workflow`      | 测试先行的 red-green-refactor 前端实现流程               |
+
+**评审与质量**
+
+| 技能                           | 用途                                                     |
+| ------------------------------ | -------------------------------------------------------- |
+| `fec-code-review`              | 架构、类型安全、渲染、样式、可访问性、测试、安全评审     |
+| `fec-debug-framework`          | 构建、运行时、UI 与 API/data 问题的系统化诊断            |
+| `fec-security-review`          | XSS、CSRF、敏感数据泄露、不安全输入处理                  |
+| `fec-accessibility-check`      | 面向 WCAG 的语义结构、键盘支持、焦点、标签检查           |
+| `fec-dependency-upgrade`       | 依赖升级、lockfile 评审、CVE 修复和迁移验证              |
+| `fec-validation-fix`           | 执行校验命令、分析失败并安全修复                         |
+| `fec-performance-optimization` | Core Web Vitals、bundle、渲染、内存、网络和预算评审      |
+| `fec-refactor-clean`           | 安全清理死代码、未用导出、样式、路由与依赖               |
+
+**设计 UI**
+
+| 技能                          | 用途                                                       |
+| ----------------------------- | ---------------------------------------------------------- |
+| `fec-ui-design`               | UI 方向、视觉识别、界面打磨、状态与视觉 QA                 |
+| `fec-image-generation`        | 图表、图片生成/编辑、视觉资产与 PNG QA 修复循环            |
+| `fec-drawio-studio`           | 可编辑 draw.io / diagrams.net 技术图、形状检索与代码结构图 |
+| `fec-web-video-presentation`  | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示 |
+| `fec-tailwind-design-system`  | Tailwind token、主题扩展、组件变体、class 治理和暗色模式   |
+| `fec-responsive-layout`       | 移动优先布局、容器查询、数据密集型响应式界面               |
+| `fec-motion-interaction`      | 上下文感知动效、页面转场、滚动动画与 reduced motion        |
+| `fec-implement-from-design`   | 基于 Figma、Sketch、MasterGo、Pixso、墨刀或截图实现 UI     |
+| `fec-storybook-component-doc` | Storybook 组件文档、设计系统展示与隔离状态预览             |
+
+**遗留迁移**
+
+| 技能                             | 用途                                       |
+| -------------------------------- | ------------------------------------------ |
+| `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS 传统前端规范 |
+| `fec-legacy-to-modern-migration` | 遗留前端现代化、目标栈识别与分阶段迁移策略 |
+
+**项目演进**
+
+| 技能          | 用途                                             |
+| ------------- | ------------------------------------------------ |
+| `fec-alchemy` | 吸收参考系统想法，并重设计为原创、项目原生改进   |
+
+**维护与文档**
+
+| 技能                            | 用途                                                     |
+| ------------------------------- | -------------------------------------------------------- |
+| `fec-backend-requirements-handoff` | 面向后端交接 UI 数据需求、用户动作、状态、规则和问题   |
+| `fec-doc-sync`                  | 同步 README、配置、脚本、路由/API、环境变量与部署事实   |
+| `fec-source-driven-development` | 根据项目事实和官方来源校验版本敏感的前端决策             |
 
 ### 技能使用：场景与示例
 
@@ -213,17 +265,23 @@ frontend-craft/
 | 构建交互式 3D 场景           | `fec-canvas-threejs`             | 「在 `src/components/ProductViewer.tsx` 添加 Three.js 产品展示，兼顾性能和降级方案。」                                                 |
 | 为落地页添加 SVG 动效        | `fec-svg-animation`              | 「用 Framer Motion 为 hero 区 SVG 添加动画，并为 reduced-motion 用户提供静态降级方案。」                                               |
 | 设计与打磨 UI                | `fec-ui-design`                  | 「请评审 `src/components/Dashboard.tsx` 的 UI 方向、视觉识别、间距、状态和动效打磨。」                                                 |
+| 构建可录屏网页演示           | `fec-web-video-presentation`     | 「把这段产品 demo 口播稿转成 16:9 浏览器演示：拆口播节拍、章节 step、主题 token，并给出录屏指引。」                                    |
 | 优化 Vite 构建配置           | `fec-vite-project-standard`      | 「请审计 `vite.config.ts` 的 HMR、开发代理、环境变量安全和库模式最佳实践。」                                                           |
 
 **斜杠命令（`commands/` 下的 Markdown）**
 
-作为**固定步骤**的命令说明加载。对话里用自然语言描述要做的事即可，代理可按对应命令文档执行，**无需**说出命令文件名。下表只列出常见 OpenClaw 示例；完整命令提示词见 [docs/zh-CN/example-prompts.md](docs/zh-CN/example-prompts.md#高级用户提示词)。
-
-| 命令文档          | 适用时机                                                                                 | 示例（自然语言）                                                                                                  |
-| ----------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| `fec-init.md`     | 在**业务仓库**里初始化 **Claude 风格** 的 `.claude/` 模板（文档内路径针对 `.claude/`）。 | 「请在本仓库初始化 `.claude/`，按插件提供的模板与规则复制；若已有文件请先问我是否覆盖。」                         |
-| `fec-review.md`   | 引导式评审并保存 `reports/code-review-*.md`。                                            | 「请评审我上一次提交里改动的文件，并写一份结构化 Markdown 报告到 `reports/`。」                                   |
-| `fec-scaffold.md` | 页面 / 功能 / 组件目录脚手架。                                                           | 「请为 React 项目脚手架一个新页面 UserDetail：放在 `src/pages/...`，并带上空的 `components/` 与 `hooks/` 目录。」 |
+作为**固定步骤**的命令说明加载。对话里用自然语言描述要做的事即可，代理可按对应命令文档执行，**无需**说出命令文件名。完整命令提示词见 [docs/zh-CN/example-prompts.md](docs/zh-CN/example-prompts.md#高级用户提示词)。
+
+| 命令文档                 | 适用时机                                                                                 | 示例（自然语言）                                                                                                  |
+| ------------------------ | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `fec-init.md`            | 在**业务仓库**里初始化 **Claude 风格** 的 `.claude/` 模板（文档内路径针对 `.claude/`）。 | 「请在本仓库初始化 `.claude/`，按插件提供的模板与规则复制；若已有文件请先问我是否覆盖。」                         |
+| `fec-review.md`          | 引导式评审并保存 `reports/code-review-*.md`。                                            | 「请评审我上一次提交里改动的文件，并写一份结构化 Markdown 报告到 `reports/`。」                                   |
+| `fec-scaffold.md`        | 页面 / 功能 / 组件目录脚手架。                                                           | 「请为 React 项目脚手架一个新页面 UserDetail：放在 `src/pages/...`，并带上空的 `components/` 与 `hooks/` 目录。」 |
+| `fec-plan.md`            | 实现前做架构方案或测试策略规划。                                                         | 「先规划 checkout 重写：组件边界、状态流、风险和测试覆盖。」                                                      |
+| `fec-tdd.md`             | 使用 red-green-refactor 的测试驱动实现流程。                                             | 「这个筛选组件请按 TDD 做：先写失败测试，再实现最小行为。」                                                       |
+| `fec-debug.md`           | 诊断构建、运行时、UI 或 API/data 失败。                                                  | 「登录后 dashboard 崩溃，请检查错误路径、定位根因，并写一份 debug 报告。」                                        |
+| `fec-refactor-clean.md`  | 分类并安全清理死代码、未用导出、样式和依赖。                                             | 「清理 `src/features/billing/` 里的未用导出和样式，保持行为不变并报告变更。」                                     |
+| `fec-doc-sync.md`        | 同步 README、文档、环境说明、脚本列表、API/路由说明和部署事实。                          | 「检查 README 命令列表是否还匹配 package scripts，并更新漂移的文档。」                                            |
 
 ### Hooks
 

package/README.zh-CN.md

@@ -32,7 +32,7 @@
 
 各运行时的路径与注意事项详见 [`docs/runtimes/`](docs/runtimes/)。
 
-它将 **13 个专业 agent**、**41 个自动激活 skill**、**8 个斜杠命令**、**5 个事件驱动 hook**、面向 6 个设计工具端点的 **MCP 集成**以及一整套**规则库**打包为一个可安装单元。运行一条命令，团队里的每一次 AI 会话都将以相同的方式编写 React、Vue、Next.js 或 Nuxt——类型安全、可访问、安全、一致。
+它将 **13 个专业 agent**、**45 个自动激活 skill**、**8 个斜杠命令**、**5 个事件驱动 hook**、面向 6 个设计工具端点的 **MCP 集成**以及一整套**规则库**打包为一个可安装单元。运行一条命令，团队里的每一次 AI 会话都将以相同的方式编写 React、Vue、Next.js 或 Nuxt——类型安全、可访问、安全、一致。
 
 ---
 
@@ -40,7 +40,7 @@
 
 | 痛点                                          | frontend-craft 的解法                                                 |
 | --------------------------------------------- | --------------------------------------------------------------------- |
-| AI 助手写出的前端代码风格不一、缺类型、不安全 | **41 个 skill** 将团队规范编码为可自动激活的工作流                    |
+| AI 助手写出的前端代码风格不一、缺类型、不安全 | **45 个 skill** 将团队规范编码为可自动激活的工作流                    |
 | 每款 AI 工具都有自己的插件格式                | **一条 CLI 命令** 把相同的规则、agent 和 hook 安装到 15 个运行时      |
 | 设计稿到代码的交接总有信息损失                | **MCP 集成** 从 Figma、Figma Desktop、Sketch、MasterGo、Pixso、墨刀引入更完整设计上下文 |
 | 代码评审随意、浅层                            | **13 个 agent** 输出分级报告：代码、安全、无障碍、性能、TS、UI 还原度 |
@@ -187,6 +187,7 @@ npx @bovinphang/frontend-craft@latest list
 | `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG、组合式 API、数据获取、中间件          |
 | `fec-vite-project-standard`     | Vite 配置、环境变量安全、HMR、开发代理、构建优化      |
 | `fec-monorepo-project-standard` | pnpm workspace、Turborepo、Nx 结构与任务编排          |
+| `fec-typescript-project-standard`   | TypeScript 配置、公开类型、声明文件、DTO 和泛型       |
 
 **实现能力** — 构建特定前端能力时激活：
 
@@ -219,7 +220,6 @@ npx @bovinphang/frontend-craft@latest list
 | ------------------------------ | ----------------------------------------------------- |
 | `fec-code-review`              | 架构、类型、渲染、样式、可访问性评审                  |
 | `fec-debug-framework`          | 系统化诊断构建、运行时、UI 和 API/数据问题            |
-| `fec-typescript-type-safety`   | 类型契约、DTO 映射、类型守卫、泛型和类型级检查        |
 | `fec-security-review`          | XSS、CSRF、敏感数据泄露、输入校验                     |
 | `fec-accessibility-check`      | WCAG 2.2、键盘、焦点、触控和屏幕阅读器行为            |
 | `fec-dependency-upgrade`       | 依赖升级、lockfile 评审、CVE 修复和迁移验证           |
@@ -231,11 +231,14 @@ npx @bovinphang/frontend-craft@latest list
 
 | 技能                          | 范围                                                     |
 | ----------------------------- | -------------------------------------------------------- |
-| `fec-ui-design`               | UI 方向、视觉识别、界面打磨、状态、视觉 QA               |
+| `fec-ui-design`               | 产品语境 UI 方向、反模板设计拨盘、媒体策略、状态、视觉 QA |
+| `fec-image-generation`        | 系统蓝图、流程工作流、交互式实时图、HTML/SVG/PNG 导出、图片生成/编辑、视觉资产和 PNG 自检 |
+| `fec-drawio-studio`         | 可编辑 draw.io / diagrams.net 技术图、XML/Mermaid/CSV URL 交付、形状检索、自动布局和代码结构图 |
+| `fec-web-video-presentation` | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示 |
 | `fec-tailwind-design-system`  | Tailwind token、主题扩展、组件变体、class 治理和暗色模式 |
 | `fec-responsive-layout`       | 移动优先布局、容器查询、数据密集型响应式界面             |
-| `fec-motion-interaction`      | 交互动效、页面转场、滚动动画、reduced-motion             |
-| `fec-implement-from-design`   | 基于 Figma/Sketch/MasterGo/Pixso/墨刀设计稿或摹客素材实现 UI |
+| `fec-motion-interaction`      | 场景化动效强度、页面转场、滚动动画、reduced-motion       |
+| `fec-implement-from-design`   | 基于设计工具、截图或分区级视觉参考实现 UI                |
 | `fec-storybook-component-doc` | Storybook 组件文档、设计系统呈现、隔离状态预览           |
 
 **遗留迁移** — 现代化迁移时激活：
@@ -255,6 +258,7 @@ npx @bovinphang/frontend-craft@latest list
 
 | 技能                            | 范围                                       |
 | ------------------------------- | ------------------------------------------ |
+| `fec-backend-requirements-handoff` | 前端向后端交接 UI 数据需求、用户动作、状态、业务规则与待确认问题 |
 | `fec-doc-sync`                  | 让前端文档与代码、配置、脚本、路由、API、环境变量和部署事实保持同步 |
 | `fec-source-driven-development` | 以项目事实和官方来源验证版本敏感的前端决策 |
 

package/agents/fec-architect.md

@@ -1,6 +1,6 @@
 ---
 name: fec-architect
-description: 当任务涉及页面拆分、组件架构、状态流设计、目录规划、数据流设计、模块边界划分或大型前端重构时，使用该子代理。将架构方案报告保存为 Markdown 文件。
+description: Use this subagent when the task involves page splitting, component architecture, state flow design, catalog planning, data flow design, module boundary demarcation, or large front-end refactoring. Save the architecture proposal report as a Markdown file.
 tools: Read, Edit, Write, MultiEdit, Glob, Grep, LS, Bash
 model: sonnet
 permissionMode: default
@@ -17,109 +17,109 @@ skills:
   - fec-monorepo-project-standard
 ---
 
-你是一名资深前端架构专家。
+You are a senior front-end architecture expert.
 
-## 核心职责
+## Core Responsibilities
 
-- 将大型 UI 任务拆分为可维护的模块
-- 明确组件边界与目录结构
-- 区分展示层、状态层和服务层职责
-- 设计数据流和状态管理方案
-- 给出解决当前问题所需的最小合理架构
-- 保持团队约定，避免过度设计
+- Split large UI tasks into maintainable modules
+- Clarify component boundaries and directory structure
+- Distinguish the responsibilities of the presentation layer, status layer and service layer
+- Design data flow and state management solutions
+- Give the minimum reasonable architecture required to solve the current problem
+- Maintain team agreement and avoid over-design
 
-## 架构分析流程
+## Architecture analysis process
 
-1. **理解现状**
-   - 扫描项目目录结构和技术栈
-   - 识别现有模式（组件组织、状态管理、路由结构）
-   - 查阅 CLAUDE.md 或 README 了解项目约定
+1. **Understand the current situation**
+- Scan project directory structure and technology stack
+- Identify existing patterns (component organization, state management, routing structures)
+- Check CLAUDE.md or README for project conventions
 
-2. **需求拆解**
-   - 将功能需求分解为独立模块
-   - 识别模块间的数据依赖关系
-   - 区分共享组件和业务组件
+2. **Requirement dismantling**
+- Decompose functional requirements into independent modules
+- Identify data dependencies between modules
+- Distinguish between shared components and business components
 
-3. **方案设计**
-   - 给出目标目录结构
-   - 说明各组件/模块的职责边界
-   - 设计状态管理方案（本地 state / 全局 store / URL 状态）
-   - 说明共享 hooks / composables / utilities
-   - 明确 API 层交互方式
-   - 对版本敏感的框架/API/库决策标注来源和假设
+3. **Project Design**
+- Give the target directory structure
+- Describe the boundaries of responsibilities of each component/module
+- Design state management solution (local state / global store / URL state)
+- Description of shared hooks/composables/utilities
+- Clarify how the API layer interacts
+- Annotate sources and assumptions for version-sensitive framework/API/library decisions
 
-4. **风险评估**
-   - 如果是重构，指出迁移风险和影响范围
-   - 标注需要与后端协商的接口变更
-   - 评估对现有测试的影响
-   - 指出需要用构建、测试、E2E 或手工验收闭环的关键路径
+4. **Risk Assessment**
+- If refactoring, indicate migration risks and scope of impact
+- Mark interface changes that require negotiation with the backend
+- Assess impact on existing tests
+- Identify critical paths that need to be closed with build, test, E2E or manual acceptance
 
-## 组件分层原则
+## Component layering principle
 
 ```
-页面组件 (Pages)
-  └── 容器组件 (Containers) — 负责数据获取和状态管理
-       └── 业务组件 (Features) — 负责业务逻辑展示
-            └── 通用组件 (UI) — 纯展示，无业务耦合
+Pages
+└── Container components (Containers) — Responsible for data acquisition and status management
+└── Business Components (Features) — Responsible for displaying business logic
+└── Universal Component (UI) - pure presentation, no business coupling
 ```
 
-- 页面组件只做路由映射和布局组合
-- 容器组件管理数据流，不包含 UI 细节
-- 业务组件可包含领域逻辑，但不直接调用 API
-- 通用组件通过 props/slots 接收数据，可跨项目复用
+- The page component only does route mapping and layout combination
+- Container components manage data flow and do not include UI details
+- Business components can contain domain logic but do not directly call APIs
+- Common components receive data through props/slots and can be reused across projects
 
-## 状态管理决策
+## State management decisions
 
-| 状态类型 | 推荐方案 |
+| Status type | Recommended solution |
 |----------|----------|
-| 组件内临时 UI 状态 | 本地 state (useState / ref) |
-| 跨组件共享的业务状态 | 全局 store (Pinia / Zustand) |
-| 服务端数据缓存 | 数据请求库 (React Query / VueQuery) |
-| URL 驱动的状态 | 路由参数 / 搜索参数 |
-| 表单状态 | 表单库 (React Hook Form / VeeValidate) |
+| Temporary UI state within the component | Local state (useState / ref) |
+| Business state shared across components | Global store (Pinia / Zustand) |
+| Server-side data caching | Data request library (React Query / VueQuery) |
+| URL driver status | routing parameters / search parameters |
+| Form Status | Form Library (React Hook Form / VeeValidate) |
 
-## 输出格式
+## Output format
 
 ```
-# 架构方案报告
+# Architecture plan report
 
-> 生成时间: YYYY-MM-DD HH:mm
-> 评审工具: frontend-craft
+> Generation time: YYYY-MM-DD HH:mm
+> Review tool: frontend-craft
 
-## 目标结构
-<目录树>
+## Target structure
+<directory tree>
 
-## 模块职责
-| 模块 | 职责 | 依赖 |
+## Module responsibilities
+| Module | Responsibilities | Dependencies |
 |------|------|------|
 
-## 数据流
-<状态管理方案和数据流向说明>
+## Data flow
+<State management scheme and data flow description>
 
-## 共享抽象
+## Shared abstraction
 - hooks / composables
 - utilities
-- 类型定义
+- Type definition
 
-## 实现步骤
+## Implementation steps
 1. ...
 2. ...
 
-## 风险与注意事项
+## Risks and Precautions
 - ...
 ```
 
-## 报告文件输出
+## Report file output
 
-架构方案完成后，必须将报告内容使用 Write 工具保存为 Markdown 文件：
+After the architectural plan is completed, the report content must be saved as a Markdown file using the Write tool:
 
-- 目录：项目根目录下的 `reports/`（如不存在则创建）
-- 文件名：`architecture-proposal-YYYY-MM-DD-HHmmss.md`（使用当前时间戳）
-- 保存后告知用户报告文件路径
+- Directory: `reports/` in the project root directory (create if it does not exist)
+- File name: `architecture-proposal-YYYY-MM-DD-HHmmss.md` (use current timestamp)
+- Inform the user of the report file path after saving
 
-## 强约束
+##Strong constraints
 
-- 不要脱离项目现有约定设计全新架构
-- 不要引入项目未使用的技术栈
-- 优先渐进式改进，而非推倒重来
-- 每个模块应可独立理解和测试
+- Do not design a completely new architecture that departs from the existing conventions of the project
+- Do not introduce technology stacks that are not used by the project
+- Prioritize incremental improvements rather than reinventing the wheel
+- Each module should be independently understandable and testable