@bovinphang/frontend-craft 2.6.0 → 2.8.0

package/skills/fec-dependency-upgrade/SKILL.md

@@ -1,34 +1,34 @@
 ---
 name: fec-dependency-upgrade
-description: Use when planning, implementing, or reviewing frontend dependency upgrades, package migrations, lockfile changes, major framework version bumps, CVE remediation, peer dependency conflicts, ESM/CJS shifts, build-tool compatibility, or CI verification matrices; Chinese triggers include 依赖升级, 版本升级, lockfile, peer dependency, CVE 修复, 大版本迁移.
+description: Use when planning, implementing, or reviewing frontend dependency upgrades, package migrations, lockfile changes, major framework version bumps, CVE remediation, peer dependency conflicts, ESM/CJS shifts, build-tool compatibility, or CI verification matrices; Chinese triggers include dependency upgrades, version upgrades, lockfile, peer dependency, CVE fixes, major version migrations.
 ---
 
-# 依赖升级
+# Dependency upgrade
 
-适用于前端依赖升级、漏洞修复、大版本迁移和 lockfile 风险评审。需要具体流程和检查清单时加载 [references/dependency-upgrade-workflow.md](references/dependency-upgrade-workflow.md)。
+Suitable for front-end dependency upgrades, bug fixes, major version migrations and lockfile risk reviews. Load [references/dependency-upgrade-workflow.md](references/dependency-upgrade-workflow.md) when you need specific processes and checklists.
 
 ## Purpose
 
-用来源驱动和小批验证的方式升级依赖，降低破坏性变更、供应链风险和 CI 回归。
+Reduce disruptive changes, supply chain risks, and CI regressions by upgrading dependencies in a provenance-driven and small-batch verification manner.
 
 ## Procedure
 
-1. 建立事实基线：读取 package manager、lockfile、Node 版本、workspace 范围、CI 命令和当前验证状态。
-2. 分类升级目标：安全修复、补丁升级、小版本升级、大版本迁移、框架迁移、构建工具迁移或依赖清理。
-3. 查证来源：对版本敏感的库读取官方 release notes、migration guide、peer dependency、Node/browser 支持和弃用项。
-4. 拆小批次：安全补丁可集中处理；大版本、构建工具、框架和测试工具必须单独批次验证。
-5. 处理兼容边界：检查 ESM/CJS、TypeScript 类型、CSS 处理、SSR/RSC、插件 API、peer dependency 和 polyfill 变化。
-6. 运行验证矩阵：至少覆盖 install、typecheck、unit/component tests、build；关键应用补 E2E、Storybook 或手工冒烟。
-7. 同步文档：记录升级原因、版本、破坏性变更、迁移命令、回滚方式和仍需人工验证的路径。
+1. Establish a baseline of truth: Read package manager, lockfile, Node version, workspace scope, CI commands, and current verification status.
+2. Classified upgrade goals: security fixes, patch upgrades, minor version upgrades, major version migrations, framework migrations, build tool migrations, or dependency cleanup.
+3. Verify sources: For version-sensitive libraries, read official release notes, migration guide, peer dependency, Node/browser support and deprecation items.
+4. Split into smaller batches: Security patches can be processed centrally; large versions, build tools, frameworks and testing tools must be verified in separate batches.
+5. Address compatibility boundaries: Check for ESM/CJS, TypeScript types, CSS handling, SSR/RSC, plugin APIs, peer dependencies, and polyfill changes.
+6. Run the verification matrix: at least cover install, typecheck, unit/component tests, and build; for key applications, add E2E, Storybook, or manual smoke.
+7. Synchronization documentation: Record upgrade reasons, versions, destructive changes, migration commands, rollback methods, and paths that still require manual verification.
 
 ## Constraints
 
-- 不在缺少来源和验证的情况下进行大版本连跳。
-- 不为了消除 audit 警告盲目升级运行时关键包；先判断可利用路径和修复影响。
-- 不手工编辑 lockfile 规避依赖冲突。
-- 不把依赖升级和无关重构混在一个批次。
-- 不移除 peer dependency 或构建插件，除非有证据证明没有被运行时、子包或 CI 使用。
+- No more big version jumps without source and verification.
+- Do not blindly upgrade critical runtime packages to eliminate audit warnings; first determine the exploitable paths and repair the impact.
+- Avoid manual editing of lockfile to avoid dependency conflicts.
+- Do not mix dependency upgrades and unrelated refactorings in one batch.
+- Do not remove peer dependencies or build plugins unless proven not to be used by runtimes, subpackages or CIs.
 
 ## Expected Output
 
