@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/skills/fec-image-generation/assets/interactive-diagram.html ADDED
@@ -0,0 +1,371 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>frontend-craft Interactive Diagram</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">Interactive Diagram</h1>
84
+ <div class="toolbar">
85
+ <button type="button" data-action="fit">Fit</button>
86
+ <button type="button" data-action="zoom-in">Zoom In</button>
87
+ <button type="button" data-action="zoom-out">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">Connecting</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: 'Interactive Diagram', 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} nodes, ${state.edges.length} edges`);
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.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 || 'Interactive Diagram';
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('connected');
313
+ events.onerror = () => setStatus('reconnecting');
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/skills/fec-image-generation/references/diagram-workflows.md CHANGED
@@ -7,9 +7,27 @@
7
7
  | ER diagram | Mermaid ER, DBML, Graphviz, SVG | Cardinality labels, table names, key fields, crossing relations. |
8
8
  | UML class | Mermaid class, PlantUML, Graphviz | Inheritance direction, method/property wrapping, package grouping. |
9
9
  | Sequence | Mermaid sequence, PlantUML | Lifeline order, activation spans, async/return arrows, message text. |
10
- | Technical architecture | Mermaid flowchart, C4/Structurizr, SVG/HTML | Layer grouping, trust boundaries, data flow direction, legends. |
10
+ | Technical architecture | HTML `architecture` IR, Mermaid flowchart, C4/Structurizr, SVG/HTML, draw.io | Layer grouping, trust boundaries, data flow direction, legends. |
11
+ | Agent / memory architecture | HTML `architecture` IR with semantic node types and flow arrows, SVG/HTML, draw.io | Read/write path separation, tool-call loops, memory tiers, retrieval labels, flow legend. |
11
12
  | ML / deep learning | SVG/HTML/canvas | Tensor shapes, layer order, branch joins, repeated blocks, annotations. |
12
- | Flowchart | Mermaid flowchart, SVG | Decision labels, terminal states, loop-back readability, connector spacing. |
13
+ | Flowchart / process workflow | HTML `workflow` IR, Mermaid flowchart, SVG, draw.io | Decision labels, terminal states, loop-back readability, connector spacing, exception path clarity. |
14
+ | Live session sketch | Interactive local browser server | Incremental reveal, session isolation, readable labels after manual dragging, export handoff. |
15
+
16
+ ## Interactive live diagrams
17
+
18
+ Use the live route when the diagram is part of the conversation and the user benefits from seeing structure appear as it is generated. It is best for flow sketches, architecture drafts, short mind-map-like decompositions, and quick walkthroughs that may be dragged or relabeled before export.
19
+
20
+ Run the local server with:
21
+
22
+ ```bash
23
+ node skills/fec-image-generation/scripts/interactive-diagram-server.mjs --port 6100
24
+ ```
25
+
26
+ Open `http://127.0.0.1:6100/?s=meaningful-session-id`, then send commands to `/cmd?s=meaningful-session-id`. Always use a unique session id for each diagram. Start with `init`, add nodes before edges, and keep each command small enough that the browser can update incrementally.
27
+
28
+ Supported commands are `init`, `node`, `edge`, `container`, `remove`, `clear`, `layout`, `title`, and `export`. Supported node types are `terminal`, `terminal-end`, `process`, `decision`, `service`, `database`, `success`, `error`, and `container`.
29
+
30
+ Use `/export?s=session-id&format=json`, `svg`, or `drawio` for server-side source handoff. Use the browser toolbar for PNG export. If the local server cannot start, use Mermaid, SVG, or HTML technical diagrams instead of blocking the user.
13
31
 
14
32
  ## Minimum source manifest
15
33
 
@@ -37,6 +55,19 @@ Coordinates are PNG pixel coordinates after export. Boxes should cover visible l
37
55
  - **Connector stacking:** separate parallel edges with different waypoints or bundle them with a shared labeled bus.
38
56
  - **Edge clipping:** increase outer padding or export viewBox/canvas size.
39
57
  - **Unreadable dense graph:** split into overview plus detail diagrams instead of shrinking everything.
