@bovinphang/frontend-craft 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (380) hide show
  1. package/.claude-plugin/marketplace.json +2 -2
  2. package/.claude-plugin/plugin.json +1 -1
  3. package/CHANGELOG.md +34 -0
  4. package/CHANGELOG.zh-CN.md +34 -0
  5. package/README.md +1 -1
  6. package/README.openclaw.md +99 -43
  7. package/README.openclaw.zh-CN.md +99 -43
  8. package/README.zh-CN.md +1 -1
  9. package/agents/fec-architect.md +70 -70
  10. package/agents/fec-code-reviewer.md +82 -82
  11. package/agents/fec-debugger.md +20 -20
  12. package/agents/fec-design-token-mapper.md +36 -36
  13. package/agents/fec-doc-updater.md +13 -13
  14. package/agents/fec-e2e-runner.md +45 -45
  15. package/agents/fec-figma-implementer.md +59 -59
  16. package/agents/fec-performance-optimizer.md +128 -128
  17. package/agents/fec-refactor-cleaner.md +14 -14
  18. package/agents/fec-security-reviewer.md +66 -67
  19. package/agents/fec-test-planner.md +27 -27
  20. package/agents/fec-typescript-reviewer.md +87 -87
  21. package/agents/fec-ui-checker.md +74 -74
  22. package/commands/fec-debug.md +19 -19
  23. package/commands/fec-doc-sync.md +11 -11
  24. package/commands/fec-init.md +37 -38
  25. package/commands/fec-plan.md +58 -58
  26. package/commands/fec-refactor-clean.md +11 -11
  27. package/commands/fec-review.md +41 -41
  28. package/commands/fec-scaffold.md +41 -41
  29. package/commands/fec-tdd.md +13 -13
  30. package/dist/bin/frontend-craft.js +29 -27
  31. package/docs/example-prompts.md +3 -0
  32. package/docs/ja-JP/README.md +1 -1
  33. package/docs/ko-KR/README.md +1 -1
  34. package/docs/project-structure.md +13 -5
  35. package/docs/zh-CN/example-prompts.md +3 -0
  36. package/docs/zh-CN/project-structure.md +6 -1
  37. package/docs/zh-TW/README.md +1 -1
  38. package/localized/zh-CN/agents/fec-architect.md +125 -0
  39. package/localized/zh-CN/agents/fec-code-reviewer.md +152 -0
  40. package/localized/zh-CN/agents/fec-debugger.md +44 -0
  41. package/localized/zh-CN/agents/fec-design-token-mapper.md +75 -0
  42. package/localized/zh-CN/agents/fec-doc-updater.md +30 -0
  43. package/localized/zh-CN/agents/fec-e2e-runner.md +107 -0
  44. package/localized/zh-CN/agents/fec-figma-implementer.md +104 -0
  45. package/localized/zh-CN/agents/fec-performance-optimizer.md +293 -0
  46. package/localized/zh-CN/agents/fec-refactor-cleaner.md +32 -0
  47. package/localized/zh-CN/agents/fec-security-reviewer.md +116 -0
  48. package/localized/zh-CN/agents/fec-test-planner.md +50 -0
  49. package/localized/zh-CN/agents/fec-typescript-reviewer.md +142 -0
  50. package/localized/zh-CN/agents/fec-ui-checker.md +120 -0
  51. package/localized/zh-CN/commands/fec-debug.md +30 -0
  52. package/localized/zh-CN/commands/fec-doc-sync.md +19 -0
  53. package/localized/zh-CN/commands/fec-init.md +70 -0
  54. package/localized/zh-CN/commands/fec-plan.md +94 -0
  55. package/localized/zh-CN/commands/fec-refactor-clean.md +19 -0
  56. package/localized/zh-CN/commands/fec-review.md +66 -0
  57. package/localized/zh-CN/commands/fec-scaffold.md +205 -0
  58. package/localized/zh-CN/commands/fec-tdd.md +21 -0
  59. package/localized/zh-CN/skills/TEMPLATE.md +155 -0
  60. package/localized/zh-CN/skills/eval_queries.json +1013 -0
  61. package/localized/zh-CN/skills/fec-accessibility-check/SKILL.md +39 -0
  62. package/localized/zh-CN/skills/fec-accessibility-check/references/report-template.md +23 -0
  63. package/localized/zh-CN/skills/fec-accessibility-check/references/screen-reader-testing.md +33 -0
  64. package/localized/zh-CN/skills/fec-alchemy/SKILL.md +74 -0
  65. package/localized/zh-CN/skills/fec-alchemy/assets/absorption-plan-template.md +47 -0
  66. package/localized/zh-CN/skills/fec-alchemy/assets/intake-template.md +55 -0
  67. package/localized/zh-CN/skills/fec-alchemy/assets/review-checklist.md +31 -0
  68. package/localized/zh-CN/skills/fec-alchemy/references/methodology.md +94 -0
  69. package/localized/zh-CN/skills/fec-alchemy/references/originality-and-licensing.md +57 -0
  70. package/localized/zh-CN/skills/fec-api-integration/SKILL.md +78 -0
  71. package/localized/zh-CN/skills/fec-api-integration/references/integration-patterns.md +80 -0
  72. package/localized/zh-CN/skills/fec-backend-requirements-handoff/SKILL.md +45 -0
  73. package/localized/zh-CN/skills/fec-browser-storage/SKILL.md +34 -0
  74. package/localized/zh-CN/skills/fec-browser-storage/references/storage-patterns.md +65 -0
  75. package/localized/zh-CN/skills/fec-canvas-threejs/SKILL.md +66 -0
  76. package/localized/zh-CN/skills/fec-canvas-threejs/references/rendering-patterns.md +67 -0
  77. package/localized/zh-CN/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +67 -0
  78. package/localized/zh-CN/skills/fec-code-review/SKILL.md +143 -0
  79. package/localized/zh-CN/skills/fec-code-review/references/report-template.md +29 -0
  80. package/localized/zh-CN/skills/fec-component-testing/SKILL.md +119 -0
  81. package/localized/zh-CN/skills/fec-data-fetching/SKILL.md +62 -0
  82. package/localized/zh-CN/skills/fec-data-fetching/references/query-patterns.md +103 -0
  83. package/localized/zh-CN/skills/fec-debug-framework/SKILL.md +157 -0
  84. package/localized/zh-CN/skills/fec-debug-framework/references/report-template.md +58 -0
  85. package/localized/zh-CN/skills/fec-dependency-upgrade/SKILL.md +34 -0
  86. package/localized/zh-CN/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +56 -0
  87. package/localized/zh-CN/skills/fec-doc-sync/SKILL.md +39 -0
  88. package/localized/zh-CN/skills/fec-drawio-studio/SKILL.md +73 -0
  89. package/localized/zh-CN/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +10 -0
  90. package/localized/zh-CN/skills/fec-drawio-studio/data/brand-icons.json +878 -0
  91. package/localized/zh-CN/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  92. package/localized/zh-CN/skills/fec-drawio-studio/references/data-residency.md +27 -0
  93. package/localized/zh-CN/skills/fec-drawio-studio/references/diagram-patterns.md +60 -0
  94. package/localized/zh-CN/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  95. package/localized/zh-CN/skills/fec-drawio-studio/references/layout-and-export.md +72 -0
  96. package/localized/zh-CN/skills/fec-drawio-studio/references/troubleshooting.md +29 -0
  97. package/localized/zh-CN/skills/fec-drawio-studio/references/xml-and-mermaid.md +58 -0
  98. package/localized/zh-CN/skills/fec-drawio-studio/scripts/brand-symbols.mjs +99 -0
  99. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-lint.mjs +205 -0
  100. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-url.mjs +102 -0
  101. package/localized/zh-CN/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  102. package/localized/zh-CN/skills/fec-drawio-studio/scripts/layout-graph.mjs +107 -0
  103. package/localized/zh-CN/skills/fec-drawio-studio/scripts/png-embed-fix.mjs +26 -0
  104. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-go-packages.mjs +36 -0
  105. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-js-modules.mjs +52 -0
  106. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-classes.mjs +30 -0
  107. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-modules.mjs +55 -0
  108. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-rust-modules.mjs +35 -0
  109. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-ts-modules.mjs +7 -0
  110. package/localized/zh-CN/skills/fec-drawio-studio/scripts/shape-query.mjs +121 -0
  111. package/localized/zh-CN/skills/fec-drawio-studio/scripts/studio-core.mjs +139 -0
  112. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/corporate.json +49 -0
  113. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/default.json +49 -0
  114. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/handdrawn.json +49 -0
  115. package/localized/zh-CN/skills/fec-drawio-studio/styles/schema.json +112 -0
  116. package/localized/zh-CN/skills/fec-e2e-testing/SKILL.md +42 -0
  117. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-ci-reporting.md +62 -0
  118. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-special-scenarios.md +52 -0
  119. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-visual-regression.md +60 -0
  120. package/localized/zh-CN/skills/fec-e2e-testing/references/playwright-patterns.md +95 -0
  121. package/localized/zh-CN/skills/fec-form-handling/SKILL.md +76 -0
  122. package/localized/zh-CN/skills/fec-form-handling/references/advanced-form-patterns.md +101 -0
  123. package/localized/zh-CN/skills/fec-image-generation/SKILL.md +80 -0
  124. package/localized/zh-CN/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  125. package/localized/zh-CN/skills/fec-image-generation/references/artifact-routing.md +80 -0
  126. package/localized/zh-CN/skills/fec-image-generation/references/diagram-workflows.md +74 -0
  127. package/localized/zh-CN/skills/fec-image-generation/references/html-technical-diagrams.md +236 -0
  128. package/localized/zh-CN/skills/fec-image-generation/references/png-qa-autofix.md +30 -0
  129. package/localized/zh-CN/skills/fec-image-generation/scripts/export-diagram.mjs +364 -0
  130. package/localized/zh-CN/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  131. package/localized/zh-CN/skills/fec-image-generation/scripts/png-qa.mjs +431 -0
  132. package/localized/zh-CN/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1397 -0
  133. package/localized/zh-CN/skills/fec-implement-from-design/SKILL.md +129 -0
  134. package/localized/zh-CN/skills/fec-implement-from-design/references/design-plan-template.md +36 -0
  135. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/SKILL.md +46 -0
  136. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +110 -0
  137. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +41 -0
  138. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +48 -0
  139. package/localized/zh-CN/skills/fec-legacy-web-standard/SKILL.md +35 -0
  140. package/localized/zh-CN/skills/fec-legacy-web-standard/references/legacy-patterns.md +85 -0
  141. package/localized/zh-CN/skills/fec-list-virtualization/SKILL.md +34 -0
  142. package/localized/zh-CN/skills/fec-list-virtualization/references/virtualization-patterns.md +80 -0
  143. package/localized/zh-CN/skills/fec-monorepo-project-standard/SKILL.md +142 -0
  144. package/localized/zh-CN/skills/fec-motion-interaction/SKILL.md +73 -0
  145. package/localized/zh-CN/skills/fec-motion-interaction/references/motion-patterns.md +112 -0
  146. package/localized/zh-CN/skills/fec-nextjs-project-standard/SKILL.md +123 -0
  147. package/localized/zh-CN/skills/fec-nuxt-project-standard/SKILL.md +122 -0
  148. package/localized/zh-CN/skills/fec-performance-optimization/SKILL.md +80 -0
  149. package/localized/zh-CN/skills/fec-performance-optimization/references/framework-performance-patterns.md +38 -0
  150. package/localized/zh-CN/skills/fec-performance-optimization/references/report-template.md +59 -0
  151. package/localized/zh-CN/skills/fec-pwa-implementation/SKILL.md +35 -0
  152. package/localized/zh-CN/skills/fec-pwa-implementation/references/manifest-and-icons.md +53 -0
  153. package/localized/zh-CN/skills/fec-pwa-implementation/references/service-worker-workbox.md +68 -0
  154. package/localized/zh-CN/skills/fec-react-project-standard/SKILL.md +91 -0
  155. package/localized/zh-CN/skills/fec-react-project-standard/references/react-performance-patterns.md +35 -0
  156. package/localized/zh-CN/skills/fec-react-project-standard/references/react-project-structure.md +197 -0
  157. package/localized/zh-CN/skills/fec-react-project-standard/references/react-quality-patterns.md +131 -0
  158. package/localized/zh-CN/skills/fec-react-project-standard/references/react-runtime-patterns.md +293 -0
  159. package/localized/zh-CN/skills/fec-refactor-clean/SKILL.md +51 -0
  160. package/localized/zh-CN/skills/fec-refactor-clean/references/report-template.md +42 -0
  161. package/localized/zh-CN/skills/fec-responsive-layout/SKILL.md +34 -0
  162. package/localized/zh-CN/skills/fec-responsive-layout/references/responsive-layout-patterns.md +70 -0
  163. package/localized/zh-CN/skills/fec-route-protection/SKILL.md +135 -0
  164. package/localized/zh-CN/skills/fec-security-review/SKILL.md +38 -0
  165. package/localized/zh-CN/skills/fec-security-review/references/report-template.md +27 -0
  166. package/localized/zh-CN/skills/fec-security-review/references/security-checklist.md +64 -0
  167. package/localized/zh-CN/skills/fec-source-driven-development/SKILL.md +87 -0
  168. package/localized/zh-CN/skills/fec-state-management/SKILL.md +140 -0
  169. package/localized/zh-CN/skills/fec-state-management/references/state-patterns.md +109 -0
  170. package/localized/zh-CN/skills/fec-storybook-component-doc/SKILL.md +37 -0
  171. package/localized/zh-CN/skills/fec-storybook-component-doc/references/story-patterns.md +118 -0
  172. package/localized/zh-CN/skills/fec-svg-animation/SKILL.md +148 -0
  173. package/localized/zh-CN/skills/fec-tailwind-design-system/SKILL.md +34 -0
  174. package/localized/zh-CN/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +59 -0
  175. package/localized/zh-CN/skills/fec-tdd-workflow/SKILL.md +52 -0
  176. package/localized/zh-CN/skills/fec-testing-strategy/SKILL.md +45 -0
  177. package/localized/zh-CN/skills/fec-typescript-project-standard/SKILL.md +54 -0
  178. package/localized/zh-CN/skills/fec-typescript-project-standard/references/type-safety-patterns.md +102 -0
  179. package/localized/zh-CN/skills/fec-typescript-project-standard/references/type-safety.md +148 -0
  180. package/localized/zh-CN/skills/fec-ui-design/SKILL.md +108 -0
  181. package/localized/zh-CN/skills/fec-ui-design/data/product-rules.json +231 -0
  182. package/localized/zh-CN/skills/fec-ui-design/data/stack-ui-rules.json +146 -0
  183. package/localized/zh-CN/skills/fec-ui-design/data/style-archetypes.json +373 -0
  184. package/localized/zh-CN/skills/fec-ui-design/data/ux-quality-rules.json +203 -0
  185. package/localized/zh-CN/skills/fec-ui-design/references/design-intelligence.md +97 -0
  186. package/localized/zh-CN/skills/fec-ui-design/references/master-page-overrides.md +30 -0
  187. package/localized/zh-CN/skills/fec-ui-design/references/pre-delivery-checklist.md +39 -0
  188. package/localized/zh-CN/skills/fec-ui-design/scripts/design-system.mjs +648 -0
  189. package/localized/zh-CN/skills/fec-validation-fix/SKILL.md +51 -0
  190. package/localized/zh-CN/skills/fec-validation-fix/references/report-template.md +43 -0
  191. package/localized/zh-CN/skills/fec-vite-project-standard/SKILL.md +83 -0
  192. package/localized/zh-CN/skills/fec-vue3-project-standard/SKILL.md +58 -0
  193. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +162 -0
  194. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +13 -0
  195. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-project-structure.md +176 -0
  196. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +216 -0
  197. package/localized/zh-CN/skills/fec-web-video-presentation/SKILL.md +61 -0
  198. package/localized/zh-CN/skills/fec-web-video-presentation/data/starter-themes.json +59 -0
  199. package/localized/zh-CN/skills/fec-web-video-presentation/references/chapter-craft.md +37 -0
  200. package/localized/zh-CN/skills/fec-web-video-presentation/references/content-plan.md +38 -0
  201. package/localized/zh-CN/skills/fec-web-video-presentation/references/recording-and-audio.md +33 -0
  202. package/localized/zh-CN/skills/fec-web-video-presentation/references/theme-system.md +36 -0
  203. package/localized/zh-CN/skills/fec-web-video-presentation/scripts/create-video-presentation.mjs +430 -0
  204. package/localized/zh-CN/skills/fec-web-workers/SKILL.md +35 -0
  205. package/localized/zh-CN/skills/fec-web-workers/references/advanced-workers.md +54 -0
  206. package/localized/zh-CN/skills/fec-web-workers/references/basic-worker.md +67 -0
  207. package/localized/zh-CN/skills/metadata.json +1646 -0
  208. package/localized/zh-CN/skills/relations.json +755 -0
  209. package/localized/zh-CN/templates/claude/CLAUDE.md +106 -0
  210. package/localized/zh-CN/templates/claude/settings.json +62 -0
  211. package/localized/zh-CN/templates/codex/AGENTS.md +105 -0
  212. package/localized/zh-CN/templates/codex/config.toml +32 -0
  213. package/localized/zh-CN/templates/openclaw/AGENTS.md +101 -0
  214. package/localized/zh-CN/templates/openclaw/OPENCLAW-CONFIG.md +12 -0
  215. package/localized/zh-CN/templates/shared/rules/fec-agent-workflow.md +54 -0
  216. package/localized/zh-CN/templates/shared/rules/fec-api-layer.md +99 -0
  217. package/localized/zh-CN/templates/shared/rules/fec-ci-cd.md +40 -0
  218. package/localized/zh-CN/templates/shared/rules/fec-code-comments.md +33 -0
  219. package/localized/zh-CN/templates/shared/rules/fec-design-system.md +72 -0
  220. package/localized/zh-CN/templates/shared/rules/fec-error-handling.md +56 -0
  221. package/localized/zh-CN/templates/shared/rules/fec-git-conventions.md +73 -0
  222. package/localized/zh-CN/templates/shared/rules/fec-i18n.md +64 -0
  223. package/localized/zh-CN/templates/shared/rules/fec-naming-conventions.md +120 -0
  224. package/localized/zh-CN/templates/shared/rules/fec-performance.md +101 -0
  225. package/localized/zh-CN/templates/shared/rules/fec-react.md +82 -0
  226. package/localized/zh-CN/templates/shared/rules/fec-refactoring.md +47 -0
  227. package/localized/zh-CN/templates/shared/rules/fec-rendering-patterns.md +40 -0
  228. package/localized/zh-CN/templates/shared/rules/fec-responsive-design.md +50 -0
  229. package/localized/zh-CN/templates/shared/rules/fec-source-driven-development.md +31 -0
  230. package/localized/zh-CN/templates/shared/rules/fec-state-management.md +60 -0
  231. package/localized/zh-CN/templates/shared/rules/fec-testing.md +98 -0
  232. package/localized/zh-CN/templates/shared/rules/fec-typescript.md +112 -0
  233. package/localized/zh-CN/templates/shared/rules/fec-vue.md +64 -0
  234. package/localized/zh-CN/templates/shared/rules/fec-working-modes.md +50 -0
  235. package/openclaw.plugin.json +1 -1
  236. package/package.json +3 -2
  237. package/skills/TEMPLATE.md +74 -74
  238. package/skills/eval_queries.json +678 -678
  239. package/skills/fec-accessibility-check/SKILL.md +21 -21
  240. package/skills/fec-accessibility-check/references/report-template.md +12 -12
  241. package/skills/fec-accessibility-check/references/screen-reader-testing.md +24 -24
  242. package/skills/fec-alchemy/SKILL.md +50 -50
  243. package/skills/fec-alchemy/assets/absorption-plan-template.md +32 -32
  244. package/skills/fec-alchemy/assets/intake-template.md +55 -55
  245. package/skills/fec-alchemy/assets/review-checklist.md +23 -23
  246. package/skills/fec-alchemy/references/methodology.md +66 -66
  247. package/skills/fec-alchemy/references/originality-and-licensing.md +42 -42
  248. package/skills/fec-api-integration/SKILL.md +61 -61
  249. package/skills/fec-api-integration/references/integration-patterns.md +30 -30
  250. package/skills/fec-backend-requirements-handoff/SKILL.md +25 -25
  251. package/skills/fec-browser-storage/SKILL.md +16 -16
  252. package/skills/fec-browser-storage/references/storage-patterns.md +16 -16
  253. package/skills/fec-canvas-threejs/SKILL.md +21 -21
  254. package/skills/fec-canvas-threejs/references/rendering-patterns.md +10 -10
  255. package/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +37 -37
  256. package/skills/fec-code-review/SKILL.md +94 -94
  257. package/skills/fec-code-review/references/report-template.md +13 -13
  258. package/skills/fec-component-testing/SKILL.md +39 -39
  259. package/skills/fec-data-fetching/SKILL.md +16 -16
  260. package/skills/fec-data-fetching/references/query-patterns.md +27 -27
  261. package/skills/fec-debug-framework/SKILL.md +95 -95
  262. package/skills/fec-debug-framework/references/report-template.md +34 -34
  263. package/skills/fec-dependency-upgrade/SKILL.md +17 -17
  264. package/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +31 -31
  265. package/skills/fec-doc-sync/SKILL.md +23 -23
  266. package/skills/fec-drawio-studio/SKILL.md +42 -38
  267. package/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +1 -1
  268. package/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  269. package/skills/fec-drawio-studio/references/diagram-patterns.md +19 -0
  270. package/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  271. package/skills/fec-drawio-studio/references/layout-and-export.md +18 -3
  272. package/skills/fec-drawio-studio/references/xml-and-mermaid.md +5 -1
  273. package/skills/fec-drawio-studio/scripts/diagram-lint.mjs +62 -0
  274. package/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  275. package/skills/fec-drawio-studio/scripts/shape-query.mjs +55 -15
  276. package/skills/fec-e2e-testing/SKILL.md +24 -24
  277. package/skills/fec-e2e-testing/references/e2e-ci-reporting.md +20 -20
  278. package/skills/fec-e2e-testing/references/e2e-special-scenarios.md +10 -10
  279. package/skills/fec-e2e-testing/references/e2e-visual-regression.md +17 -17
  280. package/skills/fec-e2e-testing/references/playwright-patterns.md +6 -6
  281. package/skills/fec-form-handling/SKILL.md +21 -21
  282. package/skills/fec-form-handling/references/advanced-form-patterns.md +41 -41
  283. package/skills/fec-image-generation/SKILL.md +54 -29
  284. package/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  285. package/skills/fec-image-generation/references/diagram-workflows.md +33 -2
  286. package/skills/fec-image-generation/references/html-technical-diagrams.md +236 -0
  287. package/skills/fec-image-generation/scripts/export-diagram.mjs +364 -0
  288. package/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  289. package/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1397 -0
  290. package/skills/fec-implement-from-design/SKILL.md +81 -81
  291. package/skills/fec-implement-from-design/references/design-plan-template.md +16 -16
  292. package/skills/fec-legacy-to-modern-migration/SKILL.md +29 -29
  293. package/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +81 -81
  294. package/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +37 -37
  295. package/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +31 -31
  296. package/skills/fec-legacy-web-standard/SKILL.md +17 -17
  297. package/skills/fec-legacy-web-standard/references/legacy-patterns.md +16 -16
  298. package/skills/fec-list-virtualization/SKILL.md +16 -16
  299. package/skills/fec-list-virtualization/references/virtualization-patterns.md +31 -31
  300. package/skills/fec-monorepo-project-standard/SKILL.md +52 -52
  301. package/skills/fec-motion-interaction/SKILL.md +51 -51
  302. package/skills/fec-motion-interaction/references/motion-patterns.md +11 -11
  303. package/skills/fec-nextjs-project-standard/SKILL.md +64 -64
  304. package/skills/fec-nuxt-project-standard/SKILL.md +57 -57
  305. package/skills/fec-performance-optimization/SKILL.md +54 -54
  306. package/skills/fec-performance-optimization/references/framework-performance-patterns.md +23 -23
  307. package/skills/fec-performance-optimization/references/report-template.md +31 -31
  308. package/skills/fec-pwa-implementation/SKILL.md +17 -17
  309. package/skills/fec-pwa-implementation/references/manifest-and-icons.md +12 -12
  310. package/skills/fec-pwa-implementation/references/service-worker-workbox.md +13 -13
  311. package/skills/fec-react-project-standard/SKILL.md +72 -72
  312. package/skills/fec-react-project-standard/references/react-performance-patterns.md +28 -28
  313. package/skills/fec-react-project-standard/references/react-project-structure.md +112 -112
  314. package/skills/fec-react-project-standard/references/react-quality-patterns.md +72 -72
  315. package/skills/fec-react-project-standard/references/react-runtime-patterns.md +94 -94
  316. package/skills/fec-refactor-clean/SKILL.md +30 -30
  317. package/skills/fec-refactor-clean/references/report-template.md +23 -23
  318. package/skills/fec-responsive-layout/SKILL.md +17 -17
  319. package/skills/fec-responsive-layout/references/responsive-layout-patterns.md +37 -37
  320. package/skills/fec-route-protection/SKILL.md +26 -26
  321. package/skills/fec-security-review/SKILL.md +20 -20
  322. package/skills/fec-security-review/references/report-template.md +12 -12
  323. package/skills/fec-security-review/references/security-checklist.md +27 -27
  324. package/skills/fec-source-driven-development/SKILL.md +59 -59
  325. package/skills/fec-state-management/SKILL.md +34 -34
  326. package/skills/fec-state-management/references/state-patterns.md +19 -19
  327. package/skills/fec-storybook-component-doc/SKILL.md +19 -19
  328. package/skills/fec-storybook-component-doc/references/story-patterns.md +12 -12
  329. package/skills/fec-svg-animation/SKILL.md +32 -32
  330. package/skills/fec-tailwind-design-system/SKILL.md +17 -17
  331. package/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +36 -36
  332. package/skills/fec-tdd-workflow/SKILL.md +28 -28
  333. package/skills/fec-testing-strategy/SKILL.md +29 -29
  334. package/skills/fec-typescript-project-standard/SKILL.md +38 -38
  335. package/skills/fec-typescript-project-standard/references/type-safety-patterns.md +20 -20
  336. package/skills/fec-typescript-project-standard/references/type-safety.md +18 -18
  337. package/skills/fec-ui-design/SKILL.md +90 -90
  338. package/skills/fec-ui-design/references/design-intelligence.md +61 -61
  339. package/skills/fec-ui-design/references/master-page-overrides.md +15 -15
  340. package/skills/fec-ui-design/references/pre-delivery-checklist.md +38 -38
  341. package/skills/fec-validation-fix/SKILL.md +26 -26
  342. package/skills/fec-validation-fix/references/report-template.md +25 -25
  343. package/skills/fec-vite-project-standard/SKILL.md +39 -39
  344. package/skills/fec-vue3-project-standard/SKILL.md +38 -38
  345. package/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +36 -36
  346. package/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +8 -8
  347. package/skills/fec-vue3-project-standard/references/vue3-project-structure.md +112 -112
  348. package/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +74 -74
  349. package/skills/fec-web-video-presentation/SKILL.md +33 -33
  350. package/skills/fec-web-workers/SKILL.md +16 -16
  351. package/skills/fec-web-workers/references/advanced-workers.md +13 -13
  352. package/skills/fec-web-workers/references/basic-worker.md +8 -8
  353. package/skills/metadata.json +121 -115
  354. package/skills/relations.json +4 -0
  355. package/templates/claude/CLAUDE.md +60 -60
  356. package/templates/codex/AGENTS.md +76 -76
  357. package/templates/codex/config.toml +4 -4
  358. package/templates/openclaw/AGENTS.md +68 -68
  359. package/templates/openclaw/OPENCLAW-CONFIG.md +8 -8
  360. package/templates/shared/rules/fec-agent-workflow.md +40 -40
  361. package/templates/shared/rules/fec-api-layer.md +52 -52
  362. package/templates/shared/rules/fec-ci-cd.md +29 -29
  363. package/templates/shared/rules/fec-code-comments.md +22 -22
  364. package/templates/shared/rules/fec-design-system.md +53 -53
  365. package/templates/shared/rules/fec-error-handling.md +40 -40
  366. package/templates/shared/rules/fec-git-conventions.md +42 -42
  367. package/templates/shared/rules/fec-i18n.md +48 -48
  368. package/templates/shared/rules/fec-naming-conventions.md +91 -91
  369. package/templates/shared/rules/fec-performance.md +78 -78
  370. package/templates/shared/rules/fec-react.md +58 -58
  371. package/templates/shared/rules/fec-refactoring.md +34 -34
  372. package/templates/shared/rules/fec-rendering-patterns.md +36 -36
  373. package/templates/shared/rules/fec-responsive-design.md +37 -37
  374. package/templates/shared/rules/fec-source-driven-development.md +22 -22
  375. package/templates/shared/rules/fec-state-management.md +56 -56
  376. package/templates/shared/rules/fec-testing.md +64 -64
  377. package/templates/shared/rules/fec-typescript.md +75 -75
  378. package/templates/shared/rules/fec-vue.md +42 -42
  379. package/templates/shared/rules/fec-working-modes.md +34 -34
  380. package/skills/fec-drawio-studio/data/shape-index.json.gz +0 -0
