@bovinphang/frontend-craft 2.6.0 → 2.7.0

package/skills/eval_queries.json

@@ -68,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 里该怎么存用户偏好",
@@ -224,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 数量",
@@ -290,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 设计稿实现这个页面",
@@ -554,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 下横向溢出，帮我做响应式布局",
@@ -598,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 是否安全",
@@ -686,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 路径描边动画",
@@ -730,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",
@@ -774,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": {
@@ -890,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-backend-requirements-handoff/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: fec-backend-requirements-handoff
+description: Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams without dictating endpoint design, field names, database shape, or implementation details; Chinese triggers include 前后端需求交接, 后端需求, API 需求澄清, 数据需求说明.
+---
+
+# 前后端需求交接
+
+## Purpose
+
+把前端页面和交互所需的数据、动作、状态和疑问整理成后端可讨论的需求说明。
+
+## Procedure
+
+1. 明确功能上下文
+   - 说明页面、流程或组件是什么，面向哪类用户，以及用户完成任务的成功状态。
+   - 如果已有设计稿、路由、用户故事或权限角色，先把它们作为事实来源。
+
+2. 描述前端展示需求
+   - 按屏幕或组件列出需要展示的信息、信息之间的关系、排序/过滤/分页需求和可见性规则。
+   - 使用业务语言描述“需要展示什么”，不要提前规定 endpoint、字段名、DTO、数据库表或响应嵌套结构。
+
+3. 描述用户动作和结果
+   - 列出用户能执行的动作、期望结果、成功反馈、失败反馈和是否需要乐观更新。
+   - 标出幂等性、撤销、确认、危险操作、批量操作或长任务进度等对 UI 有影响的行为。
+
+4. 补齐状态和业务规则
+   - 覆盖 loading、empty、error、partial、permission denied、expired、conflict、offline 和 retrying 等状态。
+   - 记录影响 UI 的权限、生命周期、金额/时区/枚举、校验、可编辑条件和边界规则。
+
+5. 输出讨论文档
+   - 默认写到 `docs/backend-requirements/<feature-name>.md`；若仓库已有需求文档目录，沿用现有位置。
+   - 文档包含 Context、Screens/Components、Data Needs、User Actions、UI States、Business Rules、Uncertainties、Questions for Backend 和 Decision Log。
+   - 若用户只需要聊天回复，可以直接输出同样结构的 Markdown，不创建文件。
+
+## Constraints
+
+- 不替后端规定 URL、HTTP 方法、字段名、数据库 schema、缓存实现或服务拆分。
+- 不把前端猜测写成事实；不确定的业务规则必须进入 Uncertainties 或 Questions。
+- 不忽略错误、空态、权限和部分数据；这些状态决定接口协作质量。
+- 不把内部错误栈、数据库字段或敏感实现细节要求暴露给 UI。
+- 不与 API 集成流程重复：本 skill 描述需求，客户端边界、类型来源和错误映射实现应在后续实现阶段处理。
+
+## Expected Output
+
+产出一份前端视角的后端需求交接说明，清楚描述 UI 需要什么数据和行为、哪些规则仍需确认，以及后续前后端需要共同决定的问题。

package/skills/fec-code-review/SKILL.md

@@ -24,7 +24,7 @@ description: Use when the user asks for general frontend code review, PR review,
 
 | 维度                | 触发条件                                             | 分流边界                             |
 | ------------------- | ---------------------------------------------------- | ------------------------------------ |
-| TypeScript 类型安全 | DTO、泛型、公共类型、类型守卫、`any`、断言           | 深入类型建模交给类型安全专项流程     |
+| TypeScript 工程与类型契约 | DTO、泛型、公共类型、类型守卫、`any`、断言、tsconfig | 深入类型建模和 TS 配置交给 TypeScript 流程 |
 | 状态管理            | 状态归属、全局 store、URL 状态、派生状态、跨页面同步 | 状态选型与迁移交给状态管理专项流程   |
 | 安全                | 用户输入、HTML 渲染、token、上传、第三方脚本         | 漏洞级分析交给安全专项流程           |
 | 无障碍              | 弹窗、菜单、表单、键盘操作、焦点管理                 | WCAG 细查交给无障碍专项流程          |