58
+ - **Ambiguous arrow meaning:** add `flow` and a concise label rather than relying on color alone.
59
+
60
+ ## Architecture diagrams
61
+
62
+ Use HTML `architecture` IR when the user wants a browser-ready single file with explicit system topology, groups, trust boundaries, data flows, and PNG QA. Use draw.io when the diagram must preserve official vendor shapes, diagrams.net editing, or long-term manual ownership. Use Mermaid/C4 when the diagram should live primarily in Markdown or text documentation.
63
+
64
+ For agent, memory, RAG, tool-call, or multi-agent diagrams, use semantic architecture node types (`agent`, `model`, `memory`, `vectorstore`, `graphdb`, `tool`, `document`, `queue`, `browser`, `user`, `gateway`) instead of generic boxes when the shape helps explain the system. Use `flow` values (`control`, `data`, `read`, `write`, `async`, `feedback`) so read paths, write paths, events, and reasoning loops are visually distinct. Add `visual.style` only after the structure is clear.
65
+
66
+ For UML coverage, route class, ER, state-machine, activity, and sequence needs to deterministic sources first: Mermaid, PlantUML, HTML technical diagrams, SVG, or draw.io. Prefer draw.io when future manual editing or official notation libraries matter; prefer HTML/SVG when browser-ready handoff and PNG QA matter.
67
+
68
+ ## Process workflows
69
+
70
+ Use HTML `workflow` IR when the user wants a browser-ready process map, approval flow, automation runbook, incident workflow, or cyclical operating loop with lanes, numbered steps, actors, decisions, exception paths, and summary cards. Use `fec-drawio-studio` instead when the workflow must remain a `.drawio` file for diagrams.net editing, official shape libraries, manual swimlane maintenance, or stakeholder edits after handoff.
40
71
 
41
72
  ## Export guidance
42
73
 