package/localized/zh-CN/skills/fec-image-generation/assets/interactive-diagram.html ADDED
@@ -0,0 +1,371 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>frontend-craft 交互式图表</title>
7
+ <style>
8
+ :root {
9
+ color-scheme: light;
10
+ --bg: #f5f7fb;
11
+ --panel: #ffffff;
12
+ --ink: #172033;
13
+ --muted: #61708a;
14
+ --line: #d9e0eb;
15
+ --accent: #3157d5;
16
+ --edge: #728096;
17
+ --shadow: 0 12px 32px rgba(20, 32, 54, 0.12);
18
+ }
19
+ * { box-sizing: border-box; }
20
+ body {
21
+ margin: 0;
22
+ min-height: 100vh;
23
+ display: grid;
24
+ grid-template-rows: auto 1fr;
25
+ font-family: Arial, Helvetica, sans-serif;
26
+ color: var(--ink);
27
+ background: var(--bg);
28
+ }
29
+ header {
30
+ display: flex;
31
+ gap: 12px;
32
+ align-items: center;
33
+ justify-content: space-between;
34
+ padding: 12px 16px;
35
+ border-bottom: 1px solid var(--line);
36
+ background: var(--panel);
37
+ }
38
+ h1 { margin: 0; font-size: 16px; line-height: 1.2; }
39
+ .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
40
+ button {
41
+ border: 1px solid var(--line);
42
+ background: #fff;
43
+ color: var(--ink);
44
+ border-radius: 6px;
45
+ padding: 7px 10px;
46
+ font: inherit;
47
+ cursor: pointer;
48
+ }
49
+ button:hover { border-color: var(--accent); color: var(--accent); }
50
+ main { position: relative; min-height: 0; overflow: hidden; }
51
+ #status {
52
+ position: absolute;
53
+ left: 16px;
54
+ bottom: 14px;
55
+ z-index: 2;
56
+ padding: 6px 9px;
57
+ border: 1px solid var(--line);
58
+ border-radius: 6px;
59
+ background: rgba(255, 255, 255, 0.9);
60
+ color: var(--muted);
61
+ font-size: 12px;
62
+ }
63
+ svg { display: block; width: 100%; height: 100%; min-height: calc(100vh - 58px); background: #fbfcff; }
64
+ .grid { stroke: #eef2f8; stroke-width: 1; }
65
+ .edge { stroke: var(--edge); stroke-width: 2; fill: none; }
66
+ .edge-label-bg { fill: #fff; stroke: var(--line); }
67
+ .edge-label { fill: var(--muted); font-size: 12px; }
68
+ .node text { pointer-events: none; font-size: 13px; fill: var(--ink); }
69
+ .node-shape { fill: #f8fbff; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 3px 4px rgba(20, 32, 54, 0.08)); }
70
+ .node-terminal { stroke: #2f9e44; fill: #f1fbf3; }
71
+ .node-terminal-end { stroke: #d9480f; fill: #fff4ef; }
72
+ .node-decision { stroke: #d69e2e; fill: #fff8dc; }
73
+ .node-service { stroke: #805ad5; fill: #faf5ff; }
74
+ .node-database { stroke: #0c8599; fill: #edfaff; }
75
+ .node-success { stroke: #2f9e44; fill: #f1fbf3; }
76
+ .node-error { stroke: #e03131; fill: #fff5f5; }
77
+ .container-shape { fill: rgba(248, 251, 255, 0.72); stroke: #7a8aa0; stroke-width: 2; stroke-dasharray: 7 5; }
78
+ .selected .node-shape, .selected .container-shape { stroke-width: 3; }
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <header>
83
+ <h1 id="title">交互式图表</h1>
84
+ <div class="toolbar">
85
+ <button type="button" data-action="fit">适配</button>
86
+ <button type="button" data-action="zoom-in">放大</button>
87
+ <button type="button" data-action="zoom-out">缩小</button>
88
+ <button type="button" data-action="export-svg">SVG</button>
89
+ <button type="button" data-action="export-png">PNG</button>
90
+ <button type="button" data-action="export-json">JSON</button>
91
+ </div>
92
+ </header>
93
+ <main>
94
+ <svg id="canvas" role="img" aria-labelledby="title">
95
+ <defs>
96
+ <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
97
+ <path d="M0,0 L0,6 L9,3 z" fill="#728096"></path>
98
+ </marker>
99
+ <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
100
+ <path class="grid" d="M24 0H0V24"></path>
101
+ </pattern>
102
+ </defs>
103
+ <rect width="100%" height="100%" fill="url(#grid)"></rect>
104
+ <g id="viewport"></g>
105
+ </svg>
106
+ <div id="status">正在连接</div>
107
+ </main>
108
+ <script>
109
+ const svg = document.getElementById('canvas');
110
+ const viewport = document.getElementById('viewport');
111
+ const titleEl = document.getElementById('title');
112
+ const statusEl = document.getElementById('status');
113
+ const session = new URLSearchParams(location.search).get('s') || 'default';
114
+ const state = { title: '交互式图表', direction: 'TB', nodes: new Map(), edges: [], scale: 1, tx: 24, ty: 24, selected: null };
115
+ const ns = 'http://www.w3.org/2000/svg';
116
+
117
+ function setStatus(text) { statusEl.textContent = `${session}: ${text}`; }
118
+ function sizeFor(node) {
119
+ const text = String(node.label || node.id || '');
120
+ const width = Number(node.width) || Math.min(240, Math.max(node.type === 'decision' ? 132 : 150, text.length * 8 + 42));
121
+ const height = Number(node.height) || (node.type === 'decision' ? 88 : 62);
122
+ return { width, height };
123
+ }
124
+ function layout() {
125
+ const normalNodes = [...state.nodes.values()].filter(node => node.type !== 'container');
126
+ const incoming = new Map(normalNodes.map(node => [node.id, 0]));
127
+ const outgoing = new Map(normalNodes.map(node => [node.id, []]));
128
+ for (const edge of state.edges) {
129
+ if (!incoming.has(edge.to) || !outgoing.has(edge.from)) continue;
130
+ incoming.set(edge.to, incoming.get(edge.to) + 1);
131
+ outgoing.get(edge.from).push(edge.to);
132
+ }
133
+ const layer = new Map();
134
+ const queue = normalNodes.filter(node => incoming.get(node.id) === 0);
135
+ queue.forEach(node => layer.set(node.id, 0));
136
+ while (queue.length) {
137
+ const node = queue.shift();
138
+ for (const next of outgoing.get(node.id) || []) {
139
+ layer.set(next, Math.max(layer.get(next) || 0, (layer.get(node.id) || 0) + 1));
140
+ const nextNode = state.nodes.get(next);
141
+ if (nextNode) queue.push(nextNode);
142
+ }
143
+ }
144
+ normalNodes.forEach(node => {
145
+ if (!layer.has(node.id)) layer.set(node.id, 0);
146
+ });
147
+ const horizontal = state.direction === 'LR' || state.direction === 'RL';
148
+ const groups = new Map();
149
+ normalNodes.forEach(node => {
150
+ if (Number.isFinite(node.x) && Number.isFinite(node.y)) return;
151
+ const rank = layer.get(node.id) || 0;
152
+ const group = groups.get(rank) || [];
153
+ group.push(node);
154
+ groups.set(rank, group);
155
+ });
156
+ for (const [rank, nodes] of groups) {
157
+ nodes.forEach((node, index) => {
158
+ const main = 80 + rank * 190;
159
+ const cross = 80 + index * 120;
160
+ node.x = horizontal ? main : cross;
161
+ node.y = horizontal ? cross : main;
162
+ });
163
+ }
164
+ for (const node of [...state.nodes.values()].filter(item => item.type === 'container')) {
165
+ const children = Array.isArray(node.children) ? node.children.map(id => state.nodes.get(id)).filter(Boolean) : [];
166
+ if (!children.length) continue;
167
+ const left = Math.min(...children.map(child => child.x || 0));
168
+ const top = Math.min(...children.map(child => child.y || 0));
169
+ const right = Math.max(...children.map(child => (child.x || 0) + sizeFor(child).width));
170
+ const bottom = Math.max(...children.map(child => (child.y || 0) + sizeFor(child).height));
171
+ node.x = left - 36;
172
+ node.y = top - 54;
173
+ node.width = right - left + 72;
174
+ node.height = bottom - top + 90;
175
+ }
176
+ }
177
+ function render() {
178
+ layout();
179
+ viewport.innerHTML = '';
180
+ viewport.setAttribute('transform', `translate(${state.tx} ${state.ty}) scale(${state.scale})`);
181
+ renderEdges();
182
+ [...state.nodes.values()].filter(node => node.type === 'container').forEach(renderNode);
183
+ [...state.nodes.values()].filter(node => node.type !== 'container').forEach(renderNode);
184
+ titleEl.textContent = state.title;
185
+ setStatus(`${state.nodes.size} 个节点，${state.edges.length} 条连线`);
186
+ }
187
+ function pointFor(id, bottom) {
188
+ const node = state.nodes.get(id);
189
+ if (!node) return null;
190
+ const { width, height } = sizeFor(node);
191
+ return { x: (node.x || 0) + width / 2, y: (node.y || 0) + (bottom ? height : 0) };
192
+ }
193
+ function renderEdges() {
194
+ for (const edge of state.edges) {
195
+ const from = pointFor(edge.from, true);
196
+ const to = pointFor(edge.to, false);
197
+ if (!from || !to) continue;
198
+ const group = el('g', {});
199
+ const midY = (from.y + to.y) / 2;
200
+ group.append(el('path', { class: 'edge', markerEnd: 'url(#arrow)', d: `M${from.x},${from.y} C${from.x},${midY} ${to.x},${midY} ${to.x},${to.y}` }));
201
+ if (edge.label) {
202
+ const x = (from.x + to.x) / 2;
203
+ const y = midY - 8;
204
+ group.append(el('rect', { class: 'edge-label-bg', x: x - 42, y: y - 15, width: 84, height: 20, rx: 5 }));
205
+ const text = el('text', { class: 'edge-label', x, y, textAnchor: 'middle' });
206
+ text.textContent = edge.label;
207
+ group.append(text);
208
+ }
209
+ viewport.append(group);
210
+ }
211
+ }
212
+ function renderNode(node) {
213
+ const { width, height } = sizeFor(node);
214
+ const group = el('g', { class: `node ${state.selected === node.id ? 'selected' : ''}`, transform: `translate(${node.x || 0} ${node.y || 0})`, tabindex: '0' });
215
+ group.dataset.id = node.id;
216
+ if (node.type === 'container') {
217
+ group.append(el('rect', { class: 'container-shape', width, height, rx: 8 }));
218
+ const label = el('text', { x: 14, y: 24, fontWeight: '700' });
219
+ label.textContent = node.label || node.id;
220
+ group.append(label);
221
+ } else if (node.type === 'decision') {
222
+ group.append(el('polygon', { class: 'node-shape node-decision', points: `${width / 2},0 ${width},${height / 2} ${width / 2},${height} 0,${height / 2}` }));
223
+ group.append(centerText(node.label || node.id, width / 2, height / 2 + 5));
224
+ } else if (node.type === 'terminal' || node.type === 'terminal-end') {
225
+ group.append(el('ellipse', { class: `node-shape node-${node.type}`, cx: width / 2, cy: height / 2, rx: width / 2, ry: height / 2 }));
226
+ group.append(centerText(node.label || node.id, width / 2, height / 2 + 5));
227
+ } else {
228
+ group.append(el('rect', { class: `node-shape node-${node.type || 'process'}`, width, height, rx: 8 }));
229
+ group.append(centerText(node.label || node.id, width / 2, height / 2 + 5));
230
+ }
231
+ group.addEventListener('pointerdown', event => startDrag(event, node));
232
+ group.addEventListener('dblclick', () => editNode(node));
233
+ viewport.append(group);
234
+ }
235
+ function centerText(value, x, y) {
236
+ const text = el('text', { x, y, textAnchor: 'middle' });
237
+ text.textContent = value;
238
+ return text;
239
+ }
240
+ function el(name, attrs) {
241
+ const node = document.createElementNS(ns, name);
242
+ for (const [key, value] of Object.entries(attrs)) {
243
+ node.setAttribute(key === 'markerEnd' ? 'marker-end' : key === 'textAnchor' ? 'text-anchor' : key, value);
244
+ }
245
+ return node;
246
+ }
247
+ function startDrag(event, node) {
248
+ event.preventDefault();
249
+ state.selected = node.id;
250
+ const start = toGraphPoint(event);
251
+ const ox = node.x || 0;
252
+ const oy = node.y || 0;
253
+ const move = e => {
254
+ const next = toGraphPoint(e);
255
+ node.x = ox + next.x - start.x;
256
+ node.y = oy + next.y - start.y;
257
+ render();
258
+ };
259
+ const up = () => {
260
+ window.removeEventListener('pointermove', move);
261
+ window.removeEventListener('pointerup', up);
262
+ };
263
+ window.addEventListener('pointermove', move);
264
+ window.addEventListener('pointerup', up);
265
+ render();
266
+ }
267
+ function toGraphPoint(event) {
268
+ const rect = svg.getBoundingClientRect();
269
+ return { x: (event.clientX - rect.left - state.tx) / state.scale, y: (event.clientY - rect.top - state.ty) / state.scale };
270
+ }
271
+ function editNode(node) {
272
+ const next = prompt('节点标签', node.label || node.id);
273
+ if (next !== null) {
274
+ node.label = next;
275
+ render();
276
+ }
277
+ }
278
+ function handleCommand(cmd) {
279
+ if (cmd.cmd === 'init') {
280
+ state.title = cmd.title || '交互式图表';
281
+ state.direction = cmd.direction || 'TB';
282
+ state.nodes.clear();
283
+ state.edges = [];
284
+ } else if (cmd.cmd === 'title') {
285
+ state.title = cmd.text || state.title;
286
+ } else if (cmd.cmd === 'node' || cmd.cmd === 'container') {
287
+ const id = cmd.id;
288
+ if (!id) return;
289
+ state.nodes.set(id, { ...state.nodes.get(id), ...cmd, id, type: cmd.cmd === 'container' ? 'container' : (cmd.type || 'process'), label: cmd.label || id });
290
+ } else if (cmd.cmd === 'edge') {
291
+ if (cmd.from && cmd.to) state.edges.push({ id: cmd.id || `${cmd.from}-${cmd.to}-${state.edges.length}`, ...cmd });
292
+ } else if (cmd.cmd === 'remove') {
293
+ state.nodes.delete(cmd.id);
294
+ state.edges = state.edges.filter(edge => edge.from !== cmd.id && edge.to !== cmd.id);
295
+ } else if (cmd.cmd === 'clear') {
296
+ state.nodes.clear();
297
+ state.edges = [];
298
+ } else if (cmd.cmd === 'layout') {
299
+ [...state.nodes.values()].forEach(node => { delete node.x; delete node.y; });
300
+ } else if (cmd.cmd === 'export') {
301
+ exportFile(cmd.format || 'json');
302
+ }
303
+ render();
304
+ }
305
+ async function restore() {
306
+ const response = await fetch(`/state?s=${encodeURIComponent(session)}`);
307
+ const commands = await response.json();
308
+ commands.forEach(handleCommand);
309
+ }
310
+ function connect() {
311
+ const events = new EventSource(`/events?s=${encodeURIComponent(session)}`);
312
+ events.onopen = () => setStatus('已连接');
313
+ events.onerror = () => setStatus('正在重连');
314
+ events.onmessage = event => handleCommand(JSON.parse(event.data));
315
+ }
316
+ function exportFile(format) {
317
+ if (format === 'svg') {
318
+ download('diagram.svg', new XMLSerializer().serializeToString(svg), 'image/svg+xml');
319
+ } else if (format === 'png') {
320
+ const image = new Image();
321
+ const data = new XMLSerializer().serializeToString(svg);
322
+ image.onload = () => {
323
+ const canvas = document.createElement('canvas');
324
+ canvas.width = svg.clientWidth * 2;
325
+ canvas.height = svg.clientHeight * 2;
326
+ const ctx = canvas.getContext('2d');
327
+ ctx.fillStyle = '#ffffff';
328
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
329
+ ctx.scale(2, 2);
330
+ ctx.drawImage(image, 0, 0);
331
+ downloadUrl('diagram.png', canvas.toDataURL('image/png'));
332
+ };
333
+ image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(data)}`;
334
+ } else {
335
+ const graph = { title: state.title, direction: state.direction, nodes: [...state.nodes.values()], edges: state.edges };
336
+ download('diagram.json', JSON.stringify(graph, null, 2), 'application/json');
337
+ }
338
+ }
339
+ function download(name, body, type) {
340
+ const url = URL.createObjectURL(new Blob([body], { type }));
341
+ downloadUrl(name, url);
342
+ setTimeout(() => URL.revokeObjectURL(url), 1000);
343
+ }
344
+ function downloadUrl(name, url) {
345
+ const a = document.createElement('a');
346
+ a.href = url;
347
+ a.download = name;
348
+ a.click();
349
+ }
350
+ document.querySelector('.toolbar').addEventListener('click', event => {
351
+ const action = event.target.dataset.action;
352
+ if (action === 'fit') { state.scale = 1; state.tx = 24; state.ty = 24; render(); }
353
+ if (action === 'zoom-in') { state.scale = Math.min(3, state.scale + 0.15); render(); }
354
+ if (action === 'zoom-out') { state.scale = Math.max(0.35, state.scale - 0.15); render(); }
355
+ if (action === 'export-svg') exportFile('svg');
356
+ if (action === 'export-png') exportFile('png');
357
+ if (action === 'export-json') exportFile('json');
358
+ });
359
+ window.addEventListener('keydown', event => {
360
+ if ((event.key === 'Delete' || event.key === 'Backspace') && state.selected) {
361
+ const id = state.selected;
362
+ state.nodes.delete(id);
363
+ state.edges = state.edges.filter(edge => edge.from !== id && edge.to !== id);
364
+ state.selected = null;
365
+ render();
366
+ }
367
+ });
368
+ restore().then(connect).catch(error => setStatus(error.message));
369
+ </script>
370
+ </body>
371
+ </html>
package/localized/zh-CN/skills/fec-image-generation/references/artifact-routing.md ADDED
@@ -0,0 +1,80 @@
1
+ # 产物路由
2
+
3
+ ## 模式选择
4
+
5
+ 编写提示词前先选择执行模式：
6
+
7
+ | 模式 | 适用场景 | 行为 |
8
+ | ---- | -------- | -------- |
9
+ | 确定性源文件 | 文本、标签、图表、连接线或精确几何必须正确 | 先构建 Mermaid、SVG、HTML/CSS、canvas、绘图或设计工具源文件，再导出 PNG。 |
10
+ | 宿主原生图像工具 | 任务需要位图审美、插画、产品氛围、照片感输出或图像编辑，且当前环境有图像工具 | 编写结构化提示词并调用宿主图像工具。若后续可能编辑，保存或报告提示词。 |
11
+ | 仅提示词建议 | 没有可用图像工具，或用户只想要提示词 | 输出最终提示词、使用说明和校验清单。不要暗示已经生成图片。 |
12
+ | 混合路线 | 同时需要精确文本或 UI 结构，以及生成图像 | 先生成辅助图像，再用 SVG、HTML、canvas 或设计工具组合最终文本/布局。 |
13
+
14
+ 不要把本地图像 API 脚本、供应商专属环境变量或 OpenAI-compatible 网关假设引入该工作流。如果项目已有这类管线，把它视为宿主工具，并保持提示词供应商中立。
15
+
16
+ ## 按输出路由
17
+
18
+ | 输出 | 首选路线 | 说明 |
19
+ | ------ | --------------- | ----- |
20
+ | 海报 / 广告创意 | 图像生成，然后可选用 HTML/SVG 或设计工具打磨布局 | 生成前锁定准确文案；文本准确性重要时，在位图外重新排版。 |
21
+ | UI 样机 | 优先 HTML/CSS 或设计工具样机；位图生成仅用于氛围或 hero 参考 | 保持控件可读，最终交接避免伪造产品状态。 |
22
+ | 产品图 | 带参考约束的图像生成或编辑 | 保留品牌、透视、材质和光照；不要覆盖原始资产。 |
23
+ | 信息图 | 文本和图表使用结构化 SVG/HTML/canvas；生成插画只作辅助媒体 | 布局 QA 后导出 PNG。 |
24
+ | 学术图 | 确定性绘图、SVG、Mermaid、LaTeX 或 canvas | 准确性优先于风格；保持源文件可复现。 |
25
+ | 漫画 / 分镜 | 带分镜清单的图像生成 | 跟踪分镜数量、准确字幕、角色、场景连续性和阅读顺序。 |
26
+ | 头像 | 图像生成或编辑 | 仅在身份、风格或使用权不明确时提问。 |
27
+ | 品牌板 | 混合路线：生成图像，并用 HTML/SVG 制作色板/字体/布局板 | 记录色彩角色、字体气质、图像规则和避免清单。 |
28
+ | 图像编辑 | 编辑目标加明确不变量 | 保留用户要求的身份、构图、文本、对象、光照或背景约束。 |
29
+
30
+ ## 视觉资产类别
31
+
32
+ 使用这些类别选择提示词细节和校验重点：
33
+
34
+ - 产品与商业：产品图、包装、生活方式场景、市场展示板。
35
+ - UI 与界面：应用样机、聊天场景、仪表盘视图、落地页 hero、社交帖子。
36
+ - 技术与学术：架构、序列、状态、ER、方法图、图形摘要。
37
+ - 叙事与品牌：海报、活动主视觉、分镜、漫画、头像、吉祥物、品牌板。
38
+ - 信息设计：信息图、地图、对比、分步指南、KPI 看板。
39
+ - 编辑：背景替换、对象移除、局部替换、修饰、人像编辑。
40
+
41
+ 如果类别偏文本或图表密集，优先使用确定性源文件或混合路线。
42
+
43
+ ## 提示词契约
44
+
45
+ 调用图像工具时使用这个紧凑结构：
46
+
47
+ ```text
48
+ 资产类型：
49
+ 用途：
50
+ 画布 / 宽高比：
51
+ 受众：
52
+ 必需文本：
53
+ 主体：
54
+ 构图：
55
+ 风格 / 品牌调性：
56
+ 参考资产：
57
+ 必须保留：
58
+ 避免：
59
+ 输出：
60
+ ```
61
+
62
+ 精确文本优先在图像生成后通过 SVG/HTML/设计源文件添加。如果文本必须出现在生成图像内，保持简短并人工核验。
63
+
64
+ 图像编辑时补充：
65
+
66
+ ```text
67
+ 源图像：
68
+ 编辑区域：
69
+ 不变量：
70
+ 替换内容：
71
+ 光照 / 透视：
72
+ ```
73
+
74
+ ## 交接检查清单
75
+
76
+ - 项目绑定资产的最终图片路径位于 workspace 内。
77
+ - 未来可能编辑时，保存源文件或提示词。
78
+ - 手动检查精确文本、图表标签、图表数值、引用和品牌标识。
79
+ - 被拒绝的生成变体不应被代码或文档引用。
80
+ - 如果没有生成图片，最终答复应明确说明是仅提示词模式。
package/localized/zh-CN/skills/fec-image-generation/references/diagram-workflows.md ADDED
@@ -0,0 +1,74 @@
1
+ # 图表工作流
2
+
3
+ ## 事实源选择
4
+
5
+ | 图表类型 | 首选源 | QA 重点 |
6
+ | ------------ | ---------------- | -------- |
7
+ | ER 图 | Mermaid ER、DBML、Graphviz、SVG | 基数标签、表名、关键字段、交叉关系。 |
8
+ | UML 类图 | Mermaid class、PlantUML、Graphviz | 继承方向、方法/属性换行、包分组。 |
9
+ | 序列图 | Mermaid sequence、PlantUML | lifeline 顺序、activation 范围、异步/返回箭头、消息文本。 |
10
+ | 技术架构 | HTML `architecture` IR、Mermaid flowchart、C4/Structurizr、SVG/HTML、draw.io | 分层分组、信任边界、数据流方向、图例。 |
11
+ | Agent / memory 架构 | 带语义节点类型和 flow 连线的 HTML `architecture` IR、SVG/HTML、draw.io | read/write 路径分离、tool-call 回路、memory 分层、retrieval 标签、flow legend。 |
12
+ | ML / 深度学习 | SVG/HTML/canvas | tensor shape、层顺序、分支汇合、重复块、注释。 |
13
+ | 流程图 / 流程工作流 | HTML `workflow` IR、Mermaid flowchart、SVG、draw.io | 决策标签、终止状态、回环可读性、连接线间距、异常路径清晰度。 |
14
+ | 会话实时草图 | 本地交互式浏览器服务 | 增量呈现、session 隔离、拖拽后的标签可读性、导出交接。 |
15
+
16
+ ## 交互式实时图表
17
+
18
+ 当图表本身是对话的一部分，并且用户能从“边生成边看见结构出现”中受益时，使用实时路线。它适合流程草图、架构初稿、简短思维导图式拆解，以及需要先拖拽或改标签再导出的快速讲解图。
19
+
20
+ 启动本地服务：
21
+
22
+ ```bash
23
+ node skills/fec-image-generation/scripts/interactive-diagram-server.mjs --port 6100
24
+ ```
25
+
26
+ 打开 `http://127.0.0.1:6100/?s=meaningful-session-id`，再向 `/cmd?s=meaningful-session-id` 发送命令。每张图都必须使用唯一 session id。先发送 `init`，再添加节点，最后添加连线；每条命令尽量小，让浏览器能持续增量更新。
27
+
28
+ 支持的命令包括 `init`、`node`、`edge`、`container`、`remove`、`clear`、`layout`、`title` 和 `export`。支持的节点类型包括 `terminal`、`terminal-end`、`process`、`decision`、`service`、`database`、`success`、`error` 和 `container`。
29
+
30
+ 服务端导出可用 `/export?s=session-id&format=json`、`svg` 或 `drawio`。PNG 导出使用浏览器工具栏。如果本地服务无法启动，不要阻塞用户，改用 Mermaid、SVG 或 HTML technical diagrams。
31
+
32
+ ## 最小源清单
33
+
34
+ 渲染路径允许时，在 PNG 旁保存布局 manifest：
35
+
36
+ ```json
37
+ {
38
+ "canvas": { "width": 1280, "height": 720 },
39
+ "boxes": [
40
+ { "id": "api", "x": 80, "y": 120, "width": 220, "height": 96, "label": "API Gateway" }
41
+ ],
42
+ "connectors": [
43
+ { "id": "api-db", "from": "api", "to": "db", "points": [[300, 168], [560, 168]] }
44
+ ]
45
+ }
46
+ ```
47
+
48
+ 坐标是导出后的 PNG 像素坐标。boxes 应覆盖可见标签/节点边界，而不仅是中心点。
49
+
50
+ ## 图表修复手册
51
+
52
+ - **节点重叠：** 增加 rank/列间距、拆分簇，或将低优先级注释移入图例。
53
+ - **标签截断：** 加宽节点、添加手动换行、缩短标签，或提高导出倍率。
54
+ - **连接线穿过标签：** 添加 waypoints、沿框体周围正交布线，或将标签移到线段上方。
55
+ - **连接线堆叠：** 用不同 waypoints 分离平行边，或用带共享标签的 bus 汇总。
56
+ - **边缘裁剪：** 增加外边距，或扩大导出 viewBox/canvas 尺寸。
57
+ - **密集图不可读：** 拆成总览图加细节图，不要整体缩小。
58
+ - **箭头含义不清：** 添加 `flow` 和简短标签，不要只依赖颜色。
59
+
60
+ ## 架构图
61
+
62
+ 用户需要浏览器可打开的单文件、显式系统拓扑、分组、信任边界、数据流和 PNG QA 时，优先使用 HTML `architecture` IR。需要官方厂商图形、diagrams.net 编辑或长期人工维护时，使用 draw.io。希望图主要留在 Markdown 或纯文本技术文档中时，使用 Mermaid/C4。
63
+
64
+ Agent、memory、RAG、tool-call 或 multi-agent 图中，如果形状能帮助解释系统，优先使用语义 architecture 节点类型：`agent`、`model`、`memory`、`vectorstore`、`graphdb`、`tool`、`document`、`queue`、`browser`、`user`、`gateway`。使用 `flow` 值 `control`、`data`、`read`、`write`、`async`、`feedback` 区分读取路径、写入路径、事件和推理回路。先把结构画清楚，再添加 `visual.style`。
65
+
66
+ UML 覆盖优先走确定性源：class、ER、state-machine、activity 和 sequence 需求可使用 Mermaid、PlantUML、HTML technical diagrams、SVG 或 draw.io。需要后续人工编辑或官方记法库时优先 draw.io；需要浏览器可打开交付和 PNG QA 时优先 HTML/SVG。
67
+
68
+ ## 流程工作流
69
+
70
+ 用户需要浏览器可打开的流程地图、审批流、自动化 runbook、事故流程或循环运营流程，并且需要泳道、步骤编号、参与者、决策、异常路径和摘要卡片时，优先使用 HTML `workflow` IR。流程必须作为 `.drawio` 文件长期维护、需要 diagrams.net 编辑、官方形状库、手工泳道维护或交付后由利益相关方继续修改时，改用 `fec-drawio-studio`。
71
+
72
+ ## 导出指引
73
+
74
+ 位图 PNG 优先以 2x 倍率导出；只有在文字仍清晰时才下采样。凡是未来可能修改图表的地方，都应提交或附上可编辑源文件。