package/skills/fec-drawio-studio/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: fec-drawio-studio
+description: Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, 可编辑架构图, .drawio, ER 图, UML, 序列图, 自动布局, 形状检索, 代码结构图.
+---
+
+# 可编辑技术图表工作流
+
+## Purpose
+
+生成、校验和导出可继续编辑的 draw.io / diagrams.net 技术图表。
+
+## Procedure
+
+1. 判断图表路线
+   - 需要长期维护在 Markdown 中的简单图，优先 Mermaid。
+   - 需要官方图标、泳道、复杂布局、层/标签/元数据、可编辑 PNG/SVG/PDF 或 `.drawio` 源时，使用本工作流。
+   - 需要快速浏览器打开或分享时，用 [diagram-url.mjs](scripts/diagram-url.mjs) 生成 URL；需要本地可审计交付时，始终保存 `.drawio` 源。
+   - 用户已经有 Mermaid 或 CSV 内容时，可用 `diagram-url.mjs --create --type mermaid|csv` 交给 diagrams.net 导入；需要长期维护或精确形状时，再转成 XML。
+   - 如果当前宿主已经配置 draw.io MCP App/Tool，可把它作为预览或编辑入口；本 skill 不要求安装 MCP server。
+   - 需要照片、海报、视觉概念或位图编辑时，走图片生成路线。
+
+2. 建立图表规格
+   - 明确图表类型、受众、输出格式、节点清单、关系、层级分组和保存位置。
+   - 用户指定 ERD、UML、Sequence、Architecture、ML/DL 或 Flowchart 时，读取 [diagram-patterns.md](references/diagram-patterns.md)。
+   - 需要选择 XML、Mermaid、CSV、容器、层、标签、metadata 或暗色模式策略时，读取 [xml-and-mermaid.md](references/xml-and-mermaid.md)。
+   - 需要特定厂商/云/网络/流程图形状时，运行 [shape-query.mjs](scripts/shape-query.mjs)；需要 AI、数据库或基础设施品牌符号时，运行 [brand-symbols.mjs](scripts/brand-symbols.mjs)。
+
+3. 生成 `.drawio` 源
+   - 小图可手工生成 draw.io XML，保持节点坐标、尺寸和连线清晰。
+   - 超过约 15 个节点、依赖图或代码结构图时，先生成 graph JSON，再用 [layout-graph.mjs](scripts/layout-graph.mjs) 自动布局。
+   - 代码结构图可先用 [scan-js-modules.mjs](scripts/scan-js-modules.mjs)、[scan-ts-modules.mjs](scripts/scan-ts-modules.mjs)、[scan-python-modules.mjs](scripts/scan-python-modules.mjs)、[scan-go-packages.mjs](scripts/scan-go-packages.mjs)、[scan-rust-modules.mjs](scripts/scan-rust-modules.mjs) 或 [scan-python-classes.mjs](scripts/scan-python-classes.mjs) 生成 graph JSON。
+
+4. 校验和预览
+   - 每次生成 `.drawio` 后运行：
+     ```bash
+     node skills/fec-drawio-studio/scripts/diagram-lint.mjs diagram.drawio --format markdown
+     ```
+   - 若本机有 draw.io desktop CLI，导出预览 PNG 时不要嵌入 XML，并控制宽度：
+     ```bash
+     drawio -x -f png --width 2000 -o diagram.png diagram.drawio
+     ```
+   - 若 CLI 不可用，用 [diagram-url.mjs](scripts/diagram-url.mjs) 生成 diagrams.net viewer/editor URL；严格离线或数据驻留敏感时先读取 [data-residency.md](references/data-residency.md)。
+
+5. 交付最终产物
+   - 保存 `.drawio` 源文件和用户需要的 PNG/SVG/PDF/JPG。
+   - 最终 PNG 若使用 draw.io `-e` 嵌入 XML，导出后运行：
+     ```bash
+     node skills/fec-drawio-studio/scripts/png-embed-fix.mjs diagram.drawio.png
+     ```
+   - 报告源文件、导出文件、校验结果和无法自动验证的外部依赖。
+
+## Tool Resources
+
+工具脚本共享 [studio-core.mjs](scripts/studio-core.mjs)。离线查询使用 [shape-index.json.gz](data/shape-index.json.gz) 与 [brand-icons.json](data/brand-icons.json)，样式预设资源包括 [schema.json](styles/schema.json)、[default.json](styles/built-in/default.json)、[corporate.json](styles/built-in/corporate.json) 和 [handdrawn.json](styles/built-in/handdrawn.json)。
+
+## Constraints
+
+- 不把 draw.io 用作普通图片模型；文本密集或结构化图必须保留可编辑源。
+- 不猜测复杂 `shape=mxgraph.*` 样式；优先用形状查询工具获取官方样式。
+- 不为 draw.io 工作流引入 MCP server 运行时依赖；MCP App/Tool 只作为用户环境已有时的可选互操作入口。
+- Mermaid/CSV URL 是导入捷径，不替代 `.drawio` 源文件、lint 和可编辑交付。
+- 不在预览 PNG 中嵌入 XML；嵌入只用于最终交付。
+- Graphviz、draw.io desktop 和联网品牌图标都是可选外部能力；缺失时必须降级而不是反复重试。
+- 品牌图标和第三方形状索引遵循 [THIRD_PARTY_NOTICES.md](data/THIRD_PARTY_NOTICES.md) 中的来源与许可说明。
+- 参考外部 draw.io MCP 生态时，只吸收路线、约束和互操作经验，不复制其服务实现或长篇提示词。
+
+## Expected Output
+
+交付可编辑 `.drawio` 源和所需导出格式，并给出结构校验结果。图表应节点完整、连线可追踪、标签不截断、布局不重叠，外部工具缺失时提供可打开的 diagrams.net fallback。

package/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,10 @@
+# Third Party Notices
+
+This skill includes compact indexes and manifests used to produce editable diagrams.
+
+- `shape-index.json.gz` contains draw.io shape metadata used for local style lookup. Shape names, dimensions and style strings come from the draw.io / diagrams.net shape ecosystem and remain subject to their upstream terms.
+- `brand-icons.json` is a manifest for lobe-icons CDN assets. lobe-icons is MIT licensed; individual logos and names may be trademarks of their respective owners.
+- `brand-symbols.mjs` may reference simple-icons CDN slugs for selected infrastructure and database symbols. simple-icons metadata and icons are available under their upstream license; brand trademarks remain owned by their respective holders.
+- The workflow documents mention optional interoperability with external draw.io MCP App/Tool deployments. Those services are not bundled, vendored or required by this package.
+
+These resources are used only to identify and render diagram symbols. Keep this notice with redistributed packages.