package/skills/fec-image-generation/references/html-technical-diagrams.md ADDED
@@ -0,0 +1,236 @@
1
+ # HTML Technical Diagrams
2
+
3
+ Use this route when a technical diagram should be easy to open in a browser, share as one file, switch dark/light themes, and export from the browser after visual QA.
4
+
5
+ This route complements, but does not replace, other diagram sources:
6
+
7
+ | Need | Prefer |
8
+ | ---- | ------ |
9
+ | Small markdown-maintained diagram | Mermaid, Graphviz, or SVG |
10
+ | Editable source for future manual changes | `fec-drawio-studio` and `.drawio` |
11
+ | Browser-ready themed technical diagram | HTML technical diagram route |
12
+ | Raster-first visual, poster, concept art, or image edit | Image generation or editing route |
13
+
14
+ ## Supported Diagram Intents
15
+
16
+ - `architecture`: system topology, system blueprints, deployment topology, cloud regions, trust boundaries, clients, gateways, services, data stores, event buses, auth flows, agent runtime maps, memory or recall overview diagrams, before/after architecture comparisons, and infrastructure overview diagrams.
17
+ - `workflow`: ownership lanes, process maps, approval gates, automation runs, exception paths, cyclical loops, runbooks, CI/CD, incident response, tool calls, and request lifecycles.
18
+ - `sequence`: participants over time, API call chains, cache fallback, auth checks, async traces, and return messages.
19
+ - `dataflow`: sources, ingest, processing, storage, consumers, PII boundaries, governance, analytics, and lineage.
20
+ - `lifecycle`: object states, terminal states, retries, waits, cancellation, timeout, deployment or order status transitions.
21
+
22
+ Use the `architecture` mode for browser-ready overview diagrams with explicit coordinates. Use `fec-drawio-studio` instead when the priority is `.drawio` source, official vendor icons, diagrams.net manual editing, or complex auto-layout.
23
+
24
+ ## Themed Semantic Diagrams
25
+
26
+ Use `visual.style` when the same JSON source needs a clearer delivery tone without changing its model: `default`, `terminal`, `blueprint`, `minimal`, `glass`, `warm`, `openai`, or `editorial-dark`.
27
+
28
+ For agent, memory, and AI workflow maps, prefer architecture nodes with semantic `type` values:
29
+
30
+ - Actors and entry points: `user`, `browser`, `gateway`.
31
+ - Intelligence and orchestration: `agent`, `model`, `tool`.
32
+ - Memory and knowledge: `memory`, `vectorstore`, `graphdb`, `document`.
33
+ - Runtime movement: `queue`, `messagebus`, `backend`, `external`.
34
+
35
+ Use connection `flow` values when arrows need meaning beyond visual direction:
36
+
37
+ - `control`: orchestration, policy, trigger, or command.
38
+ - `data`: request payloads, documents, embeddings, facts, or responses.
39
+ - `read`: retrieval from memory or stores.
40
+ - `write`: persistence, indexing, notes, or memory updates.
41
+ - `async`: evented or queued work.
42
+ - `feedback`: loops, retries, refinement, or reasoning cycles.
43
+
44
+ When two or more flow types are present, the renderer emits a flow legend automatically. Keep arrow labels short and use `waypoints` to route around dense groups, title labels, and node interiors.
45
+
46
+ ## System Blueprint Workflow
47
+
48
+ Use the architecture route for presentation-ready system blueprints, deployment topology, integration maps, agent runtime views, memory or recall maps, and before/after architecture comparisons. First extract a compact system model, then draw:
49
+
50
+ - Entry surfaces: browsers, mobile clients, CLIs, webhooks, schedulers, or agent/session entry points.
51
+ - Application layer: gateways, frontend apps, backend services, workers, orchestration, runtime hosts, and tool adapters.
52
+ - Data layer: databases, object stores, caches, vector stores, queues, event buses, logs, and analytics stores.
53
+ - External dependencies: identity providers, AI models, payment/email services, SaaS APIs, cloud services, design tools, or runtime connectors.
54
+ - Identity and trust boundaries: auth, permissions, PII zones, tenant boundaries, private networks, secret stores, and policy checks.
55
+ - Key flows: request/control flow, data flow, event flow, deployment flow, recall/memory flow, or before/after migration flow.
56
+
57
+ Keep the first blueprint readable:
58
+
59
+ - Show 4-10 primary nodes and collapse low-value files, classes, or endpoints into grouped nodes.
60
+ - Use 1-3 group boundaries for layers, trust zones, runtime environments, or ownership domains.
61
+ - Include a short title and subtitle that work when the file is shared outside the original conversation.
62
+ - Use a legend or up to three summary cards for runtime, data, trust, risks, inputs, or outcomes.
63
+ - Prefer semantic color roles over decorative styling, and split into multiple diagrams when connectors or labels become dense.
64
+
65
+ For README or stakeholder handoff, keep the JSON IR and HTML as the editable source, then export SVG/PNG/JPG artifacts:
66
+
67
+ ```bash
68
+ node skills/fec-image-generation/scripts/export-diagram.mjs --input docs/architecture/system-blueprint.html --format svg
69
+ node skills/fec-image-generation/scripts/export-diagram.mjs --input docs/architecture/system-blueprint.html --format png --scale 2
70
+ ```
71
+
72
+ Raster export uses an existing Chromium-family browser when available. If the environment cannot rasterize SVG, deliver the generated HTML/SVG and state that PNG/JPG export needs a local browser.
73
+
74
+ ## JSON IR
75
+
76
+ All modes require:
77
+
78
+ ```json
79
+ {
80
+ "schema_version": 1,
81
+ "diagram_type": "workflow",
82
+ "meta": {
83
+ "title": "Release Workflow",
84
+ "subtitle": "PR to production"
85
+ }
86
+ }
87
+ ```
88
+
89
+ Mode-specific minimum fields:
90
+
91
+ - `architecture`: `nodes`, `connections`; optional `groups`, `legend`, and `summary`.
92
+ - `workflow`: `lanes`, `nodes`, `edges`; optional `summary`.
93
+ - `sequence`: `participants`, `messages`.
94
+ - `dataflow`: `stages`, `nodes`, `flows`.
95
+ - `lifecycle`: `lanes`, `states`, `transitions`.
96
+
97
+ IDs must start with a letter and use only letters, numbers, `_`, and `-`. Keep labels short enough to read inside nodes; put long explanation in surrounding prose instead of the diagram.
98
+
99
+ ## Process Workflow IR
100
+
101
+ Workflow mode is for ordered processes where ownership, decisions, branches, and loop-backs matter more than exact infrastructure topology. Use lanes for actors or systems, nodes for steps, and edges for outcomes. Nodes still support explicit `col` placement so authors can control reading order without relying on a hidden auto-layout engine.
102
+
103
+ ```json
104
+ {
105
+ "schema_version": 1,
106
+ "diagram_type": "workflow",
107
+ "meta": {
108
+ "title": "Procurement Approval",
109
+ "subtitle": "Request to payment"
110
+ },
111
+ "lanes": [
112
+ { "id": "requester", "label": "Requester" },
113
+ { "id": "system", "label": "System" },
114
+ { "id": "manager", "label": "Manager" }
115
+ ],
116
+ "nodes": [
117
+ { "id": "start", "lane": "requester", "col": 0, "type": "start", "label": "Submit Request", "actor": "Employee" },
118
+ { "id": "classify", "lane": "system", "col": 1, "type": "active", "label": "Classify Spend", "actor": "Policy Engine", "sublabel": "auto rules" },
119
+ { "id": "review", "lane": "manager", "col": 2, "type": "decision", "label": "Approved?", "step": "A" },
120
+ { "id": "pay", "lane": "system", "col": 3, "type": "success", "label": "Issue Payment" },
121
+ { "id": "reject", "lane": "requester", "col": 3, "type": "failure", "label": "Return Request" }
122
+ ],
123
+ "edges": [
124
+ { "from": "start", "to": "classify", "label": "intake", "variant": "emphasis" },
125
+ { "from": "classify", "to": "review", "label": "policy result" },
126
+ { "from": "review", "to": "pay", "label": "yes", "variant": "emphasis" },
127
+ { "from": "review", "to": "reject", "label": "no", "variant": "return", "waypoints": [[650, 396], [520, 396]] }
128
+ ],
129
+ "summary": [
130
+ { "title": "Inputs", "type": "active", "items": ["Purchase request", "Policy threshold"] },
131
+ { "title": "Outcomes", "type": "success", "items": ["Payment issued", "Requester notified"] }
132
+ ]
133
+ }
134
+ ```
135
+
136
+ Workflow node fields:
137
+
138
+ - `type`: use `start`, `active`, `waiting`, `decision`, `success`, `failure`, or `external` for process semantics.
139
+ - `actor`: optional short owner or system label above the node.
140
+ - `step`: optional displayed step marker. If omitted, workflow nodes receive sequential markers automatically.
141
+ - `sublabel`, `width`, `height`, and `yOffset`: optional readability adjustments for dense lanes.
142
+
143
+ Workflow edge fields:
144
+
145
+ - `variant`: use `emphasis` for happy paths, `return` or `dashed` for loop-backs and rework, and `security` only for trust or policy checks.
146
+ - `waypoints`: optional `[x, y]` points for exception paths, cross-row links, or loops that should avoid labels and nodes.
147
+
148
+ Use `summary` for compact process metadata such as prerequisites, inputs/outputs, or tools. Keep long explanations outside the SVG so labels remain readable.
149
+
150
+ ## Architecture IR
151
+
152
+ Architecture mode uses explicit coordinates because system diagrams often need intentional placement, boundaries, and trust zones:
153
+
154
+ ```json
155
+ {
156
+ "schema_version": 1,
157
+ "diagram_type": "architecture",
158
+ "meta": {
159
+ "title": "SaaS Architecture",
160
+ "subtitle": "Browser-ready infrastructure overview"
161
+ },
162
+ "visual": {
163
+ "style": "blueprint"
164
+ },
165
+ "groups": [
166
+ { "id": "cloud", "label": "Cloud region", "type": "cloud", "x": 170, "y": 50, "width": 620, "height": 280 }
167
+ ],
168
+ "nodes": [
169
+ { "id": "web", "label": "Web App", "type": "frontend", "x": 48, "y": 160, "sublabel": "React" },
170
+ { "id": "api", "label": "API Gateway", "type": "cloud", "x": 230, "y": 160, "group": "cloud" },
171
+ { "id": "svc", "label": "App Service", "type": "backend", "x": 420, "y": 160, "group": "cloud" },
172
+ { "id": "db", "label": "PostgreSQL", "type": "database", "x": 620, "y": 160, "group": "cloud" }
173
+ ],
174
+ "connections": [
175
+ { "from": "web", "to": "api", "label": "HTTPS", "variant": "emphasis" },
176
+ { "from": "api", "to": "svc", "label": "REST" },
177
+ { "from": "svc", "to": "db", "label": "SQL" }
178
+ ],
179
+ "summary": [
180
+ { "title": "Runtime", "type": "backend", "items": ["API and worker services", "Managed relational data"] }
181
+ ]
182
+ }
183
+ ```
184
+
185
+ Supported node and group types include `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, `external`, `agent`, `model`, `memory`, `vectorstore`, `graphdb`, `tool`, `document`, `queue`, `browser`, `user`, and `gateway`. Connections support the standard variants `default`, `emphasis`, `security`, `dashed`, and `return`; architecture connections may also include `flow`. Add `waypoints` as `[[x, y], ...]` when a connection needs to route around boundaries or labels.
186
+
187
+ Architecture output includes an automatic legend unless `legend` is set to `false`. A custom legend can be supplied as `{ "label": "...", "type": "..." }` items. `summary` renders up to three cards below the SVG and is not included in the layout manifest, so PNG QA focuses on the diagram itself.
188
+
189
+ ## Architecture Layout Rules
190
+
191
+ - Draw groups as broad boundaries around components, not as decorative panels.
192
+ - Keep legends below or outside all boundaries; increase the coordinates and view area rather than squeezing content.
193
+ - Use `messagebus` nodes for event buses and place them in the gap between services.
194
+ - Use `security` connections for auth, token, policy, or trust-boundary flows.
195
+ - Prefer `waypoints` over dense crossing lines when gateways fan out to several services.
196
+ - Split the diagram when the overview needs more than one dense cluster or when label readability depends on shrinking text.
197
+
198
+ ## Render Command
199
+
200
+ ```bash
201
+ node skills/fec-image-generation/scripts/tech-diagram-render.mjs \
202
+ --input diagram.json \
203
+ --output diagram.html \
204
+ --type architecture \
205
+ --manifest diagram.layout.json
206
+ ```
207
+
208
+ The generated HTML is self-contained and includes:
209
+
210
+ - Inline SVG.
211
+ - CSS-variable dark/light theme.
212
+ - Browser controls for theme toggle, SVG download, and print/PDF.
213
+ - Optional layout manifest for PNG QA.
214
+
215
+ ## QA and Repair
216
+
217
+ After exporting a PNG from the browser, run:
218
+
219
+ ```bash
220
+ node skills/fec-image-generation/scripts/png-qa.mjs \
221
+ --png diagram.png \
222
+ --manifest diagram.layout.json \
223
+ --format markdown
224
+ ```
225
+
226
+ Repair the source JSON or rendering dimensions rather than editing pixels:
227
+
228
+ - Overlap: split dense lanes or add rows/lanes/stages.
229
+ - Truncated label: shorten labels, add `sublabel`, or widen nodes.
230
+ - Connector through label: reduce edge labels or separate nearby nodes.
231
+ - Dense flow: split into overview and detail diagrams.
232
+ - Edge clipping: increase output space or simplify the path.
233
+
234
+ ## Delivery Notes
235
+
236
+ Deliver the `.html` source together with any exported SVG/PNG/JPG requested by the user. Report the route used, source file, exported file, QA result, and any naming or domain assumptions that still need human confirmation.