-输出升级清单、风险分类、来源依据、批次策略、修改范围、验证命令、失败处理和回滚建议。完成后 lockfile 与 package 清单一致，关键验证通过，破坏性变更有记录。
+Output upgrade list, risk classification, source basis, batch strategy, modification scope, verification command, failure handling and rollback suggestions. After completion, the lockfile is consistent with the package manifest, key verification is passed, and destructive changes are recorded.

package/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md

@@ -1,48 +1,48 @@
-# 依赖升级工作流
+# Dependency upgrade workflow
 
-## 升级类型
+##Upgrade type
 
-| 类型 | 示例 | 验证 |
+| Type | Example | Validation |
 | ---- | ---- | ---- |
-| 安全补丁 | 传递依赖 CVE、patch 版本 | 安装、audit、目标测试 |
-| 小版本升级 | 兼容性功能版本 | typecheck、测试、构建 |
-| 大版本迁移 | React/Vue/Next/Vite/Storybook 大版本 | 迁移指南、完整验证矩阵 |
-| 工具链切换 | ESLint、TypeScript、bundler、test runner | 配置 diff、CI 对齐、样例失败 |
-| 清理 | 移除未使用包 | 引用搜索、构建、测试 |
+| Security patches | Transitive dependencies CVE, patch version | Installation, audit, target testing |
+| Minor version upgrade | Compatibility feature version | typecheck, test, build |
+| Large version migration | React/Vue/Next/Vite/Storybook large version | Migration guide, complete verification matrix |
+| Tool chain switching | ESLint, TypeScript, bundler, test runner | Configuration diff, CI alignment, sample failure |
+| Cleanup | Remove unused packages | Reference search, build, test |
 
-## 来源检查清单
+## Source Checklist
 
-- 官方 release notes 或 migration guide。
-- 包管理器兼容性和 lockfile 格式。
-- Node 版本和浏览器支持范围。
-- Peer dependency 版本范围。
-- ESM/CJS 导出变化。
-- TypeScript 最低版本和类型变化。
-- SSR、RSC、edge runtime 或 browser-only 约束。
+-Official release notes or migration guide.
+- Package manager compatibility and lockfile format.
+- Node version and browser support range.
+- Peer dependency version range.
+- ESM/CJS export changes.
+- TypeScript minimum version and type changes.
+- SSR, RSC, edge runtime or browser-only constraints.
 
-## 分批策略
+## Batch strategy
 
-- 框架大版本升级与样式、测试、lint 升级分开处理。
-- 当 peer 版本范围要求时，adapter 与宿主工具放在同一批升级。
-- Monorepo 中要验证受影响包，并至少验证一个消费这些包的应用。
-- 每个成功批次都记录通过的命令，必要时单独提交或单独报告。
+- Major version upgrades of the framework are handled separately from style, test, and lint upgrades.
+- When required by the peer version range, the adapter is upgraded in the same batch as the host tool.
+- Verify affected packages in Monorepo and at least one application consuming these packages.
+- Passed commands are logged for each successful batch and submitted or reported individually if necessary.
 
-## 失败分诊
+## Failed Triage
 
-1. 复现最小失败命令。
-2. 判断失败属于配置、类型表面、运行时行为还是 peer dependency。
-3. 优先采用官方迁移步骤，而不是本地临时 hack。
-4. 如果某个包阻塞当前批次，先 pin 住并记录原因；只有剩余批次仍然自洽时才继续。
+1. Reproduce the minimum failed command.
+2. Determine whether the failure belongs to configuration, type surface, runtime behavior, or peer dependency.
+3. Prioritize official migration steps over local temporary hacks.
+4. If a packet blocks the current batch, pin it first and record the reason; continue only when the remaining batches are still self-consistent.
 
-## 报告模板
+## Report template
 
 ```markdown
-## 依赖升级摘要
+## Dependency upgrade summary
 
-| 包 | 从 | 到 | 原因 | 风险 | 依据 |
+| package | from | to | reason | risk | basis |
 | -- | -- | -- | ---- | ---- | ---- |
 
-## 验证
+## Verify
 
 - install:
 - typecheck:
@@ -50,7 +50,7 @@
 - build:
 - e2e/storybook/manual:
 
-## 剩余风险
+## Residual risk
 
 - ...
 ```

