@bovinphang/frontend-craft 2.5.0 → 2.7.0

package/docs/zh-TW/README.md

@@ -8,7 +8,7 @@
 
 [![Stars](https://img.shields.io/github/stars/bovinphang/frontend-craft?style=flat)](https://github.com/bovinphang/frontend-craft/stargazers)
 [![CI](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml/badge.svg)](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml)
-[![npm version](https://img.shields.io/npm/v/frontend-craft)](https://www.npmjs.com/package/frontend-craft)
+[![npm version](https://img.shields.io/npm/v/@bovinphang/frontend-craft)](https://www.npmjs.com/package/@bovinphang/frontend-craft)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
 ![Node](https://img.shields.io/badge/Node.js-22+-5FA04E?logo=node.js&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white)
@@ -32,7 +32,7 @@
 
 各執行時的路徑與注意事項詳見 [`docs/runtimes/`](../runtimes/)。
 
-它將 **13 個專業 agent**、**40 個自動啟用 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 助手寫出的前端程式碼風格不一、缺型別、不安全 | **40 個 skill** 將團隊規範編碼為可自動啟用的工作流                                      |
+| AI 助手寫出的前端程式碼風格不一、缺型別、不安全 | **45 個 skill** 將團隊規範編碼為可自動啟用的工作流                                      |
 | 每款 AI 工具都有自己的插件格式                  | **一條 CLI 指令** 把相同的規則、agent 和 hook 安裝到 15 個執行時                        |
 | 設計稿到程式碼的交接總有資訊損失                | **MCP 整合** 從 Figma、Figma Desktop、Sketch、MasterGo、Pixso、墨刀引入更完整設計上下文 |
 | 程式碼審查隨意、淺層                            | **13 個 agent** 輸出分級報告：程式碼、安全、無障礙、效能、TS、UI 還原度                 |
@@ -53,45 +53,59 @@
 
 需要 **Node.js 22+**。完整支援 **Windows、macOS 和 Linux**（所有鉤子和腳本均使用 Node.js 實作）。
 
-### 方式一：全域 CLI 初始化專案（推薦）
+### 方式一：全域安裝 fec CLI（推薦）
 
 ```bash
-npm install -g frontend-craft@latest
+# 1. 全域安裝 fec 指令
+npm install -g @bovinphang/frontend-craft@latest
+
+# 2. 進入你的前端專案
 cd your-project
-fec init
-fec init codex      # 初始化指定執行時
-fec init claude     # 初始化 Claude Code
-```
 
-`fec init` 是終端機中的 CLI 初始化指令，用來初始化目前專案。在互動式終端機中，不傳 runtime 時會顯示選擇提示；在非互動環境中，不傳 runtime 時 CLI 預設使用 `claude`。`init` 預設安裝到目前專案，除非明確傳入 `--global`，例如 `fec init codex --global`。AI 助手內的 `/fec-init` 斜線指令是另一個入口，需要先把 frontend-craft 安裝到對應執行時後再使用。
+# 3. 互動選擇要接入的 AI 執行時
+fec setup
 
-### 方式二：免全域安裝的互動精靈
+# 4. 接入目前專案
+fec setup codex
+fec setup claude
+fec setup all
 
-```bash
-npx frontend-craft@latest
+# 5. 全域接入，適用於所有專案
+fec setup codex --global
+fec setup claude --global
+fec setup all --global
+
+# 6. 預覽 / 查詢
+fec install --all --dry-run --global
+fec list
 ```
 
-不想全域安裝 `fec` 指令時使用這種方式。精靈會走完整安裝流程：先選擇一個或多個執行時，再決定安裝到全域還是目前專案。
+`npm install -g` 只是安裝 `fec` 終端機指令。`fec setup` 是終端機中的 CLI 專案接入指令，不是 AI 助手內的 `/fec-init` 斜線指令。在互動式終端機中，不帶參數的 `fec setup` 會先讓你選擇 runtime；`fec setup <runtime>` 和 `fec setup all` 會預設接入目前專案。只有傳入 `--global` 時，才會接入對應 AI 工具的全域設定目錄，適用於所有專案。
 
-### 方式三：腳本化安裝
+### 方式二：用 npx 臨時執行（免全域安裝 fec）
 
 ```bash
-# 安裝到目前專案
-npx frontend-craft@latest install --local claude
-
-# 全域安裝到某個執行時
-npx frontend-craft@latest install --global codex
-
-# 預覽所有執行時的安裝內容（不實際寫入）
-npx frontend-craft@latest install --all --dry-run --global
-
-# 列出支援的執行時
-npx frontend-craft@latest list
+# 1. 互動精靈
+npx @bovinphang/frontend-craft@latest
+
+# 2. 接入目前專案
+npx @bovinphang/frontend-craft@latest install --local codex
+npx @bovinphang/frontend-craft@latest install --local claude
+npx @bovinphang/frontend-craft@latest install --all --local
+
+# 3. 全域接入，適用於所有專案
+npx @bovinphang/frontend-craft@latest install --global codex
+npx @bovinphang/frontend-craft@latest install --global claude
+npx @bovinphang/frontend-craft@latest install --all --global
+
+# 4. 預覽 / 查詢
+npx @bovinphang/frontend-craft@latest install --all --dry-run --global
+npx @bovinphang/frontend-craft@latest list
 ```
 
-> **CI / 腳本場景：** 務必帶上 `--global` / `-g` 或 `--local` / `-l`。非 TTY 且未指定時，CLI 預設安裝到 `claude --global`。
+不想全域安裝 `fec` 指令時使用 `npx`。不帶參數會進入互動精靈：先選擇一個或多個執行時，再決定接入全域還是目前專案。腳本化安裝全部 runtime 時使用 `install --all --local` 或 `install --all --global`，不要寫成 `install all`。CI / 腳本場景請務必帶上 `--global` / `-g` 或 `--local` / `-l`；非 TTY 且未指定時，CLI 預設安裝到 `claude --global`。
 
-### 方式四：Claude Code Marketplace
+### 方式三：Claude Code Marketplace
 
 對 Claude Code 用戶，**Claude Code Marketplace** 是推薦的單一來源安裝方式。只有在需要跨執行時安裝、腳本化/離線複製檔案，或非 Marketplace 環境時，才建議對 Claude 使用 CLI。
 
@@ -133,7 +147,7 @@ npx frontend-craft@latest list
 ```text
 你：「合併前請審查我最近的改動。重點看架構、型別安全、渲染行為、樣式、可存取性和缺失測試。」
 你：「先不要寫程式碼，請規劃帳號帳單功能：路由結構、元件邊界、資料流、狀態歸屬、驗證流程和上線風險。」
-你：「請用 React Hook Form + Zod 建構多步註冊表單，包含檔案上傳、條件欄位、非同步驗證和可存取錯誤提示。」
+你：「請建構多步註冊表單：依專案框架選擇表單與 schema 驗證方案，包含檔案上傳、條件欄位、非同步驗證和可存取錯誤提示。」
 你：「請按 Figma 節點 123:456 實作 UI。複用現有 design token 和元件，匹配間距與響應式狀態，並說明假設。」
 你：「`/fec-refactor-clean` 請清理這個模組裡的死程式碼。」
 ```
@@ -155,40 +169,41 @@ npx frontend-craft@latest list
 | `/fec-tdd`            | 紅 → 綠 → 重構的前端 TDD 循環                               | —                                                |
 | `/fec-debug`          | 前端問題診斷與修復：建置失敗、執行時錯誤、UI 異常、介面問題 | `debug-*.md`                                     |
 | `/fec-refactor-clean` | 分類並安全清理死程式碼、未使用匯出、樣式和依賴              | `refactor-clean-*.md`                            |
-| `/fec-doc-sync`       | 同步 README、runtime 文件、能力表和公開 metadata            | —                                                |
+| `/fec-doc-sync`       | 同步 README、docs、環境變數、腳本、API/路由說明和部署文件   | —                                                |
 
 ### 技能（Skills，自動啟用）
 
 技能是根據檔案模式、框架或任務上下文**自動啟用**的工作流定義，編碼了審查維度、輸出約定和報告格式。
 
-下方按使用場景分組列出全部自動啟用的技能，便於快速找到專案規範、實作、測試、審查、設計、遷移和文件維護能力。
+下方按使用場景分組列出全部自動啟用的技能，便於快速找到專案規範、實作、測試、審查、設計、遷移、專案演進和文件維護能力。
 
 **專案規範** — 偵測到對應框架時自動生效：
 
-| 技能                            | 範圍                                                  |
-| ------------------------------- | ----------------------------------------------------- |
-| `fec-react-project-standard`    | React + TypeScript（結構、元件、路由、狀態、API 層）  |
-| `fec-vue3-project-standard`     | Vue 3 + TypeScript（結構、元件、路由、Pinia、API 層） |
-| `fec-nextjs-project-standard`   | Next.js 14+ App Router、SSR/SSG、流式渲染、元資料     |
-| `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG、組合式 API、資料獲取、中介軟體        |
-| `fec-vite-project-standard`     | Vite 設定、環境變數安全、HMR、開發代理、建置最佳化    |
-| `fec-monorepo-project-standard` | pnpm workspace、Turborepo、Nx 結構與任務編排          |
+| 技能                              | 範圍                                                  |
+| --------------------------------- | ----------------------------------------------------- |
+| `fec-react-project-standard`      | React + TypeScript（結構、元件、路由、狀態、API 層）  |
+| `fec-vue3-project-standard`       | Vue 3 + TypeScript（結構、元件、路由、Pinia、API 層） |
+| `fec-nextjs-project-standard`     | Next.js 14+ App Router、SSR/SSG、流式渲染、元資料     |
+| `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 和泛型         |
 
 **實作能力** — 建構特定前端能力時啟用：
 
 | 技能                      | 範圍                                                       |
 | ------------------------- | ---------------------------------------------------------- |
-| `fec-data-fetching`       | TanStack Query / 服務端狀態獲取、快取、樂觀更新            |
+| `fec-data-fetching`       | 服務端狀態獲取、快取、失效、SSR、無限載入                  |
 | `fec-api-integration`     | 型別化 API client、鑑權刷新、上傳、即時整合                |
 | `fec-state-management`    | 狀態歸屬、store 選型、URL 狀態、伺服器/表單/本地狀態邊界   |
-| `fec-form-handling`       | React Hook Form + Zod、動態欄位、上傳、多步流程            |
+| `fec-form-handling`       | 跨框架表單選型、schema 驗證、動態欄位、上傳                |
 | `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies 選型   |
 | `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt 的登入態與權限路由 |
 | `fec-pwa-implementation`  | 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` | react-window / TanStack Virtual 大清單虛擬滾動             |
+| `fec-list-virtualization` | 依框架選型的大清單虛擬滾動、測量、網格和無限滾動           |
 
 **測試** — 規劃或撰寫前端測試覆蓋時啟用：
 
@@ -204,7 +219,7 @@ npx frontend-craft@latest list
 | 技能                           | 範圍                                                    |
 | ------------------------------ | ------------------------------------------------------- |
 | `fec-code-review`              | 架構、型別、渲染、樣式、可存取性審查                    |
-| `fec-typescript-type-safety`   | 型別契約、DTO 對映、型別守衛、泛型和型別級檢查          |
+| `fec-debug-framework`          | 系統化診斷建置、執行時、UI 和 API/資料問題              |
 | `fec-security-review`          | XSS、CSRF、敏感資料外洩、輸入驗證                       |
 | `fec-accessibility-check`      | WCAG 2.2、鍵盤、焦點、觸控和螢幕閱讀器行為              |
 | `fec-dependency-upgrade`       | 依賴升級、lockfile 審查、CVE 修復和遷移驗證             |
@@ -214,28 +229,38 @@ npx frontend-craft@latest list
 
 **設計 UI** — 設計實作、設計系統或視覺打磨時啟用：
 
-| 技能                          | 範圍                                                         |
-| ----------------------------- | ------------------------------------------------------------ |
-| `fec-ui-design`               | UI 方向、視覺識別、界面打磨、狀態、視覺 QA                   |
-| `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-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`   | 基於設計工具、截圖或分區級視覺參考實現 UI                                                        |
+| `fec-storybook-component-doc` | Storybook 元件文件、設計系統呈現、隔離狀態預覽                                                   |
 
 **遺留遷移** — 現代化遷移時啟用：
 
 | 技能                             | 範圍                                           |
 | -------------------------------- | ---------------------------------------------- |
 | `fec-legacy-web-standard`        | JS + jQuery + HTML 傳統專案的開發與維護規範    |
-| `fec-legacy-to-modern-migration` | jQuery/MPA → React/Vue 3 + TS 策略與分階段流程 |
+| `fec-legacy-to-modern-migration` | 遺留前端現代化、目標技術棧識別與分階段遷移流程 |
+
+**專案演進** — 吸收參考系統並原創化落到目前專案時啟用：
+
+| 技能          | 範圍                                       |
+| ------------- | ------------------------------------------ |
+| `fec-alchemy` | 將參考系統能力原創化吸收到目前專案原生體系 |
 
 **文件維護** — 文件維護時啟用：
 
-| 技能                            | 範圍                                       |
-| ------------------------------- | ------------------------------------------ |
-| `fec-doc-sync`                  | 讓公開文件與腳本、技能、代理、指令保持同步 |
-| `fec-source-driven-development` | 以專案事實和官方來源驗證版本敏感的前端決策 |
+| 技能                               | 範圍                                                                  |
+| ---------------------------------- | --------------------------------------------------------------------- |
+| `fec-backend-requirements-handoff` | 前端向後端交接 UI 資料需求、使用者動作、狀態、業務規則與待確認問題    |
+| `fec-doc-sync`                     | 讓前端文件與程式碼、設定、腳本、路由、API、環境變數和部署事實保持同步 |
+| `fec-source-driven-development`    | 以專案事實和官方來源驗證版本敏感的前端決策                            |
 
 ### 代理（Agents）
 
@@ -365,11 +390,12 @@ $env:MODAO_TOKEN = "your-modao-token"
 每一次審查、分析和評估都會輸出帶時間戳記的 Markdown 報告到 `reports/`，可作為稽核記錄和 PR 交付物。
 
 <details>
-<summary>查看全部 15 種報告類型</summary>
+<summary>查看全部 16 種報告類型</summary>
 
 | 報告類型       | 檔名模式                                     | 來源                                                                |
 | -------------- | -------------------------------------------- | ------------------------------------------------------------------- |
 | 程式碼審查     | `code-review-YYYY-MM-DD-HHmmss.md`           | `/fec-review`、`fec-code-review`、`fec-code-reviewer`               |
+| 除錯診斷       | `debug-YYYY-MM-DD-HHmmss.md`                 | `/fec-debug`、`fec-debug-framework`、`fec-debugger`                 |
 | TS/JS 專項審查 | `typescript-review-YYYY-MM-DD-HHmmss.md`     | `fec-typescript-reviewer`                                           |
 | 安全審查       | `security-review-YYYY-MM-DD-HHmmss.md`       | `fec-security-review`、`fec-security-reviewer`                      |
 | 無障礙檢查     | `accessibility-review-YYYY-MM-DD-HHmmss.md`  | `fec-accessibility-check`                                           |
@@ -393,7 +419,7 @@ $env:MODAO_TOKEN = "your-modao-token"
 
 ## 更新與移除
 
-`fec` 是 `frontend-craft` 的短命令。如果沒有全域安裝 `fec`，可以把同樣參數接在 `npx frontend-craft@latest` 後使用，例如 `npx frontend-craft@latest update`。
+`fec` 是 `frontend-craft` 的短命令。如果沒有全域安裝 `fec`，可以把同樣參數接在 `npx @bovinphang/frontend-craft@latest` 後使用，例如 `npx @bovinphang/frontend-craft@latest update`。
 
 ### 更新
 
@@ -435,10 +461,10 @@ npx skills update                          # 更新至最新版本
 npx skills check                           # 預覽可用更新
 ```
 
-| CLI                  | 安裝內容                                      |
-| -------------------- | --------------------------------------------- |
-| `npx frontend-craft` | 技能 + 執行時專屬代理、指令、鉤子、規則、範本 |
-| `npx skills`         | 僅技能（適用於已有 Skills CLI 工作流）        |
+| CLI                              | 安裝內容                                      |
+| -------------------------------- | --------------------------------------------- |
+| `npx @bovinphang/frontend-craft` | 技能 + 執行時專屬代理、指令、鉤子、規則、範本 |
+| `npx skills`                     | 僅技能（適用於已有 Skills CLI 工作流）        |
 
 關閉遙測：`DISABLE_TELEMETRY=1`。詳見 [skills.sh CLI 文件](https://skills.sh/docs/cli)。
 

package/openclaw.plugin.json

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

package/package.json

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

package/skills/eval_queries.json

@@ -21,6 +21,31 @@
       "把 jQuery 项目迁移到 Vue"
     ]
   },
+  "fec-alchemy": {
+    "should_trigger": [
+      "分析这个参考仓库，把有价值的能力原创化吸收到当前项目",
+      "对比这个插件和我们的项目，提炼可以融合的架构思路",
+      "不要复制代码，帮我借鉴另一个项目的 commands 和 hooks",
+      "把这个开源项目的工作流改造成适合 frontend-craft 的 skill",
+      "研究相似产品的实现方式，并给当前仓库制定吸收计划",
+      "将参考项目里的优秀工程实践迁移成我们自己的方案",
+      "做一次项目吸收分析，区分可借鉴能力和不该引入的部分",
+      "originally absorb ideas from a reference repo into this project",
+      "参考后端项目的鉴权和可观测性设计，提炼适合当前服务的吸收方案",
+      "把另一个 CLI 工具的配置和错误输出体验原创化改造成我们的方案",
+      "对比这个库项目的公开 API 和版本策略，判断哪些能力适合吸收"
+    ],
+    "should_not_trigger": [
+      "修复这个组件的 TypeScript 类型错误",
+      "给 Button 写 React Testing Library 单测",
+      "只同步 README 里的 skill 数量",
+      "审查 dangerouslySetInnerHTML 的 XSS 风险",
+      "把 Vite 从 5 升级到 6",
+      "优化虚拟列表滚动卡顿",
+      "按 Figma 设计稿实现页面",
+      "配置 PWA manifest 和 Service Worker"
+    ]
+  },
   "fec-api-integration": {
     "should_trigger": [
       "设计前端 typed API client",
@@ -43,6 +68,29 @@
       "PWA Service Worker 缓存接口"
     ]
   },
+  "fec-backend-requirements-handoff": {
+    "should_trigger": [
+      "帮我把这个页面的数据需求整理给后端",
+      "写一份前端视角的后端需求交接文档",
+      "这个 dashboard 需要哪些后端数据，帮我列给 API 团队",
+      "不要设计接口，只描述 UI 需要展示什么和能做什么",
+      "前后端联调前先梳理用户动作、空态和错误态",
+      "把订单详情页的权限和业务规则问题整理成后端问题清单",
+      "frontend-to-backend requirements handoff for this feature",
+      "document backend data needs for the checkout UI",
+      "我需要向后端说明这个列表页的筛选、分页和状态需求"
+    ],
+    "should_not_trigger": [
+      "实现 typed API client 和错误映射",
+      "给接口封装 refresh token 队列",
+      "设计数据库表结构和索引",
+      "写后端 controller 和 service",
+      "修复 React 组件里的 loading 状态",
+      "做一次完整代码审查",
+      "同步 README 里的脚本说明",
+      "配置 Vite dev server proxy"
+    ]
+  },
   "fec-browser-storage": {
     "should_trigger": [
       "localStorage 里该怎么存用户偏好",
@@ -199,6 +247,32 @@
       "实现 API client 错误映射"
     ]
   },
+  "fec-drawio-studio": {
+    "should_trigger": [
+      "生成一个可编辑的 draw.io 架构图并导出 PNG",
+      "把这个微服务系统画成 .drawio 文件",
+      "用 diagrams.net 做 ER 图，要求后续能编辑",
+      "查一下 AWS Lambda 在 draw.io 里的官方 shape style",
+      "给这个 TypeScript 项目生成模块依赖图并自动布局",
+      "生成 UML 类图并用 draw.io CLI 导出 SVG",
+      "draw.io 自动布局一个超过 20 个节点的服务拓扑",
+      "用 Graphviz 布局后生成 diagrams.net 编辑链接",
+      "制作可编辑序列图并检查 .drawio 是否有断边",
+      "create an editable drawio architecture diagram with official cloud shapes"
+    ],
+    "should_not_trigger": [
+      "生成一张产品宣传海报图片",
+      "编辑这张照片并替换背景",
+      "实现 Three.js 交互式 3D 拓扑图",
+      "给 SVG logo 加路径描边动画",
+      "只写 Mermaid 到 README 中",
+      "按 Figma 设计稿实现页面",
+      "检查 dashboard 的按钮 hover 状态",
+      "用 Playwright 截图做视觉回归",
+      "优化 Canvas 粒子动画性能",
+      "生成漫画头像和品牌板"
+    ]
+  },
   "fec-doc-sync": {
     "should_trigger": [
       "同步 README 中的 skill 和 agent 数量",
@@ -265,6 +339,31 @@
       "Vue 组件架构设计"
     ]
   },
+  "fec-image-generation": {
+    "should_trigger": [
+      "帮我生成一张技术架构图并导出 PNG，还要检查标签有没有重叠",
+      "生成 ER 图、UML 类图和序列图的可编辑源与图片",
+      "给这个产品做一组海报和品牌板视觉探索",
+      "请生成一个 UI 样机图并自检导出的 PNG 是否裁切",
+      "把这张图片做编辑工作流，保留主体但替换背景",
+      "制作 ML 模型结构图，标清 tensor shape 并避免连线堆叠",
+      "生成信息图和学术图，导出后自动修复标签截断",
+      "为这个故事生成漫画分镜和头像资产",
+      "run PNG QA on this generated architecture diagram",
+      "image generation workflow for posters, product shots, and mockups"
+    ],
+    "should_not_trigger": [
+      "只打磨现有 dashboard 的间距和 hover 状态",
+      "按 Figma 像素还原页面",
+      "实现 Three.js 交互式 3D 场景",
+      "给 SVG 图标加 reduced-motion 动画",
+      "检查按钮 aria-label 和键盘焦点",
+      "修复 React Query 缓存失效",
+      "写 Playwright 登录 E2E",
+      "配置 Tailwind token 和 dark mode",
+      "优化虚拟列表滚动性能"
+    ]
+  },
   "fec-implement-from-design": {
     "should_trigger": [
       "按 Figma 设计稿实现这个页面",
@@ -529,28 +628,6 @@
       "迁移 jQuery 到 React"
     ]
   },
-  "fec-route-protection": {
-    "should_trigger": [
-      "实现未登录跳转登录页",
-      "RBAC 权限路由怎么设计",
-      "React Router 私有路由守卫",
-      "Next middleware 鉴权和 redirect",
-      "Vue Router beforeEach 权限判断",
-      "Nuxt route middleware 登录态",
-      "防止 open redirect",
-      "route guard with roles"
-    ],
-    "should_not_trigger": [
-      "审查 token 是否安全存储",
-      "设计 React 项目结构",
-      "配置 TanStack Query",
-      "写 E2E 登录流程",
-      "表单校验",
-      "PWA 离线缓存",
-      "普通菜单键盘可访问性",
-      "jQuery 迁移"
-    ]
-  },
   "fec-responsive-layout": {
     "should_trigger": [
       "这个页面 375px 下横向溢出，帮我做响应式布局",
@@ -573,6 +650,28 @@
       "升级依赖版本"
     ]
   },
+  "fec-route-protection": {
+    "should_trigger": [
+      "实现未登录跳转登录页",
+      "RBAC 权限路由怎么设计",
+      "React Router 私有路由守卫",
+      "Next middleware 鉴权和 redirect",
+      "Vue Router beforeEach 权限判断",
+      "Nuxt route middleware 登录态",
+      "防止 open redirect",
+      "route guard with roles"
+    ],
+    "should_not_trigger": [
+      "审查 token 是否安全存储",
+      "设计 React 项目结构",
+      "配置 TanStack Query",
+      "写 E2E 登录流程",
+      "表单校验",
+      "PWA 离线缓存",
+      "普通菜单键盘可访问性",
+      "jQuery 迁移"
+    ]
+  },
   "fec-security-review": {
     "should_trigger": [
       "检查 dangerouslySetInnerHTML 是否安全",
@@ -661,28 +760,6 @@
       "jQuery 迁移"
     ]
   },
-  "fec-tailwind-design-system": {
-    "should_trigger": [
-      "设计 Tailwind token 和 theme.extend",
-      "这个组件库的 class 太散，想整理成 variants",
-      "Tailwind 暗色模式怎么和 CSS 变量对齐",
-      "检查动态 class 是否会被 purge 掉",
-      "用 CVA 设计 Button 的 size 和 tone",
-      "Tailwind safelist 应该怎么治理",
-      "build a Tailwind design system for this app",
-      "把硬编码颜色迁移到 Tailwind 语义 token"
-    ],
-    "should_not_trigger": [
-      "纯 CSS Grid 响应式布局溢出",
-      "按 Figma 像素还原页面",
-      "写组件 RTL 单测",
-      "审查接口 401 错误映射",
-      "修复 TypeScript 类型错误",
-      "配置路由权限守卫",
-      "升级 npm 依赖",
-      "做通用前端 PR review"
-    ]
-  },
   "fec-svg-animation": {
     "should_trigger": [
       "SVG 路径描边动画",
@@ -705,6 +782,28 @@
       "虚拟列表性能"
     ]
   },
+  "fec-tailwind-design-system": {
+    "should_trigger": [
+      "设计 Tailwind token 和 theme.extend",
+      "这个组件库的 class 太散，想整理成 variants",
+      "Tailwind 暗色模式怎么和 CSS 变量对齐",
+      "检查动态 class 是否会被 purge 掉",
+      "用 CVA 设计 Button 的 size 和 tone",
+      "Tailwind safelist 应该怎么治理",
+      "build a Tailwind design system for this app",
+      "把硬编码颜色迁移到 Tailwind 语义 token"
+    ],
+    "should_not_trigger": [
+      "纯 CSS Grid 响应式布局溢出",
+      "按 Figma 像素还原页面",
+      "写组件 RTL 单测",
+      "审查接口 401 错误映射",
+      "修复 TypeScript 类型错误",
+      "配置路由权限守卫",
+      "升级 npm 依赖",
+      "做通用前端 PR review"
+    ]
+  },
   "fec-tdd-workflow": {
     "should_trigger": [
       "用 TDD 实现这个 hook",
@@ -749,26 +848,28 @@
       "优化虚拟列表滚动性能"
     ]
   },
-  "fec-typescript-type-safety": {
+  "fec-typescript-project-standard": {
     "should_trigger": [
+      "TypeScript 项目 tsconfig strict 怎么配置",
       "审查这些 DTO 和 view model 类型边界",
       "这个泛型组件类型怎么设计更安全",
       "用 type guard 收窄 unknown 输入",
-      "检查不安全的 as 和非空断言",
       "设计判别联合表达异步状态",
-      "给公共 utility type 加类型测试",
       "TypeScript 类型建模和泛型约束 review",
-      "API 响应类型和运行时校验怎么对齐"
+      "TS SDK 的 package exports 和 d.ts 怎么发布",
+      "monorepo package 的 project references 怎么配置",
+      "public API 类型和声明文件一致性怎么检查",
+      "Node CLI 的 moduleResolution 和类型声明怎么设"
     ],
     "should_not_trigger": [
-      "做整个前端 PR 综合评审",
-      "只修复 tsc 编译失败",
-      "写 React 组件 UI",
-      "检查按钮键盘焦点",
-      "配置 Vite env 变量",
-      "写 Playwright E2E",
-      "选择全局 store 方案",
-      "审查 CSP 和 XSS"
+      "React 项目组件目录怎么分层",
+      "Vue composable 和 Pinia store 怎么组织",
+      "Vite dev server proxy 怎么配置",
+      "TanStack Query queryKey 怎么设计",
+      "表单校验错误怎么展示",
+      "检查弹窗键盘焦点和 aria",
+      "写 Playwright 登录流程",
+      "优化虚拟列表滚动性能"
     ]
   },
   "fec-ui-design": {
@@ -865,6 +966,28 @@
       "XSS 安全审查"
     ]
   },
+  "fec-web-video-presentation": {
+    "should_trigger": [
+      "把这篇文章做成可以录屏的 16:9 网页视频演示",
+      "我有一段口播稿，帮我规划成点击推进的动态网页 presentation",
+      "为这个产品 demo 做一个 step-driven browser recording deck",
+      "把课程大纲转成像视频一样播放的 React 演示页面",
+      "生成网页视频脚手架，支持主题 token 和录屏",
+      "把技术分享拆成 script、outline 和可录制章节",
+      "做一个每次按空格推进一个口播节拍的 16:9 演示",
+      "create a recordable web video presentation from this talk script"
+    ],
+    "should_not_trigger": [
+      "普通 landing page 视觉打磨",
+      "从 Figma 节点实现一个按钮组件",
+      "生成一张系统架构图 PNG",
+      "修复 Vite 构建错误",
+      "给 React 表单写组件测试",
+      "检查 dashboard 的 WCAG 对比度",
+      "把 jQuery 页面迁移到 Vue",
+      "规划 API 鉴权刷新流程"
+    ]
+  },
   "fec-web-workers": {
     "should_trigger": [
       "大 JSON 解析阻塞主线程",

package/skills/fec-accessibility-check/SKILL.md

@@ -20,7 +20,7 @@ description: Use when reviewing or improving frontend accessibility, semantic st
 7. 复核 WCAG 2.2 新增高频风险：可见焦点不被遮挡、拖拽操作有替代路径、目标尺寸过小、帮助入口和认证流程不依赖记忆负担。
 8. 输出分级报告；报告格式见 [references/report-template.md](references/report-template.md)。
 
-## Detailed References
+## 详细参考
 
 撰写无障碍审查报告时，加载 [references/report-template.md](references/report-template.md)。需要验证屏幕阅读器公告、焦点读法和动态区域时，加载 [references/screen-reader-testing.md](references/screen-reader-testing.md)。