@bovinphang/frontend-craft 2.6.0 → 2.7.0

package/.claude-plugin/marketplace.json

@@ -15,10 +15,10 @@
             "source": {
                 "source": "npm",
                 "package": "@bovinphang/frontend-craft",
-                "version": "2.6.0"
+                "version": "2.7.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.7.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.7.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,43 @@ 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.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 +115,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,42 @@
 
 自 **2.0.0** 起，面向发布的说明以英文 `CHANGELOG.md` 为权威来源；历史条目可能保留最初撰写语言。
 
+## [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 +114,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`        | Diagrams, image generation/editing, visual assets, PNG QA and repair loops     |
+| `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

@@ -143,6 +143,7 @@ frontend-craft/
 | `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                             |
@@ -167,7 +168,7 @@ frontend-craft/
 | `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-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            |
 
@@ -213,6 +214,7 @@ 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/`)**

package/README.openclaw.zh-CN.md

@@ -143,6 +143,7 @@ frontend-craft/
 | `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 传统前端规范                    |
@@ -167,7 +168,7 @@ frontend-craft/
 | `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-web-video-presentation`     | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示     |
 | `fec-dependency-upgrade`         | 依赖升级、lockfile 评审、CVE 修复和迁移验证                    |
 | `fec-vite-project-standard`      | Vite 配置、环境变量安全、HMR、开发代理、构建优化与库模式       |
 
@@ -213,6 +214,7 @@ 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）**

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`        | 图表、图片生成/编辑、视觉资产、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-typescript-reviewer.md

@@ -6,7 +6,7 @@ model: sonnet
 permissionMode: default
 maxTurns: 16
 skills:
-  - fec-typescript-type-safety
+  - fec-typescript-project-standard
   - fec-code-review
   - fec-security-review
   - fec-react-project-standard