package/skills/fec-doc-sync/SKILL.md

@@ -1,39 +1,39 @@
 ---
 name: fec-doc-sync
-description: Use when synchronizing frontend project documentation with source-of-truth files such as package.json, lockfiles, config, env examples, routes, API clients or server routes, schemas, components, tests, CI, build/deploy config, ADRs, changelogs, or migration notes. Do not use for general prose polishing only; Chinese triggers include 文档同步, 更新 README, docs sync, 环境变量文档, 命令清单, API 文档同步.
+description: Use when synchronizing frontend project documentation with source-of-truth files such as package.json, lockfiles, config, env examples, routes, API clients or server routes, schemas, components, tests, CI, build/deploy config, ADRs, changelogs, or migration notes. Do not use for general prose polishing only; Chinese triggers include document synchronization, update README, docs sync, environment variable documentation, command list, API Document synchronization.
 ---
 
-# 文档同步
+# Document synchronization
 
 ## Purpose
 
-从代码、配置、测试、类型、脚本和运行时模板同步前端项目文档，避免 README、docs、环境变量说明、API/路由说明、架构决策和迁移说明与实际项目行为漂移。
+Synchronize front-end project documentation from code, configuration, tests, types, scripts and runtime templates to avoid README, docs, environment variable descriptions, API/routing descriptions, architectural decisions and migration notes from drifting from actual project behavior.
 
 ## Procedure
 
-1. 识别项目栈、文档入口和本次需要同步的范围；README 同步必须扫描根目录 `README*`、`docs/*/README*`、包、应用、部署或运行时相关 README，并排除 `node_modules`、构建产物和第三方依赖目录。
-2. 收集事实来源：`package.json`、lockfile、框架和构建配置、`.env.example`、路由、API clients 或 server routes、types/schemas、组件、测试、CI、build/deploy config。
-3. 比对 README、docs、ADR、changelog、example prompts、setup/deploy/env docs 中的命令、环境变量、路由、API 行为、部署步骤和支持矩阵。
-4. 只更新稳定的公共约定；不要把临时调试结论、一次性报告或未落地设计写入长期文档。
-5. 若仓库已有多语言文档或国际化 README，主 README 的公共事实更新后必须检查其它语言 README 是否需要同步；功能名称、命令名、脚本名、包名、组件/API 名称、报告文件名、路径、环境变量、路由/API 名称、版本约束和支持矩阵必须跨语言一致。
-6. 产品文案可保持本地化表达，但不得保留旧事实、旧默认推荐或过期示例；无法高质量翻译时，至少同步关键事实，并在输出中标出人工翻译风险。
-7. 当项目暴露插件、SDK、CLI、组件库、模板或集成能力时，同步对应的功能清单、集成说明、命令/脚本说明、公开 metadata、示例提示词或示例用法。
-8. 运行相关文档一致性、旧口径搜索、报告格式一致性、类型检查、测试、构建或打包检查。
+1. Identify the project stack, document entry and the scope that needs to be synchronized this time; README synchronization must scan the root directory `README*`, `docs/*/README*`, package, application, deployment or runtime related README, and exclude `node_modules`, build products and third-party dependency directories.
+2. Gather sources of truth: `package.json`, lockfile, framework and build configurations, `.env.example`, routes, API clients or server routes, types/schemas, components, tests, CI, build/deploy config.
+3. Compare commands, environment variables, routes, API behaviors, deployment steps and support matrix in README, docs, ADR, changelog, example prompts, setup/deploy/env docs.
+4. Only update stable public conventions; do not write temporary debugging conclusions, one-time reports or unimplemented designs into long-term documents.
+5. If the warehouse already has multilingual documents or internationalized README, after updating the public facts of the main README, you must check whether other language READMEs need to be synchronized; function names, command names, script names, package names, component/API names, report file names, paths, environment variables, routing/API names, version constraints, and support matrices must be consistent across languages.
+6. Product copy can maintain localized expression, but must not retain old facts, old default recommendations, or expired examples; when high-quality translation is not possible, at least synchronize key facts, and mark the risks of manual translation in the output.
+7. When the project exposes plug-ins, SDKs, CLIs, component libraries, templates or integration capabilities, synchronize the corresponding function list, integration instructions, command/script instructions, public metadata, example prompt words or example usage.
+8. Run relevant documentation consistency, legacy searches, report format consistency, type checks, testing, build or packaging checks.
 
 ## Constraints
 
