@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/.claude-plugin/marketplace.json

@@ -15,10 +15,10 @@
             "source": {
                 "source": "npm",
                 "package": "@bovinphang/frontend-craft",
-                "version": "2.7.0"
+                "version": "2.8.0"
             },
             "description": "Enterprise frontend team Claude Code plugin — 13 agents, 45 skills, 8 commands, shared rule templates, and production-ready hooks for code review, TypeScript review, type-safety modeling, state management, Tailwind design systems, responsive layout, dependency upgrades, security review, testing strategy, E2E, component testing, route protection, API integration, backend requirements handoff, interaction motion, performance optimization, scaffolding, design-to-code (Figma/Sketch/MasterGo/Pixso/墨刀/摹客), UI design and polish, image generation, editable draw.io drawio studio, web video presentations, Vite standards, legacy-to-modern migration, React/Vue/Next.js/Nuxt/monorepo standards, PWA, Web Workers, Canvas/Three.js, SVG animation, CI/CD, architecture planning, project absorption, and UI debugging with multi-design-tool MCP integration. All reports auto-saved as Markdown files to reports/ directory.",
-            "version": "2.7.0",
+            "version": "2.8.0",
             "author": {
                 "name": "Bovin Phang",
                 "email": "pengbaowen@msn.com"

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend-craft",
-    "version": "2.7.0",
+    "version": "2.8.0",
     "description": "Shared Claude Code plugin for frontend teams, including frontend skills, subagents, hooks, and MCP integration for Figma/Sketch/MasterGo/Pixso/墨刀/摹客. All reports auto-saved as Markdown files.",
     "author": {
         "name": "Bovin Phang",

package/CHANGELOG.md

@@ -9,6 +9,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Project-facing release notes are maintained in English from 2.0.0 onward. Historical entries may preserve their original language.
 
+## [2.8.0] - 2026-06-25
+
+### Added
+
+- **Localized Simplified Chinese content pack:** added `localized/zh-CN` coverage for agents, commands, skills, templates, metadata, relations, evaluation examples, and bundled helper scripts so installs can choose localized AI-facing content without changing the canonical English root content.
+- **Installer language selection:** `fec install` / `fec setup` now accepts `--lang en|zh-CN`; interactive installs can choose the language, unsupported language values fail clearly, install manifests record `language`, and `update` reuses the previous manifest language when `--lang` is omitted.
+- **`fec-image-generation` HTML technical diagrams:** added browser-ready single-file diagram workflows for architecture, process workflows, sequence, data-flow, lifecycle, state-machine, runbook, PII / data-lineage, agent runtime, and memory diagrams, with semantic node types, flow-aware arrows, theme styles, summaries, and PNG QA handoff.
+- **Image-generation diagram scripts:** added `tech-diagram-render.mjs`, `interactive-diagram-server.mjs`, `export-diagram.mjs`, and `assets/interactive-diagram.html` for rendering HTML/SVG technical diagrams, running local live diagram sessions, and exporting SVG/PNG/JPG artifacts from HTML or SVG sources.
+- **Interactive live diagrams:** `fec-image-generation` now includes a local browser sketch route with session-scoped incremental node / edge commands, drag, relabel, remove, zoom, layout updates, and JSON / SVG / draw.io export handoff.
+- **`drawio-export.mjs`:** new cross-platform draw.io desktop export helper with PATH/default-location detection, PNG/SVG/PDF options, dry-run JSON output, and install guidance when draw.io is missing.
+
+### Changed
+
+- **`localized` package contents:** `package.json` now includes `localized` in the published file set so language packs ship with the npm package.
+- **Root content language policy:** root `agents`, `commands`, `skills`, and `templates` are now validated as English-only distributable content; Simplified Chinese AI-facing content lives under the localized pack.
+- **`fec-image-generation` routing:** diagram guidance now distinguishes Mermaid / SVG / HTML, draw.io, raster-first image generation, live sketches, process workflows, and themed semantic system diagrams so users can choose the right source-of-truth format.
+- **`fec-drawio-studio` quality workflow:** strengthened manual draw.io XML guidance for grid alignment, wrapping labels, `
` line breaks, readable font sizes, balanced containers, and named diagram patterns such as flowcharts, architecture, sequence, class, ERD, mindmap, and network topology.
+- **`diagram-lint` draw.io warnings:** now reports literal `\n` labels, missing wrapping/html styles, tiny fonts, off-grid vertices, page overflow, and overlap warnings so final delivery can use `--strict` as a stronger quality gate.
+- **draw.io shape index packaging:** the source shape index is now stored as pretty-printed `shape-index.json` instead of a gzipped JSON file, while standalone skill packages minify data JSON during packaging to keep publish artifacts compact.
+- **OpenClaw package and docs:** OpenClaw README files now list all 45 bundled skills and every command doc by use case, language links point to the OpenClaw-specific README pair, and the packed OpenClaw package is named `frontend-craft`.
+- **`typecheck:skill-scripts`:** now covers the new `fec-image-generation` diagram render, interactive server, and export scripts.
+
+### Fixed
+
+- **OpenClaw README language links:** fixed OpenClaw documentation links so English and Simplified Chinese variants reference `README.openclaw.md` and `README.openclaw.zh-CN.md` instead of the root README pair.
+- **Localized update behavior:** updates preserve the previously installed content language from `frontend-craft.manifest.json` when the user does not pass a new `--lang` option.
+
+### Chore
+
+- **Localization regression coverage:** added metadata consistency checks that keep root content English-only, require natural Simplified Chinese localized content, and verify localized metadata / relations / evaluation prompts contain translated prose.
+- **Installer language tests:** expanded CLI and update tests for `--lang`, unsupported language errors, manifest language recording, Simplified Chinese content installation, and update language reuse.
+- **Diagram workflow tests:** expanded image-generation and draw.io install tests for HTML technical diagram rendering, semantic diagram validation, live diagram server commands, export paths, draw.io export dry-runs, stricter lint warnings, and strict-mode overlap failures.
+- **Skill packaging tests:** added coverage that standalone skill packages minify packaged data JSON while preserving source JSON semantics.
+
 ## [2.7.0] - 2026-06-10
 
 ### Added

package/CHANGELOG.zh-CN.md

@@ -8,6 +8,40 @@
 
 自 **2.0.0** 起，面向发布的说明以英文 `CHANGELOG.md` 为权威来源；历史条目可能保留最初撰写语言。
 
+## [2.8.0] - 2026-06-25
+
+### 新增
+
+- **简体中文本地化内容包**：新增 `localized/zh-CN`，覆盖 agents、commands、skills、templates、metadata、relations、评测示例与随附 helper scripts，使安装时可选择本地化的 AI 面向内容，同时根目录继续保留权威英文内容。
+- **安装器语言选择**：`fec install` / `fec setup` 现在支持 `--lang en|zh-CN`；交互式安装可选择语言，不支持的语言值会清晰报错，安装 manifest 会记录 `language`，并且 `update` 在未传入 `--lang` 时复用上次 manifest 中的语言。
+- **`fec-image-generation` HTML 技术图**：新增浏览器可打开的单文件图表工作流，覆盖 architecture、process workflow、sequence、data-flow、lifecycle、state-machine、runbook、PII / data-lineage、agent runtime 与 memory diagrams，支持语义节点类型、按 flow 区分的箭头、主题样式、摘要卡片与 PNG QA 交付。
+- **图片生成图表脚本**：新增 `tech-diagram-render.mjs`、`interactive-diagram-server.mjs`、`export-diagram.mjs` 与 `assets/interactive-diagram.html`，用于渲染 HTML/SVG 技术图、本地 live diagram session，以及从 HTML 或 SVG 源导出 SVG/PNG/JPG 产物。
+- **交互式 live diagrams**：`fec-image-generation` 新增本地浏览器草图路线，支持按 session 隔离的增量 node / edge 命令、拖拽、重命名、删除、缩放、布局更新，以及 JSON / SVG / draw.io 导出交接。
+- **`drawio-export.mjs`**：新增跨平台 draw.io desktop 导出 helper，支持 PATH / 默认安装位置探测、PNG/SVG/PDF 参数、dry-run JSON 输出，并在缺少 draw.io 时给出安装建议。
+
+### 变更
+
+- **`localized` 包内容**：`package.json` 现在将 `localized` 纳入发布文件集，使语言包随 npm 包一起发布。
+- **根内容语言策略**：根目录下的 `agents`、`commands`、`skills` 与 `templates` 现在作为英文分发内容进行校验；简体中文 AI 面向内容集中在本地化内容包中。
+- **`fec-image-generation` 路由**：图表指南现在区分 Mermaid / SVG / HTML、draw.io、位图优先图片生成、live sketch、process workflow 与主题化语义系统图，帮助用户按交付需求选择正确的 source-of-truth 格式。
+- **`fec-drawio-studio` 质量工作流**：强化手写 draw.io XML 指南，覆盖网格对齐、标签换行、`
` 换行、可读字号、容器留白平衡，以及 flowchart、architecture、sequence、class、ERD、mindmap、network topology 等图表模式。
+- **`diagram-lint` draw.io warning**：新增 literal `\n` 标签、缺少 wrapping/html 样式、字号过小、顶点未对齐网格、页面越界与重叠 warning，最终交付可用 `--strict` 作为更强质量门。
+- **draw.io shape index 打包**：源 shape index 现在以格式化的 `shape-index.json` 保存，不再使用 gzip JSON；独立技能包在打包时会压缩 data JSON，从而保持发布产物体积紧凑。
+- **OpenClaw 包与文档**：OpenClaw README 现在按使用场景列出全部 45 个 bundled skills 和所有 command docs，语言链接指向 OpenClaw 专用 README 组合，并且 OpenClaw 打包产物命名为 `frontend-craft`。
+- **`typecheck:skill-scripts`**：现在覆盖新增的 `fec-image-generation` 图表渲染、交互服务器与导出脚本。
+
+### 修复
+
+- **OpenClaw README 语言链接**：修复 OpenClaw 文档链接，使英文与简体中文版本指向 `README.openclaw.md` 与 `README.openclaw.zh-CN.md`，不再跳到根 README。
+- **本地化更新行为**：当用户未传入新的 `--lang` 选项时，更新流程会从 `frontend-craft.manifest.json` 保留此前安装的内容语言。
+
+### Chore
+
+- **本地化回归覆盖**：新增 metadata consistency 校验，确保根内容保持英文、简体中文本地化内容是自然中文，并验证本地化 metadata / relations / eval prompts 含有翻译后的正文。
+- **安装器语言测试**：扩展 CLI 与 update 测试，覆盖 `--lang`、不支持语言报错、manifest language 记录、简体中文内容安装与 update 语言复用。
+- **图表工作流测试**：扩展 image-generation 与 draw.io 安装测试，覆盖 HTML 技术图渲染、语义图校验、live diagram server 命令、导出路径、draw.io export dry-run、更严格 lint warning，以及 strict mode 下的重叠失败。
+- **技能打包测试**：新增独立技能包 data JSON 压缩测试，确保打包后压缩 JSON，同时保持源 JSON 语义不变。
+
 ## [2.7.0] - 2026-06-10
 
 ### 新增

package/README.md

@@ -232,7 +232,7 @@ The skills below are grouped by use case so you can quickly find project standar
 | Skill                         | Scope                                                                         |
 | ----------------------------- | ----------------------------------------------------------------------------- |
 | `fec-ui-design`               | Product-context UI direction, anti-generic design dials, media strategy, states, visual QA |
-| `fec-image-generation`        | Diagrams, image generation/editing, visual assets, PNG QA and repair loops     |
+| `fec-image-generation`        | System blueprints, process workflows, interactive live diagrams, HTML/SVG/PNG exports, image generation/editing, visual assets, and PNG QA |
 | `fec-drawio-studio`         | Editable draw.io / diagrams.net technical diagrams, XML/Mermaid/CSV URL handoff, shape lookup, auto-layout, code maps |
 | `fec-web-video-presentation` | Recordable 16:9 step-driven web presentations from articles, scripts, lessons, and demos |
 | `fec-tailwind-design-system`  | Tailwind tokens, theme extension, variants, class governance, dark mode       |

package/README.openclaw.md

@@ -12,7 +12,7 @@
 
 **Language / 语言**
 
-[**English**](README.md) | [简体中文](README.zh-CN.md)
+[**English**](README.openclaw.md) | [简体中文](README.openclaw.zh-CN.md)
 
 </div>
 
@@ -136,41 +136,92 @@ frontend-craft/
 
 ### Skills
 
-| Skill                            | Purpose                                                                              |
-| -------------------------------- | ------------------------------------------------------------------------------------ |
-| `fec-code-review`                | Architecture, type safety, rendering, styles, accessibility, tests, security         |
-| `fec-security-review`            | XSS, CSRF, sensitive data leakage, unsafe input handling                             |
-| `fec-accessibility-check`        | WCAG-oriented semantic structure, keyboard support, focus, labels                    |
-| `fec-react-project-standard`     | React + TypeScript project standards                                                 |
-| `fec-vue3-project-standard`      | Vue 3 + TypeScript project standards                                                 |
-| `fec-typescript-project-standard`     | TypeScript config, public API types, declarations, DTOs, and generics                |
-| `fec-implement-from-design`      | Implement UI from Figma, Sketch, MasterGo, Pixso, Modao, or screenshots              |
-| `fec-validation-fix`             | Run validation commands, diagnose failures, and fix safely                           |
-| `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS legacy frontend standards                             |
-| `fec-legacy-to-modern-migration` | Legacy frontend modernization, target-stack selection, and phased migration          |
-| `fec-testing-strategy`           | Testing layer selection, risk matrix, and coverage planning                          |
-| `fec-e2e-testing`                | Playwright / Cypress E2E structure, artifacts, CI, and flaky test handling           |
-| `fec-nextjs-project-standard`    | Next.js App Router, SSR/SSG, routing, metadata, middleware                           |
-| `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG, composables, routing, middleware                                     |
-| `fec-monorepo-project-standard`  | pnpm workspace, Turborepo, Nx structure and task orchestration                       |
-| `fec-data-fetching`              | Server-state fetching, caching, invalidation, SSR, and infinite loading              |
-| `fec-state-management`           | State ownership, store selection, URL/server/form/local state boundaries             |
-| `fec-form-handling`              | Framework-aware forms, schema validation, dynamic fields, uploads, multi-step flows  |
-| `fec-tailwind-design-system`     | Tailwind tokens, theme extension, variants, class governance, dark mode              |
-| `fec-responsive-layout`          | Mobile-first layouts, container queries, data-dense responsive UI                    |
-| `fec-browser-storage`            | localStorage/sessionStorage/IndexedDB/Cookies selection and safe client persistence  |
-| `fec-route-protection`           | Authenticated and permissioned routes for React Router, Next.js, Vue Router, Nuxt    |
-| `fec-component-testing`          | React Testing Library / Vue Test Utils component tests and regression scenarios      |
-| `fec-storybook-component-doc`    | Storybook component docs, addons, MDX, interaction and visual test integration       |
-| `fec-list-virtualization`        | Framework-aware virtualization, item measurement, grids, and infinite scrolling      |
-| `fec-pwa-implementation`         | Manifest, service worker, offline cache, install prompts, update handling            |
-| `fec-web-workers`                | Web Worker integration, transferable objects, Comlink, worker pools                  |
-| `fec-canvas-threejs`             | Canvas 2D, Three.js, React Three Fiber, WebGL performance and accessibility          |
-| `fec-svg-animation`              | SVG animation with CSS, Framer Motion, GSAP, reduced-motion fallbacks                |
-| `fec-ui-design`                  | UI direction, visual identity, polish, states, visual QA                             |
-| `fec-web-video-presentation`     | Recordable 16:9 step-driven web presentations from articles, scripts, lessons, demos |
-| `fec-dependency-upgrade`         | Dependency upgrades, lockfile review, CVE remediation, migration verification        |
-| `fec-vite-project-standard`      | Vite config, env safety, HMR, dev proxy, build optimization, library mode            |
+The OpenClaw package includes all 45 public workflow skills from `skills/`, grouped here by use case.
+
+**Project standards**
+
+| Skill                            | Purpose                                                               |
+| -------------------------------- | --------------------------------------------------------------------- |
+| `fec-react-project-standard`     | React + TypeScript project standards                                  |
+| `fec-vue3-project-standard`      | Vue 3 + TypeScript project standards                                  |
+| `fec-nextjs-project-standard`    | Next.js App Router, SSR/SSG, routing, metadata, middleware            |
+| `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG, composables, routing, middleware                      |
+| `fec-vite-project-standard`      | Vite config, env safety, HMR, dev proxy, build optimization           |
+| `fec-monorepo-project-standard`  | pnpm workspace, Turborepo, Nx structure and task orchestration        |
+| `fec-typescript-project-standard` | TypeScript config, public API types, declarations, DTOs, and generics |
+
+**Implementation capabilities**
+
+| Skill                     | Purpose                                                                            |
+| ------------------------- | ---------------------------------------------------------------------------------- |
+| `fec-data-fetching`       | Server-state fetching, caching, invalidation, SSR, and infinite loading            |
+| `fec-api-integration`     | Typed API clients, auth refresh, uploads, and realtime integration                 |
+| `fec-state-management`    | State ownership, store selection, URL/server/form/local state boundaries           |
+| `fec-form-handling`       | Framework-aware forms, schema validation, dynamic fields, uploads, multi-step flows |
+| `fec-browser-storage`     | localStorage/sessionStorage/IndexedDB/Cookies selection and safe persistence       |
+| `fec-route-protection`    | Authenticated and permissioned routes for React Router, Next.js, Vue Router, Nuxt  |
+| `fec-pwa-implementation`  | Manifest, service worker, offline cache, install prompts, update handling          |
+| `fec-web-workers`         | Web Worker integration, transferable objects, Comlink, worker pools                |
+| `fec-canvas-threejs`      | Canvas 2D, Three.js, React Three Fiber, WebGL performance and accessibility        |
+| `fec-svg-animation`       | SVG animation with CSS, Framer Motion, GSAP, reduced-motion fallbacks              |
+| `fec-list-virtualization` | Framework-aware virtualization, item measurement, grids, and infinite scrolling    |
+
+**Testing**
+
+| Skill                   | Purpose                                                                    |
+| ----------------------- | -------------------------------------------------------------------------- |
+| `fec-testing-strategy`  | Testing layer selection, risk matrix, and coverage planning                |
+| `fec-component-testing` | React Testing Library / Vue Test Utils component tests and regression      |
+| `fec-e2e-testing`       | Playwright / Cypress E2E structure, artifacts, CI, and flaky test handling |
+| `fec-tdd-workflow`      | Test-first frontend implementation with red-green-refactor                 |
+
+**Review and quality**
+
+| Skill                          | Purpose                                                                         |
+| ------------------------------ | ------------------------------------------------------------------------------- |
+| `fec-code-review`              | Architecture, type safety, rendering, styles, accessibility, tests, security    |
+| `fec-debug-framework`          | Systematic diagnostics for build, runtime, UI, and API/data failures            |
+| `fec-security-review`          | XSS, CSRF, sensitive data leakage, unsafe input handling                        |
+| `fec-accessibility-check`      | WCAG-oriented semantic structure, keyboard support, focus, labels               |
+| `fec-dependency-upgrade`       | Dependency upgrades, lockfile review, CVE remediation, migration verification   |
+| `fec-validation-fix`           | Run validation commands, diagnose failures, and fix safely                      |
+| `fec-performance-optimization` | Core Web Vitals, bundle, rendering, memory, network, and budget reviews         |
+| `fec-refactor-clean`           | Safe dead-code, unused export, style, route, and dependency cleanup             |
+
+**Design UI**
+
+| Skill                         | Purpose                                                                              |
+| ----------------------------- | ------------------------------------------------------------------------------------ |
+| `fec-ui-design`               | UI direction, visual identity, polish, states, visual QA                             |
+| `fec-image-generation`        | Diagrams, image generation/editing, visual assets, and PNG QA repair loops           |
+| `fec-drawio-studio`           | Editable draw.io / diagrams.net technical diagrams, shape lookup, and code maps      |
+| `fec-web-video-presentation`  | Recordable 16:9 step-driven web presentations from articles, scripts, lessons, demos |
+| `fec-tailwind-design-system`  | Tailwind tokens, theme extension, variants, class governance, dark mode              |
+| `fec-responsive-layout`       | Mobile-first layouts, container queries, data-dense responsive UI                    |
+| `fec-motion-interaction`      | Context-aware motion, page transitions, scroll animation, reduced motion             |
+| `fec-implement-from-design`   | Implement UI from Figma, Sketch, MasterGo, Pixso, Modao, or screenshots              |
+| `fec-storybook-component-doc` | Storybook component docs, design-system presentation, isolated state previews        |
+
+**Legacy migration**
+
+| Skill                            | Purpose                                                                     |
+| -------------------------------- | --------------------------------------------------------------------------- |
+| `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS legacy frontend standards                    |
+| `fec-legacy-to-modern-migration` | Legacy frontend modernization, target-stack selection, and phased migration |
+
+**Project evolution**
+
+| Skill         | Purpose                                                                  |
+| ------------- | ------------------------------------------------------------------------ |
+| `fec-alchemy` | Absorb reference system ideas through original, project-native redesign  |
+
+**Maintenance docs**
+
+| Skill                           | Purpose                                                                            |
+| ------------------------------- | ---------------------------------------------------------------------------------- |
+| `fec-backend-requirements-handoff` | Frontend-to-backend handoff for UI data needs, actions, states, rules, questions |
+| `fec-doc-sync`                  | Keep frontend docs in sync with code, config, scripts, routes, APIs, and env facts |
+| `fec-source-driven-development` | Verify version-sensitive frontend decisions against project facts and sources      |
 
 ### Using skills (scenarios & examples)
 
@@ -219,13 +270,18 @@ This section is a quick OpenClaw-oriented sample, not the full prompt catalog. F
 
 **Slash commands (markdown under `commands/`)**
 
-These are loaded as command specs; use them when you want a **fixed checklist** instead of free-form matching. In chat, describe what you want—the agent can follow the matching command doc without you naming it. The table below lists common OpenClaw examples; the complete command prompt set is in [docs/example-prompts.md](docs/example-prompts.md#power-user-prompts).
-
-| Command doc       | When to use                                                                                                 | Example (plain language)                                                                                                     |
-| ----------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `fec-init.md`     | Bootstrap **Claude-style** `.claude/` templates in a **project repo** (paths in the doc target `.claude/`). | “Initialize this repo’s `.claude/` with the frontend-craft templates and rules from the plugin; ask before overwriting.”     |
-| `fec-review.md`   | Guided review + save `reports/code-review-*.md`.                                                            | “Review the files changed in my last commit and write a structured markdown report under `reports/`.”                        |
-| `fec-scaffold.md` | Page / feature / component folder layout.                                                                   | “Scaffold a new React page `UserDetail` with the usual `src/pages/...` layout and empty `components/` and `hooks/` folders.” |
+These are loaded as command specs; use them when you want a **fixed checklist** instead of free-form matching. In chat, describe what you want—the agent can follow the matching command doc without you naming it. The complete command prompt set is in [docs/example-prompts.md](docs/example-prompts.md#power-user-prompts).
+
+| Command doc              | When to use                                                                                                 | Example (plain language)                                                                                                     |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `fec-init.md`            | Bootstrap **Claude-style** `.claude/` templates in a **project repo** (paths in the doc target `.claude/`). | “Initialize this repo’s `.claude/` with the frontend-craft templates and rules from the plugin; ask before overwriting.”     |
+| `fec-review.md`          | Guided review + save `reports/code-review-*.md`.                                                            | “Review the files changed in my last commit and write a structured markdown report under `reports/`.”                        |
+| `fec-scaffold.md`        | Page / feature / component folder layout.                                                                   | “Scaffold a new React page `UserDetail` with the usual `src/pages/...` layout and empty `components/` and `hooks/` folders.” |
+| `fec-plan.md`            | Architecture or test planning before implementation.                                                        | “Plan the checkout rewrite first: component boundaries, state flow, risks, and test coverage.”                               |
+| `fec-tdd.md`             | Red-green-refactor implementation workflow.                                                                 | “Use a TDD loop for this filter component: write the failing test first, then implement the minimum behavior.”                |
+| `fec-debug.md`           | Diagnose build, runtime, UI, or API/data failures.                                                          | “The dashboard crashes after login; inspect the error path, isolate the cause, and write a debug report.”                    |
+| `fec-refactor-clean.md`  | Classify and safely remove dead code, unused exports, styles, and dependencies.                              | “Clean up unused exports and styles in `src/features/billing/`, preserving behavior and reporting what changed.”             |
+| `fec-doc-sync.md`        | Sync README, docs, env notes, script lists, API/route notes, and deploy facts.                               | “Check whether the README command list still matches package scripts and update the docs that drifted.”                      |
 
 ### Hooks
 

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,41 +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-typescript-project-standard`     | TypeScript 配置、公开类型、声明文件、DTO 和泛型                |
-| `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-web-video-presentation`     | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示     |
-| `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` | 根据项目事实和官方来源校验版本敏感的前端决策             |
 
 ### 技能使用：场景与示例
 
@@ -219,13 +270,18 @@ frontend-craft/
 
 **斜杠命令（`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

@@ -232,7 +232,7 @@ npx @bovinphang/frontend-craft@latest list
 | 技能                          | 范围                                                     |
 | ----------------------------- | -------------------------------------------------------- |
 | `fec-ui-design`               | 产品语境 UI 方向、反模板设计拨盘、媒体策略、状态、视觉 QA |
-| `fec-image-generation`        | 图表、图片生成/编辑、视觉资产、PNG 自检和修复循环        |
+| `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 治理和暗色模式 |