@bovinphang/frontend-craft 2.6.0 → 2.8.0

package/.claude-plugin/marketplace.json

@@ -15,10 +15,10 @@
             "source": {
                 "source": "npm",
                 "package": "@bovinphang/frontend-craft",
-                "version": "2.6.0"
+                "version": "2.8.0"
             },
-            "description": "Enterprise frontend team Claude Code plugin — 13 agents, 41 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, interaction motion, performance optimization, scaffolding, design-to-code (Figma/Sketch/MasterGo/Pixso/墨刀/摹客), UI design and polish, 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.6.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.8.0",
             "author": {
                 "name": "Bovin Phang",
                 "email": "pengbaowen@msn.com"

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend-craft",
-    "version": "2.6.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,77 @@ 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
+
+- **`fec-drawio-studio` skill:** editable draw.io / diagrams.net workflow for technical diagrams, including official shape lookup, brand symbols, Graphviz auto-layout, code structure maps (TS / JS / Go / Python / Rust), validation, export fallback, and an `XML / Mermaid / CSV` URL handoff (`diagram-url --create`) with self-hosted `baseUrl`, lightbox, dark and Windows `.url` shortcut support.
+- **`fec-image-generation` skill:** diagrams, charts, posters, UI mockups, infographics, and image-edit workflows, plus `scripts/png-qa.mjs` for PNG visual QA with bounded self-repair (registered in `typecheck:skill-scripts`).
+- **`fec-backend-requirements-handoff` skill:** frontend-to-backend handoff for UI data needs, user actions, states, permissions, business rules, uncertainties, and backend discussion points — without dictating implementation.
+- **`fec-web-video-presentation` skill:** recordable 16:9 step-driven web presentations from articles, scripts, lessons, and demos, with compact references, starter theme data, and a cross-platform Vite/React scaffold helper.
+- **Modular reference docs:** split several monolithic reference files into focused modules — `fec-e2e-testing` (e2e-ci-reporting / e2e-special-scenarios / e2e-visual-regression), `fec-legacy-to-modern-migration` (migration-execution-checklist / migration-strategy-and-mapping), `fec-performance-optimization` (framework-performance-patterns), `fec-react-project-standard` (react-project-structure / react-runtime-patterns / react-quality-patterns / react-performance-patterns), and `fec-vue3-project-standard` (vue3-project-structure / vue3-composables-routing / vue3-state-api-quality / vue3-performance-patterns). Each `SKILL.md` now points at the new focused references.
+- **Install coverage for the new skills:** `tests/install/image-generation-skill.test.ts`, `tests/install/drawio-studio-skill.test.ts`, expanded `tests/install/ui-design-intelligence.test.ts` (designRead, designDials, page-intent dial behavior) and `tests/install/end-to-end.test.ts` (new skill ids, taxonomy, relations).
+
+### Changed
+
+- **BREAKING — `fec-typescript-type-safety` renamed to `fec-typescript-project-standard`:** the skill directory, id, and metadata entry are renamed; type-safety content is preserved as `references/type-safety.md` inside the new skill, and a top-level `SKILL.md` covers TypeScript project standards (config, public API types, declarations, DTOs, generics). `agents/fec-typescript-reviewer.md` and all `skills/metadata.json` / `skills/relations.json` references were updated. **Migration:** replace every `fec-typescript-type-safety` reference (in agent / skill frontmatter, `relations.json`, eval queries, custom docs) with `fec-typescript-project-standard`.
+- **Skill taxonomy — new `project-standard` category:** the `project-standard` taxonomy was already declared in 2.6.0 metadata; this release populates it with the renamed TypeScript skill and aligns README skill tables across all 5 locales. `fec-monorepo-project-standard` remains in `project-evolution`/standard mix; the existing 7 categories are unchanged.
+- **Skill count:** 41 → 45 across README locales (en / zh-CN / zh-TW / ja-JP / ko-KR), `skills/metadata.json`, `.claude-plugin/marketplace.json` description, and `skills/eval_queries.json` trigger queries. README wording, project-structure docs, and example-prompts tables were re-tagged to label every capability entry by type (skill / agent / cmd).
+- **`fec-ui-design` enhancements:** added product-context reading, design dials (`visualTension`, `motionIntensity`, `informationDensity`, `mediaAuthenticity`, `contentPersuasion`), anti-generic UI guidance, and a visual-references strategy. `design-system.mjs` script, `style-archetypes.json`, `ux-quality-rules.json`, `design-intelligence.md`, and `pre-delivery-checklist.md` data were extended; multi-locale READMEs and project-structure docs were updated.
+- **`fec-motion-interaction` enhancements:** added context-aware motion-intensity guidance, aligning with `fec-ui-design` design dials.
+- **`fec-implement-from-design` enhancements:** added screenshot / section-level visual references alongside the existing Figma / Sketch / MasterGo / Pixso / 墨刀 / 摹客 sources.
+- **`fec-drawio-studio` lint hardening:** `diagram-lint` now forbids XML comments, unescaped ampersands and angle brackets, self-closing edge cells, missing root / layer cells, and warns when vertex labels contain HTML without the `html=1` style. New install tests cover `diagram-url` and `diagram-lint`.
+- **`fec-legacy-to-modern-migration`, `fec-tailwind-design-system`, `fec-responsive-layout`:** added Playwright-equivalent validation guidance so migration and visual-sensitive tasks build a before/after behavior checklist and pick the validation layer (Playwright / visual diff / typecheck / unit) matched to the change risk.
+- **Shared rules slim-down:** `templates/shared/rules/fec-*.md` were condensed to standing project-resident hard constraints. Productized guidance for UI design, Tailwind design systems, responsive layout, TypeScript modeling, error-handling framework internals, and rendering patterns now lives in their dedicated skills instead of being inlined into rules; `fec-i18n.md`, `fec-responsive-design.md`, `fec-typescript.md`, `fec-state-management.md`, `fec-design-system.md`, `fec-rendering-patterns.md`, `fec-error-handling.md`, `fec-ci-cd.md`, and `fec-refactoring.md` were all trimmed.
+- **Multilingual README sync:** the new "XML/Mermaid/CSV URL handoff" description for `fec-drawio-studio` and the new design-dial framing for `fec-ui-design` are reflected in all 5 locales. Old references to the removed `/fec-build-fix` slash command and `fec-build-fixer` agent were replaced with the real `/fec-debug` command and `fec-debugger` agent. `docs/example-prompts.md` (and its zh-CN mirror) now covers all 45 skills.
+- **Marketplace metadata:** `marketplace.json` description and `package.json` keywords updated to reflect the 45-skill surface; re-indented to the repository's prettier configuration.
+- **`fec-doc-sync` scope:** the doc-sync workflow continues to cover env notes, scripts, API / route notes, and deploy facts in addition to user-facing docs; example prompts, the `/fec-doc-sync` command doc, and `skills/metadata.json` align.
+
+### Removed
+
+- **`fec-typescript-type-safety` skill directory:** the legacy directory was removed; its content lives in `fec-typescript-project-standard` (`references/type-safety.md`). Update any custom rules, agents, or skills that referenced the old id.
+
+### Chore
+
+- **JSON metadata reformat:** `marketplace.json` and `skills/metadata.json` indentation / trailing-newline conventions normalized.
+- **Project-structure docs:** `docs/project-structure.md` and its `zh-CN` mirror updated to enumerate the new skills and reorganized reference modules.
+- **Install test coverage:** added `tests/install/image-generation-skill.test.ts` and `tests/install/drawio-studio-skill.test.ts`; existing end-to-end and metadata-consistency tests updated to assert the new skill ids, taxonomy, and relations.
+- **Skill-script typecheck:** `typecheck:skill-scripts` now also covers `skills/fec-image-generation/scripts/png-qa.mjs`.
+
 
 ## [2.6.0] - 2026-06-07
 
@@ -78,7 +149,7 @@ Project-facing release notes are maintained in English from 2.0.0 onward. Histor
 ### Added
 
 - **Debug workflow:** added `fec-debug` slash command with type-based routing, `fec-debugger` agent for complex diagnostic scenarios, and `fec-debug-framework` skill with a 5-step diagnostic methodology.
-- **6 new skills:** `fec-performance-optimization` (Core Web Vitals, memory leaks, performance budgets), `fec-source-driven-development` (evidence-based decisions with official-docs verification), `fec-state-management` (state architecture patterns), `fec-typescript-type-safety` (type safety enforcement), `fec-dependency-upgrade` (upgrade planning), `fec-responsive-layout` (responsive layout strategy), and `fec-tailwind-design-system` (Tailwind-based design system implementation).
+- **6 new skills:** `fec-performance-optimization` (Core Web Vitals, memory leaks, performance budgets), `fec-source-driven-development` (evidence-based decisions with official-docs verification), `fec-state-management` (state architecture patterns), `fec-typescript-project-standard` (TypeScript project standards and type safety), `fec-dependency-upgrade` (upgrade planning), `fec-responsive-layout` (responsive layout strategy), and `fec-tailwind-design-system` (Tailwind-based design system implementation).
 - **2 new integration skills:** `fec-api-integration` and `fec-motion-interaction`.
 - **Example prompts library:** added `docs/example-prompts.md` and `docs/zh-CN/example-prompts.md` with scenario-based prompt catalogs covering skills, agents, commands, design workflows, testing, maintenance, and runtime setup; linked from all README variants.
 - **UI design system generator:** added `design-system.mjs` generator with product rules, style archetypes, UX quality and Stack UI rules data packages; supports `--persist` and `--page` flags to write `MASTER.md` and page overrides.

package/CHANGELOG.zh-CN.md

@@ -8,6 +8,76 @@
 
 自 **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
+
+### 新增
+
+- **`fec-drawio-studio` 技能**：可编辑 draw.io / diagrams.net 技术图工作流，涵盖官方 shape 查询、品牌符号、Graphviz 自动布局、多语言代码结构映射（TS / JS / Go / Python / Rust）、校验、导出兜底，并支持 `XML / Mermaid / CSV` URL 交付（`diagram-url --create`），可使用自托管 `baseUrl`、lightbox、暗色主题与 Windows `.url` 快捷方式。
+- **`fec-image-generation` 技能**：覆盖示意图、图表、海报、UI mockup、信息图与图像编辑流程，并提供 `scripts/png-qa.mjs` 进行有界自修复的 PNG 视觉 QA（已纳入 `typecheck:skill-scripts` 校验范围）。
+- **`fec-backend-requirements-handoff` 技能**：前端→后端需求交接，描述 UI 数据需求、用户操作、状态、权限、业务规则、不确定点和需要后端澄清的问题，不规定实现方式。
+- **`fec-web-video-presentation` 技能**：将文章、口播稿、课程和 demo 转为可录屏的 16:9 步进式网页演示，包含精简参考文档、starter theme 数据和跨平台 Vite/React 脚手架 helper。
+- **参考文档模块化拆分**：将多个技能的单体参考文档拆分为聚焦模块——`fec-e2e-testing`（e2e-ci-reporting / e2e-special-scenarios / e2e-visual-regression）、`fec-legacy-to-modern-migration`（migration-execution-checklist / migration-strategy-and-mapping）、`fec-performance-optimization`（framework-performance-patterns）、`fec-react-project-standard`（react-project-structure / react-runtime-patterns / react-quality-patterns / react-performance-patterns）、`fec-vue3-project-standard`（vue3-project-structure / vue3-composables-routing / vue3-state-api-quality / vue3-performance-patterns）；各 `SKILL.md` 同步指向新的聚焦参考。
+- **新技能的安装覆盖**：新增 `tests/install/image-generation-skill.test.ts`、`tests/install/drawio-studio-skill.test.ts`，并扩展 `tests/install/ui-design-intelligence.test.ts`（designRead、designDials、按页面意图拨盘行为）和 `tests/install/end-to-end.test.ts`（新技能 id、taxonomy、relations）。
+
+### 变更
+
+- **BREAKING — `fec-typescript-type-safety` 重命名为 `fec-typescript-project-standard`**：技能目录、id 与 metadata 条目已统一重命名；原 type-safety 内容作为 `references/type-safety.md` 收纳到新技能下，并新增顶层 `SKILL.md` 覆盖 TypeScript 项目规范（配置、对外 API 类型、声明文件、DTO、泛型）。`agents/fec-typescript-reviewer.md`、`skills/metadata.json`、`skills/relations.json` 中的引用已同步更新。**迁移指引**：将所有 `fec-typescript-type-safety` 引用（agent / skill frontmatter、`relations.json`、评测样例、自定义文档）替换为 `fec-typescript-project-standard`。
+- **Skill 分类 — `project-standard` 类别落地**：2.6.0 已在 metadata 中声明 `project-standard` 分类，本版本正式将重命名后的 TypeScript 技能归入该类，并同步各语言 README 技能表。原有 7 个分类保持不变。
+- **技能数量**：41 → 45，已同步到各语言 README（en / zh-CN / zh-TW / ja-JP / ko-KR）、`skills/metadata.json`、`.claude-plugin/marketplace.json` 描述与 `skills/eval_queries.json` 触发评测样例。README 文案、项目结构文档、示例提示表对每个能力条目按类型（skill / agent / cmd）重新打标。
+- **`fec-ui-design` 增强**：新增产品语境读取、设计拨盘（`visualTension`、`motionIntensity`、`informationDensity`、`mediaAuthenticity`、`contentPersuasion`）、反通用化 UI 引导与视觉参考策略；扩展 `design-system.mjs` 脚本、`style-archetypes.json`、`ux-quality-rules.json`、`design-intelligence.md` 与 `pre-delivery-checklist.md` 数据；同步更新多语言 README 与项目结构文档。
+- **`fec-motion-interaction` 增强**：新增 context-aware motion intensity 引导，与 `fec-ui-design` 设计拨盘对齐。
+- **`fec-implement-from-design` 增强**：在原有 Figma / Sketch / MasterGo / Pixso / 墨刀 / 摹客 基础上，新增 screenshot / section-level 视觉参考输入。
+- **`fec-drawio-studio` lint 强化**：`diagram-lint` 禁止 XML 注释、未转义 `&` 与尖括号、自闭合边单元格、缺失根 / 图层单元格，并对顶点标签内未带 `html=1` 样式的 HTML 内容发出警告。安装测试覆盖 `diagram-url` 与 `diagram-lint`。
+- **`fec-legacy-to-modern-migration`、`fec-tailwind-design-system`、`fec-responsive-layout`**：补充 Playwright 等效的验证指引，要求迁移与视觉敏感类任务构建前后行为清单并按风险选择合适的验证层（Playwright / 视觉 diff / typecheck / 单测）。
+- **Shared rules 精简**：`templates/shared/rules/fec-*.md` 收敛为项目常驻的硬约束；UI 设计、Tailwind 设计系统、响应式布局、TypeScript 建模、错误处理框架内部细节、渲染模式等产品化内容转由对应技能承载；`fec-i18n.md`、`fec-responsive-design.md`、`fec-typescript.md`、`fec-state-management.md`、`fec-design-system.md`、`fec-rendering-patterns.md`、`fec-error-handling.md`、`fec-ci-cd.md`、`fec-refactoring.md` 同步精简。
+- **多语言 README 同步**：在 5 个语言版本中补齐 `fec-drawio-studio` 的「XML/Mermaid/CSV URL 交付」描述与 `fec-ui-design` 的设计拨盘表述；将已移除的 `/fec-build-fix` 斜杠命令与 `fec-build-fixer` agent 引用替换为 `/fec-debug` 与 `fec-debugger`；`docs/example-prompts.md` 及其 zh-CN 镜像已覆盖全部 45 个技能。
+- **Marketplace 元数据**：`marketplace.json` 描述与 `package.json` keywords 同步反映 45 个技能面，并按仓库 prettier 配置重新缩进。
+- **`fec-doc-sync` 范围**：继续保持对 env 说明、脚本、API / 路由说明与部署事实的覆盖；示例提示、`/fec-doc-sync` 命令文档与 `skills/metadata.json` 已对齐。
+
+### 移除
+
+- **`fec-typescript-type-safety` 技能目录**：原目录已移除；其内容迁移至 `fec-typescript-project-standard` 的 `references/type-safety.md`。如自定义规则、agent、skill 引用了旧 id，请同步更新。
+
+### Chore
+
+- **JSON 元数据重排**：`marketplace.json` 与 `skills/metadata.json` 缩进与末尾换行风格统一。
+- **项目结构文档**：`docs/project-structure.md` 及其 `zh-CN` 镜像同步列举新技能与重组后的参考模块。
+- **安装测试覆盖**：新增 `tests/install/image-generation-skill.test.ts`、`tests/install/drawio-studio-skill.test.ts`；现有 end-to-end 与 metadata-consistency 测试同步更新以断言新技能 id、taxonomy 与 relations。
+- **技能脚本类型检查**：`typecheck:skill-scripts` 同时覆盖 `skills/fec-image-generation/scripts/png-qa.mjs`。
 
 
 ## [2.6.0] - 2026-06-07
@@ -78,7 +148,7 @@
 ### 新增
 
 - **调试工作流**：新增 `/fec-debug` 斜杠命令（按类型自动路由）、`fec-debugger` agent（复杂诊断场景）和 `fec-debug-framework` skill（5 步诊断方法论）。
-- **6 个新技能**：`fec-performance-optimization`（Core Web Vitals、内存泄漏、性能预算）、`fec-source-driven-development`（基于官方文档验证的证据驱动决策）、`fec-state-management`（状态架构模式）、`fec-typescript-type-safety`（类型安全强化）、`fec-dependency-upgrade`（依赖升级规划）、`fec-responsive-layout`（响应式布局策略）和 `fec-tailwind-design-system`（基于 Tailwind 的设计系统实现）。
+- **6 个新技能**：`fec-performance-optimization`（Core Web Vitals、内存泄漏、性能预算）、`fec-source-driven-development`（基于官方文档验证的证据驱动决策）、`fec-state-management`（状态架构模式）、`fec-typescript-project-standard`（TypeScript 项目规范与类型安全）、`fec-dependency-upgrade`（依赖升级规划）、`fec-responsive-layout`（响应式布局策略）和 `fec-tailwind-design-system`（基于 Tailwind 的设计系统实现）。
 - **2 个新集成技能**：`fec-api-integration` 和 `fec-motion-interaction`。
 - **示例提示库**：新增 `docs/example-prompts.md` 和 `docs/zh-CN/example-prompts.md`，涵盖技能、Agent、命令、设计工作流、测试、维护和运行时配置等场景化提示目录；已在所有 README 变体中添加链接。
 - **UI 设计系统生成器**：新增 `design-system.mjs` 生成器，包含产品规则、风格原型、UX 质量和 Stack UI 规则数据包；支持 `--persist` 和 `--page` 标志生成 `MASTER.md` 和页面覆盖。

package/README.md

@@ -32,7 +32,7 @@
 
 Per-runtime paths and caveats live in [`docs/runtimes/`](docs/runtimes/).
 
-It bundles **13 specialized agents**, **41 auto-activated skills**, **8 slash commands**, **5 event-driven hooks**, **MCP integrations** for 6 design-tool endpoints, and a complete **rules library** into a single installable package. Run one command, and every AI session on your team writes React, Vue, Next.js, or Nuxt the same way — typed, accessible, secure, and consistent.
+It bundles **13 specialized agents**, **45 auto-activated skills**, **8 slash commands**, **5 event-driven hooks**, **MCP integrations** for 6 design-tool endpoints, and a complete **rules library** into a single installable package. Run one command, and every AI session on your team writes React, Vue, Next.js, or Nuxt the same way — typed, accessible, secure, and consistent.
 
 ---
 
@@ -40,7 +40,7 @@ It bundles **13 specialized agents**, **41 auto-activated skills**, **8 slash co
 
 | Problem                                                              | What frontend-craft does                                                                       |
 | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| AI assistants write inconsistent, untyped, or insecure frontend code | **41 skills** encode team standards — auto-activated when the assistant touches matching files |
+| AI assistants write inconsistent, untyped, or insecure frontend code | **45 skills** encode team standards — auto-activated when the assistant touches matching files |
 | Each AI tool has its own plugin format                               | **One CLI** installs the same rules, agents, and hooks into 15 runtimes                        |
 | Design-to-code handoff is lossy                                      | **MCP integrations** bring in richer context from Figma, Figma Desktop, Sketch, MasterGo, Pixso, and 墨刀 |
 | Reviews are ad-hoc and shallow                                       | **13 agents** produce graded reports: code, security, a11y, performance, TS, UI fidelity       |
@@ -187,6 +187,7 @@ The skills below are grouped by use case so you can quickly find project standar
 | `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG, composables, data fetching, 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, generics             |
 
 **Implementation capabilities** — activated when building specific frontend behavior:
 
@@ -219,7 +220,6 @@ The skills below are grouped by use case so you can quickly find project standar
 | ------------------------------ | ----------------------------------------------------------------------------- |
 | `fec-code-review`              | Architecture, types, rendering, styles, a11y review                           |
 | `fec-debug-framework`          | Systematic diagnostics for build, runtime, UI, and API/data failures          |
-| `fec-typescript-type-safety`   | Type contracts, DTO mapping, type guards, generics, type-level checks         |
 | `fec-security-review`          | XSS, CSRF, sensitive data leakage, input validation                           |
 | `fec-accessibility-check`      | WCAG 2.2, keyboard, focus, touch, and screen-reader behavior                  |
 | `fec-dependency-upgrade`       | Dependency upgrades, lockfile review, CVE remediation, migration verification |
@@ -231,11 +231,14 @@ The skills below are grouped by use case so you can quickly find project standar
 
 | Skill                         | Scope                                                                         |
 | ----------------------------- | ----------------------------------------------------------------------------- |
-| `fec-ui-design`               | UI direction, visual identity, polish, states, visual QA                      |
+| `fec-ui-design`               | Product-context UI direction, anti-generic design dials, media strategy, states, visual QA |
+| `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       |
 | `fec-responsive-layout`       | Mobile-first layouts, container queries, data-dense responsive UI             |
-| `fec-motion-interaction`      | Interaction motion, page transitions, scroll animation, reduced motion        |
-| `fec-implement-from-design`   | Build UI from Figma/Sketch/MasterGo/Pixso/墨刀 design files, or 摹客 assets   |
+| `fec-motion-interaction`      | Context-aware motion intensity, page transitions, scroll animation, reduced motion |
+| `fec-implement-from-design`   | Build UI from design tools, screenshots, or section-level visual references   |
 | `fec-storybook-component-doc` | Storybook component docs, design-system presentation, isolated state previews |
 
 **Legacy migration** — activated during modernization work:
@@ -255,6 +258,7 @@ The skills below are grouped by use case so you can quickly find project standar
 
 | Skill                           | Scope                                                                                  |
 | ------------------------------- | -------------------------------------------------------------------------------------- |
+| `fec-backend-requirements-handoff` | Frontend-to-backend handoff for UI data needs, actions, states, rules, and questions |
 | `fec-doc-sync`                  | Keep frontend docs in sync with code, config, scripts, routes, APIs, env, and deploy facts |
 | `fec-source-driven-development` | Verify version-sensitive frontend decisions against project facts and official sources |
 

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,40 +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-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-typescript-type-safety`     | Type contracts, DTO mapping, type guards, generics, and type-level checks            |
-| `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)
 
@@ -213,17 +265,23 @@ This section is a quick OpenClaw-oriented sample, not the full prompt catalog. F
 | Build an interactive 3D scene              | `fec-canvas-threejs`             | “Add a Three.js product viewer to `src/components/ProductViewer.tsx` with performance and fallback considerations.”                              |
 | Add SVG motion to a landing page           | `fec-svg-animation`              | “Animate the hero SVG with Framer Motion, and ensure reduced-motion users get a static fallback.”                                                |
 | Design and polish UI                       | `fec-ui-design`                  | “Review `src/components/Dashboard.tsx` for UI direction, visual identity, spacing, states, and motion polish.”                                   |
+| Build a recordable web presentation        | `fec-web-video-presentation`     | “Turn this product demo script into a 16:9 browser presentation with script beats, chapter steps, theme tokens, and recording guidance.”          |
 | Optimize Vite build config                 | `fec-vite-project-standard`      | “Audit our `vite.config.ts` for HMR, dev proxy, env variable safety, and library mode best practices.”                                           |
 
 **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