-- 不把 README 变成完整实现细节；公开文档保留高信号摘要。
-- 不引入与事实来源不一致的命令、路径、环境变量、API 行为或能力名称。
-- 不把未确认的 TODO、草案或实验能力写成已支持行为。
-- 不修改用户项目私有文档，除非用户明确指定。
-- 多语言文档若无法完整翻译，至少保持命令名、环境变量、路由/API 名称、版本约束和报告格式一致。
-- 不把国际化 README 同步简化成只改主 README；公共事实、功能清单、报告清单、命令/脚本说明和示例用法必须检查所有语言入口。
-- 不把 ADR 当作长篇复盘；只记录背景、决策、取舍、影响范围、验证和回滚线索。
+- Do not turn README into complete implementation details; public documentation retains high-signal summaries.
+- Do not introduce command, path, environment variable, API behavior, or capability names that are inconsistent with the source of truth.
+- Do not write unconfirmed TODOs, drafts, or experimental capabilities as supported behavior.
+- Do not modify user project private documents unless explicitly specified by the user.
+- If multi-language documents cannot be fully translated, at least keep the command names, environment variables, route/API names, version constraints and report formats consistent.
+- Do not reduce internationalized README synchronization to just the main README; public facts, feature lists, report lists, command/script descriptions, and example usage must check all language entries.
+- Do not treat ADR as a long review; only record the background, decisions, trade-offs, scope of impact, verification and rollback clues.
 
 ## Expected Output
 
-- 列出已同步的 README/docs/ADR/changelog/env/setup/deploy 文档。
-- 列出已检查的 README/docs 入口，并说明哪些语言文件已同步、哪些无需同步、哪些需要人工确认。
-- 总结使用的事实来源、更新范围、验证命令和未覆盖风险。
-- 汇总旧口径搜索、报告文件名/路径/命令一致性和多语言关键事实一致性验证结果。
-- 标出仍需人工确认的产品文案、翻译、外部服务配置或发布说明。
+- List synchronized README/docs/ADR/changelog/env/setup/deploy documents.
+- List the checked README/docs entries and indicate which language files have been synchronized, which do not need to be synchronized, and which require manual confirmation.
+- Summarize the sources of truth used, update scope, verification orders, and non-coverage risks.
+- Aggregate legacy caliber searches, report filename/path/command consistency and multilingual key fact consistency verification results.
+- Highlight product copy, translations, external service configurations, or release notes that still require manual confirmation.

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

@@ -0,0 +1,73 @@
+---
+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, editable architecture diagrams, .drawio, ER diagrams, UML, sequence diagrams, auto layout, shape retrieval, code structure diagrams.
+---
+
+# Editable technical chart workflow
+
+## Purpose
+
+Generate, verify and export draw.io / diagrams.net technical diagrams that can be edited further.
+
+## Procedure
+
+1. Determine the chart route
+   - Simple diagrams in Markdown that need long-term maintenance, Mermaid is preferred.
+   - Use this workflow when you need official icons, swimlanes, complex layouts, layers/tags/metadata, editable PNG/SVG/PDF or `.drawio` sources.
+   - When you need fast browser opening or sharing, use [diagram-url.mjs](scripts/diagram-url.mjs) to generate the URL; when you need local auditable delivery, always save the `.drawio` source.
+   - If the user already has Mermaid or CSV content, they can use `diagram-url.mjs --create --type mermaid|csv` to import it to diagrams.net; when long-term maintenance or precise shape is required, convert it to XML.
+   - If the draw.io MCP App/Tool has been configured on the current host, it can be used as a preview or editing entrance; this skill does not require the installation of MCP server.
+   - Go the image generation route when you need photos, posters, visual concepts or bitmap editing.
+
+2. Create chart specifications
+   - Clarify diagram type, audience, output format, node list, relationships, hierarchical grouping and save location.
+   - Read [diagram-patterns.md](references/diagram-patterns.md) when the user specifies Flowchart, Architecture, Sequence, UML Class, ERD, Mindmap, Network Topology or ML/DL diagrams.
+   - For process, workflow, approval, release or incident-response flowcharts that must open cleanly in diagrams.net, also read [flowchart-quality.md](references/flowchart-quality.md).
+   - To select XML, Mermaid, CSV, container, layer, tag, metadata or dark mode policy, read [xml-and-mermaid.md](references/xml-and-mermaid.md).
+   - When you need a specific vendor/cloud/network/flowchart shape, run [shape-query.mjs](scripts/shape-query.mjs); when you need AI, database or infrastructure brand symbols, run [brand-symbols.mjs](scripts/brand-symbols.mjs).
+
+3. Generate `.drawio` source
+   - Draw.io XML can be manually generated for small drawings when exact node coordinates, sizes and connections are easier to reason about directly.
+   - When there are more than about 15 nodes, dependency graphs or code structure graphs, first generate graph JSON and then use [layout-graph.mjs](scripts/layout-graph.mjs) for automatic layout.
+   - For manually placed XML, align coordinates to a 10px grid, keep generous gaps between sibling nodes, use `whiteSpace=wrap;html=1`, prefer `fontSize=14`, encode forced line breaks as `
`, and size containers to their content instead of leaving one-sided blank areas.
+   - For manually authored flowcharts, keep `pageWidth` in the readable 600-800 range unless a wide cross-functional table is intentional; use swimlane containers for real stages and route loop or rollback edges around the margin with explicit waypoints.
+   - Code structure diagram can be used first [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) or [scan-python-classes.mjs](scripts/scan-python-classes.mjs) to generate graph JSON.
+
+4. Checksum preview
+   - Run after each generation of `.drawio`:
+     ```bash
+     node skills/fec-drawio-studio/scripts/diagram-lint.mjs diagram.drawio --format markdown
+     ```
+   - If the machine has draw.io desktop CLI, do not embed XML when exporting the preview PNG, and control the width:
+     ```bash
+     node skills/fec-drawio-studio/scripts/drawio-export.mjs diagram.drawio --format png --output diagram.png --width 2000
+     ```
+   - If CLI is not available, use [diagram-url.mjs](scripts/diagram-url.mjs) to generate diagrams.net viewer/editor URL; first read [data-residency.md](references/data-residency.md) when strictly offline or data residency is sensitive.
+
+5. Deliver the final product
+   - Save `.drawio` source files and PNG/SVG/PDF/JPG required by users.
+   - If the final PNG is embedded in XML using draw.io `-e`, run after exporting:
+     ```bash
+     node skills/fec-drawio-studio/scripts/drawio-export.mjs diagram.drawio --format png --output diagram.drawio.png --scale 2 --embed
+     node skills/fec-drawio-studio/scripts/png-embed-fix.mjs diagram.drawio.png
+     ```
+   - Report source files, exported files, verification results, and external dependencies that cannot be automatically verified.
+
+## Tool Resources
+
+Tool script sharing [studio-core.mjs](scripts/studio-core.mjs). Offline query uses [shape-index.json](data/shape-index.json) and [brand-icons.json](data/brand-icons.json). Style preset resources include [schema.json](styles/schema.json), [default.json](styles/built-in/default.json), [corporate.json](styles/built-in/corporate.json) and [handdrawn.json](styles/built-in/handdrawn.json).
+
+## Constraints
+
+- Do not use draw.io as a normal image model; text-heavy or structured images must remain editable source.
+- Don't guess complex `shape=mxgraph.*` styles; use the shape query tool to get the official styles first.
+- The MCP server runtime dependency is not introduced for the draw.io workflow; MCP App/Tool is only used as an optional interoperability entry when the user environment already exists.
+- Mermaid/CSV URLs are import shortcuts and do not replace `.drawio` source files, lint and editable delivery.
+- Do not embed XML in preview PNGs; embedding is for final delivery only.
+- Graphviz, draw.io desktop, and networked branding icons are all optional external capabilities; they must be downgraded instead of retried when missing. `drawio-export.mjs` may detect local draw.io paths and print installation guidance, but it must not install draw.io automatically.
+- Brand icons and third-party shape indexes follow the source and licensing instructions in [THIRD_PARTY_NOTICES.md](data/THIRD_PARTY_NOTICES.md).
+- When referring to the external draw.io MCP ecosystem, only absorb routes, constraints and interoperability experience, and do not copy its service implementation or long prompts.
+
+## Expected Output
+
+Deliver editable `.drawio` source and required export format, with structural verification results. The diagram should have complete nodes, traceable connections, non-truncated labels, non-overlapping layouts, and a diagrams.net fallback that can be opened when external tools are missing.

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` 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.