@bovinphang/frontend-craft 2.6.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 (414) hide show
  1. package/.claude-plugin/marketplace.json +3 -3
  2. package/.claude-plugin/plugin.json +1 -1
  3. package/CHANGELOG.md +72 -1
  4. package/CHANGELOG.zh-CN.md +71 -1
  5. package/README.md +10 -6
  6. package/README.openclaw.md +100 -42
  7. package/README.openclaw.zh-CN.md +100 -42
  8. package/README.zh-CN.md +10 -6
  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 +88 -88
  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 +84 -69
  32. package/docs/ja-JP/README.md +56 -52
  33. package/docs/ko-KR/README.md +45 -41
  34. package/docs/project-structure.md +19 -7
  35. package/docs/superpowers/plans/2026-05-29-fec-debug.md +491 -0
  36. package/docs/superpowers/specs/2026-05-29-fec-debug-design.md +340 -0
  37. package/docs/zh-CN/example-prompts.md +84 -69
  38. package/docs/zh-CN/project-structure.md +14 -5
  39. package/docs/zh-TW/README.md +33 -29
  40. package/localized/zh-CN/agents/fec-architect.md +125 -0
  41. package/localized/zh-CN/agents/fec-code-reviewer.md +152 -0
  42. package/localized/zh-CN/agents/fec-debugger.md +44 -0
  43. package/localized/zh-CN/agents/fec-design-token-mapper.md +75 -0
  44. package/localized/zh-CN/agents/fec-doc-updater.md +30 -0
  45. package/localized/zh-CN/agents/fec-e2e-runner.md +107 -0
  46. package/localized/zh-CN/agents/fec-figma-implementer.md +104 -0
  47. package/localized/zh-CN/agents/fec-performance-optimizer.md +293 -0
  48. package/localized/zh-CN/agents/fec-refactor-cleaner.md +32 -0
  49. package/localized/zh-CN/agents/fec-security-reviewer.md +116 -0
  50. package/localized/zh-CN/agents/fec-test-planner.md +50 -0
  51. package/localized/zh-CN/agents/fec-typescript-reviewer.md +142 -0
  52. package/localized/zh-CN/agents/fec-ui-checker.md +120 -0
  53. package/localized/zh-CN/commands/fec-debug.md +30 -0
  54. package/localized/zh-CN/commands/fec-doc-sync.md +19 -0
  55. package/localized/zh-CN/commands/fec-init.md +70 -0
  56. package/localized/zh-CN/commands/fec-plan.md +94 -0
  57. package/localized/zh-CN/commands/fec-refactor-clean.md +19 -0
  58. package/localized/zh-CN/commands/fec-review.md +66 -0
  59. package/localized/zh-CN/commands/fec-scaffold.md +205 -0
  60. package/localized/zh-CN/commands/fec-tdd.md +21 -0
  61. package/localized/zh-CN/skills/TEMPLATE.md +155 -0
  62. package/localized/zh-CN/skills/eval_queries.json +1013 -0
  63. package/localized/zh-CN/skills/fec-accessibility-check/SKILL.md +39 -0
  64. package/localized/zh-CN/skills/fec-accessibility-check/references/report-template.md +23 -0
  65. package/localized/zh-CN/skills/fec-accessibility-check/references/screen-reader-testing.md +33 -0
  66. package/localized/zh-CN/skills/fec-alchemy/SKILL.md +74 -0
  67. package/localized/zh-CN/skills/fec-alchemy/assets/absorption-plan-template.md +47 -0
  68. package/localized/zh-CN/skills/fec-alchemy/assets/intake-template.md +55 -0
  69. package/localized/zh-CN/skills/fec-alchemy/assets/review-checklist.md +31 -0
  70. package/localized/zh-CN/skills/fec-alchemy/references/methodology.md +94 -0
  71. package/localized/zh-CN/skills/fec-alchemy/references/originality-and-licensing.md +57 -0
  72. package/localized/zh-CN/skills/fec-api-integration/SKILL.md +78 -0
  73. package/localized/zh-CN/skills/fec-api-integration/references/integration-patterns.md +80 -0
  74. package/localized/zh-CN/skills/fec-backend-requirements-handoff/SKILL.md +45 -0
  75. package/localized/zh-CN/skills/fec-browser-storage/SKILL.md +34 -0
  76. package/localized/zh-CN/skills/fec-browser-storage/references/storage-patterns.md +65 -0
  77. package/localized/zh-CN/skills/fec-canvas-threejs/SKILL.md +66 -0
  78. package/localized/zh-CN/skills/fec-canvas-threejs/references/rendering-patterns.md +67 -0
  79. package/localized/zh-CN/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +67 -0
  80. package/localized/zh-CN/skills/fec-code-review/SKILL.md +143 -0
  81. package/localized/zh-CN/skills/fec-code-review/references/report-template.md +29 -0
  82. package/localized/zh-CN/skills/fec-component-testing/SKILL.md +119 -0
  83. package/localized/zh-CN/skills/fec-data-fetching/SKILL.md +62 -0
  84. package/localized/zh-CN/skills/fec-data-fetching/references/query-patterns.md +103 -0
  85. package/localized/zh-CN/skills/fec-debug-framework/SKILL.md +157 -0
  86. package/localized/zh-CN/skills/fec-debug-framework/references/report-template.md +58 -0
  87. package/localized/zh-CN/skills/fec-dependency-upgrade/SKILL.md +34 -0
  88. package/localized/zh-CN/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +56 -0
  89. package/localized/zh-CN/skills/fec-doc-sync/SKILL.md +39 -0
  90. package/localized/zh-CN/skills/fec-drawio-studio/SKILL.md +73 -0
  91. package/localized/zh-CN/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +10 -0
  92. package/localized/zh-CN/skills/fec-drawio-studio/data/brand-icons.json +878 -0
  93. package/localized/zh-CN/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  94. package/localized/zh-CN/skills/fec-drawio-studio/references/data-residency.md +27 -0
  95. package/localized/zh-CN/skills/fec-drawio-studio/references/diagram-patterns.md +60 -0
  96. package/localized/zh-CN/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  97. package/localized/zh-CN/skills/fec-drawio-studio/references/layout-and-export.md +72 -0
  98. package/localized/zh-CN/skills/fec-drawio-studio/references/troubleshooting.md +29 -0
  99. package/localized/zh-CN/skills/fec-drawio-studio/references/xml-and-mermaid.md +58 -0
  100. package/localized/zh-CN/skills/fec-drawio-studio/scripts/brand-symbols.mjs +99 -0
  101. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-lint.mjs +205 -0
  102. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-url.mjs +102 -0
  103. package/localized/zh-CN/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  104. package/localized/zh-CN/skills/fec-drawio-studio/scripts/layout-graph.mjs +107 -0
  105. package/localized/zh-CN/skills/fec-drawio-studio/scripts/png-embed-fix.mjs +26 -0
  106. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-go-packages.mjs +36 -0
  107. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-js-modules.mjs +52 -0
  108. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-classes.mjs +30 -0
  109. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-modules.mjs +55 -0
  110. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-rust-modules.mjs +35 -0
  111. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-ts-modules.mjs +7 -0
  112. package/localized/zh-CN/skills/fec-drawio-studio/scripts/shape-query.mjs +121 -0
  113. package/localized/zh-CN/skills/fec-drawio-studio/scripts/studio-core.mjs +139 -0
  114. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/corporate.json +49 -0
  115. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/default.json +49 -0
  116. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/handdrawn.json +49 -0
  117. package/localized/zh-CN/skills/fec-drawio-studio/styles/schema.json +112 -0
  118. package/localized/zh-CN/skills/fec-e2e-testing/SKILL.md +42 -0
  119. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-ci-reporting.md +62 -0
  120. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-special-scenarios.md +52 -0
  121. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-visual-regression.md +60 -0
  122. package/localized/zh-CN/skills/fec-e2e-testing/references/playwright-patterns.md +95 -0
  123. package/localized/zh-CN/skills/fec-form-handling/SKILL.md +76 -0
  124. package/localized/zh-CN/skills/fec-form-handling/references/advanced-form-patterns.md +101 -0
  125. package/localized/zh-CN/skills/fec-image-generation/SKILL.md +80 -0
  126. package/localized/zh-CN/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  127. package/localized/zh-CN/skills/fec-image-generation/references/artifact-routing.md +80 -0
  128. package/localized/zh-CN/skills/fec-image-generation/references/diagram-workflows.md +74 -0
  129. package/localized/zh-CN/skills/fec-image-generation/references/html-technical-diagrams.md +236 -0
  130. package/localized/zh-CN/skills/fec-image-generation/references/png-qa-autofix.md +30 -0
  131. package/localized/zh-CN/skills/fec-image-generation/scripts/export-diagram.mjs +364 -0
  132. package/localized/zh-CN/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  133. package/localized/zh-CN/skills/fec-image-generation/scripts/png-qa.mjs +431 -0
  134. package/localized/zh-CN/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1397 -0
  135. package/localized/zh-CN/skills/fec-implement-from-design/SKILL.md +129 -0
  136. package/localized/zh-CN/skills/fec-implement-from-design/references/design-plan-template.md +36 -0
  137. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/SKILL.md +46 -0
  138. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +110 -0
  139. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +41 -0
  140. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +48 -0
  141. package/localized/zh-CN/skills/fec-legacy-web-standard/SKILL.md +35 -0
  142. package/localized/zh-CN/skills/fec-legacy-web-standard/references/legacy-patterns.md +85 -0
  143. package/localized/zh-CN/skills/fec-list-virtualization/SKILL.md +34 -0
  144. package/localized/zh-CN/skills/fec-list-virtualization/references/virtualization-patterns.md +80 -0
  145. package/localized/zh-CN/skills/fec-monorepo-project-standard/SKILL.md +142 -0
  146. package/localized/zh-CN/skills/fec-motion-interaction/SKILL.md +73 -0
  147. package/localized/zh-CN/skills/fec-motion-interaction/references/motion-patterns.md +112 -0
  148. package/localized/zh-CN/skills/fec-nextjs-project-standard/SKILL.md +123 -0
  149. package/localized/zh-CN/skills/fec-nuxt-project-standard/SKILL.md +122 -0
  150. package/localized/zh-CN/skills/fec-performance-optimization/SKILL.md +80 -0
  151. package/localized/zh-CN/skills/fec-performance-optimization/references/framework-performance-patterns.md +38 -0
  152. package/localized/zh-CN/skills/fec-performance-optimization/references/report-template.md +59 -0
  153. package/localized/zh-CN/skills/fec-pwa-implementation/SKILL.md +35 -0
  154. package/localized/zh-CN/skills/fec-pwa-implementation/references/manifest-and-icons.md +53 -0
  155. package/localized/zh-CN/skills/fec-pwa-implementation/references/service-worker-workbox.md +68 -0
  156. package/localized/zh-CN/skills/fec-react-project-standard/SKILL.md +91 -0
  157. package/localized/zh-CN/skills/fec-react-project-standard/references/react-performance-patterns.md +35 -0
  158. package/localized/zh-CN/skills/fec-react-project-standard/references/react-project-structure.md +197 -0
  159. package/localized/zh-CN/skills/fec-react-project-standard/references/react-quality-patterns.md +131 -0
  160. package/localized/zh-CN/skills/fec-react-project-standard/references/react-runtime-patterns.md +293 -0
  161. package/localized/zh-CN/skills/fec-refactor-clean/SKILL.md +51 -0
  162. package/localized/zh-CN/skills/fec-refactor-clean/references/report-template.md +42 -0
  163. package/localized/zh-CN/skills/fec-responsive-layout/SKILL.md +34 -0
  164. package/localized/zh-CN/skills/fec-responsive-layout/references/responsive-layout-patterns.md +70 -0
  165. package/localized/zh-CN/skills/fec-route-protection/SKILL.md +135 -0
  166. package/localized/zh-CN/skills/fec-security-review/SKILL.md +38 -0
  167. package/localized/zh-CN/skills/fec-security-review/references/report-template.md +27 -0
  168. package/localized/zh-CN/skills/fec-security-review/references/security-checklist.md +64 -0
  169. package/localized/zh-CN/skills/fec-source-driven-development/SKILL.md +87 -0
  170. package/localized/zh-CN/skills/fec-state-management/SKILL.md +140 -0
  171. package/localized/zh-CN/skills/fec-state-management/references/state-patterns.md +109 -0
  172. package/localized/zh-CN/skills/fec-storybook-component-doc/SKILL.md +37 -0
  173. package/localized/zh-CN/skills/fec-storybook-component-doc/references/story-patterns.md +118 -0
  174. package/localized/zh-CN/skills/fec-svg-animation/SKILL.md +148 -0
  175. package/localized/zh-CN/skills/fec-tailwind-design-system/SKILL.md +34 -0
  176. package/localized/zh-CN/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +59 -0
  177. package/localized/zh-CN/skills/fec-tdd-workflow/SKILL.md +52 -0
  178. package/localized/zh-CN/skills/fec-testing-strategy/SKILL.md +45 -0
  179. package/localized/zh-CN/skills/fec-typescript-project-standard/SKILL.md +54 -0
  180. package/{skills/fec-typescript-type-safety → localized/zh-CN/skills/fec-typescript-project-standard}/references/type-safety-patterns.md +1 -1
  181. package/{skills/fec-typescript-type-safety/SKILL.md → localized/zh-CN/skills/fec-typescript-project-standard/references/type-safety.md} +5 -14
  182. package/localized/zh-CN/skills/fec-ui-design/SKILL.md +108 -0
  183. package/localized/zh-CN/skills/fec-ui-design/data/product-rules.json +231 -0
  184. package/localized/zh-CN/skills/fec-ui-design/data/stack-ui-rules.json +146 -0
  185. package/localized/zh-CN/skills/fec-ui-design/data/style-archetypes.json +373 -0
  186. package/localized/zh-CN/skills/fec-ui-design/data/ux-quality-rules.json +203 -0
  187. package/localized/zh-CN/skills/fec-ui-design/references/design-intelligence.md +97 -0
  188. package/localized/zh-CN/skills/fec-ui-design/references/master-page-overrides.md +30 -0
  189. package/localized/zh-CN/skills/fec-ui-design/references/pre-delivery-checklist.md +39 -0
  190. package/localized/zh-CN/skills/fec-ui-design/scripts/design-system.mjs +648 -0
  191. package/localized/zh-CN/skills/fec-validation-fix/SKILL.md +51 -0
  192. package/localized/zh-CN/skills/fec-validation-fix/references/report-template.md +43 -0
  193. package/localized/zh-CN/skills/fec-vite-project-standard/SKILL.md +83 -0
  194. package/localized/zh-CN/skills/fec-vue3-project-standard/SKILL.md +58 -0
  195. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +162 -0
  196. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +13 -0
  197. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-project-structure.md +176 -0
  198. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +216 -0
  199. package/localized/zh-CN/skills/fec-web-video-presentation/SKILL.md +61 -0
  200. package/localized/zh-CN/skills/fec-web-video-presentation/data/starter-themes.json +59 -0
  201. package/localized/zh-CN/skills/fec-web-video-presentation/references/chapter-craft.md +37 -0
  202. package/localized/zh-CN/skills/fec-web-video-presentation/references/content-plan.md +38 -0
  203. package/localized/zh-CN/skills/fec-web-video-presentation/references/recording-and-audio.md +33 -0
  204. package/localized/zh-CN/skills/fec-web-video-presentation/references/theme-system.md +36 -0
  205. package/localized/zh-CN/skills/fec-web-video-presentation/scripts/create-video-presentation.mjs +430 -0
  206. package/localized/zh-CN/skills/fec-web-workers/SKILL.md +35 -0
  207. package/localized/zh-CN/skills/fec-web-workers/references/advanced-workers.md +54 -0
  208. package/localized/zh-CN/skills/fec-web-workers/references/basic-worker.md +67 -0
  209. package/localized/zh-CN/skills/metadata.json +1646 -0
  210. package/localized/zh-CN/skills/relations.json +755 -0
  211. package/localized/zh-CN/templates/claude/CLAUDE.md +106 -0
  212. package/localized/zh-CN/templates/claude/settings.json +62 -0
  213. package/localized/zh-CN/templates/codex/AGENTS.md +105 -0
  214. package/localized/zh-CN/templates/codex/config.toml +32 -0
  215. package/localized/zh-CN/templates/openclaw/AGENTS.md +101 -0
  216. package/localized/zh-CN/templates/openclaw/OPENCLAW-CONFIG.md +12 -0
  217. package/localized/zh-CN/templates/shared/rules/fec-agent-workflow.md +54 -0
  218. package/localized/zh-CN/templates/shared/rules/fec-api-layer.md +99 -0
  219. package/localized/zh-CN/templates/shared/rules/fec-ci-cd.md +40 -0
  220. package/localized/zh-CN/templates/shared/rules/fec-code-comments.md +33 -0
  221. package/localized/zh-CN/templates/shared/rules/fec-design-system.md +72 -0
  222. package/localized/zh-CN/templates/shared/rules/fec-error-handling.md +56 -0
  223. package/localized/zh-CN/templates/shared/rules/fec-git-conventions.md +73 -0
  224. package/localized/zh-CN/templates/shared/rules/fec-i18n.md +64 -0
  225. package/localized/zh-CN/templates/shared/rules/fec-naming-conventions.md +120 -0
  226. package/localized/zh-CN/templates/shared/rules/fec-performance.md +101 -0
  227. package/localized/zh-CN/templates/shared/rules/fec-react.md +82 -0
  228. package/localized/zh-CN/templates/shared/rules/fec-refactoring.md +47 -0
  229. package/localized/zh-CN/templates/shared/rules/fec-rendering-patterns.md +40 -0
  230. package/localized/zh-CN/templates/shared/rules/fec-responsive-design.md +50 -0
  231. package/localized/zh-CN/templates/shared/rules/fec-source-driven-development.md +31 -0
  232. package/localized/zh-CN/templates/shared/rules/fec-state-management.md +60 -0
  233. package/localized/zh-CN/templates/shared/rules/fec-testing.md +98 -0
  234. package/localized/zh-CN/templates/shared/rules/fec-typescript.md +112 -0
  235. package/localized/zh-CN/templates/shared/rules/fec-vue.md +64 -0
  236. package/localized/zh-CN/templates/shared/rules/fec-working-modes.md +50 -0
  237. package/openclaw.plugin.json +1 -1
  238. package/package.json +4 -3
  239. package/skills/TEMPLATE.md +74 -74
  240. package/skills/eval_queries.json +717 -619
  241. package/skills/fec-accessibility-check/SKILL.md +21 -21
  242. package/skills/fec-accessibility-check/references/report-template.md +12 -12
  243. package/skills/fec-accessibility-check/references/screen-reader-testing.md +24 -24
  244. package/skills/fec-alchemy/SKILL.md +50 -50
  245. package/skills/fec-alchemy/assets/absorption-plan-template.md +32 -32
  246. package/skills/fec-alchemy/assets/intake-template.md +55 -55
  247. package/skills/fec-alchemy/assets/review-checklist.md +23 -23
  248. package/skills/fec-alchemy/references/methodology.md +66 -66
  249. package/skills/fec-alchemy/references/originality-and-licensing.md +42 -42
  250. package/skills/fec-api-integration/SKILL.md +61 -61
  251. package/skills/fec-api-integration/references/integration-patterns.md +30 -30
  252. package/skills/fec-backend-requirements-handoff/SKILL.md +45 -0
  253. package/skills/fec-browser-storage/SKILL.md +16 -16
  254. package/skills/fec-browser-storage/references/storage-patterns.md +16 -16
  255. package/skills/fec-canvas-threejs/SKILL.md +21 -21
  256. package/skills/fec-canvas-threejs/references/rendering-patterns.md +10 -10
  257. package/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +37 -37
  258. package/skills/fec-code-review/SKILL.md +94 -94
  259. package/skills/fec-code-review/references/report-template.md +13 -13
  260. package/skills/fec-component-testing/SKILL.md +39 -39
  261. package/skills/fec-data-fetching/SKILL.md +16 -16
  262. package/skills/fec-data-fetching/references/query-patterns.md +27 -27
  263. package/skills/fec-debug-framework/SKILL.md +95 -95
  264. package/skills/fec-debug-framework/references/report-template.md +34 -34
  265. package/skills/fec-dependency-upgrade/SKILL.md +17 -17
  266. package/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +31 -31
  267. package/skills/fec-doc-sync/SKILL.md +23 -23
  268. package/skills/fec-drawio-studio/SKILL.md +73 -0
  269. package/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +10 -0
  270. package/skills/fec-drawio-studio/data/brand-icons.json +878 -0
  271. package/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  272. package/skills/fec-drawio-studio/references/data-residency.md +27 -0
  273. package/skills/fec-drawio-studio/references/diagram-patterns.md +60 -0
  274. package/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  275. package/skills/fec-drawio-studio/references/layout-and-export.md +72 -0
  276. package/skills/fec-drawio-studio/references/troubleshooting.md +29 -0
  277. package/skills/fec-drawio-studio/references/xml-and-mermaid.md +58 -0
  278. package/skills/fec-drawio-studio/scripts/brand-symbols.mjs +99 -0
  279. package/skills/fec-drawio-studio/scripts/diagram-lint.mjs +205 -0
  280. package/skills/fec-drawio-studio/scripts/diagram-url.mjs +102 -0
  281. package/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  282. package/skills/fec-drawio-studio/scripts/layout-graph.mjs +107 -0
  283. package/skills/fec-drawio-studio/scripts/png-embed-fix.mjs +26 -0
  284. package/skills/fec-drawio-studio/scripts/scan-go-packages.mjs +36 -0
  285. package/skills/fec-drawio-studio/scripts/scan-js-modules.mjs +52 -0
  286. package/skills/fec-drawio-studio/scripts/scan-python-classes.mjs +30 -0
  287. package/skills/fec-drawio-studio/scripts/scan-python-modules.mjs +55 -0
  288. package/skills/fec-drawio-studio/scripts/scan-rust-modules.mjs +35 -0
  289. package/skills/fec-drawio-studio/scripts/scan-ts-modules.mjs +7 -0
  290. package/skills/fec-drawio-studio/scripts/shape-query.mjs +121 -0
  291. package/skills/fec-drawio-studio/scripts/studio-core.mjs +139 -0
  292. package/skills/fec-drawio-studio/styles/built-in/corporate.json +49 -0
  293. package/skills/fec-drawio-studio/styles/built-in/default.json +49 -0
  294. package/skills/fec-drawio-studio/styles/built-in/handdrawn.json +49 -0
  295. package/skills/fec-drawio-studio/styles/schema.json +112 -0
  296. package/skills/fec-e2e-testing/SKILL.md +24 -22
  297. package/skills/fec-e2e-testing/references/e2e-ci-reporting.md +62 -0
  298. package/skills/fec-e2e-testing/references/e2e-special-scenarios.md +52 -0
  299. package/skills/fec-e2e-testing/references/e2e-visual-regression.md +60 -0
  300. package/skills/fec-e2e-testing/references/playwright-patterns.md +6 -6
  301. package/skills/fec-form-handling/SKILL.md +21 -21
  302. package/skills/fec-form-handling/references/advanced-form-patterns.md +41 -41
  303. package/skills/fec-image-generation/SKILL.md +81 -0
  304. package/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  305. package/skills/fec-image-generation/references/artifact-routing.md +80 -0
  306. package/skills/fec-image-generation/references/diagram-workflows.md +74 -0
  307. package/skills/fec-image-generation/references/html-technical-diagrams.md +236 -0
  308. package/skills/fec-image-generation/references/png-qa-autofix.md +30 -0
  309. package/skills/fec-image-generation/scripts/export-diagram.mjs +364 -0
  310. package/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  311. package/skills/fec-image-generation/scripts/png-qa.mjs +431 -0
  312. package/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1397 -0
  313. package/skills/fec-implement-from-design/SKILL.md +81 -74
  314. package/skills/fec-implement-from-design/references/design-plan-template.md +16 -16
  315. package/skills/fec-legacy-to-modern-migration/SKILL.md +29 -173
  316. package/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +110 -0
  317. package/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +37 -37
  318. package/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +48 -0
  319. package/skills/fec-legacy-web-standard/SKILL.md +17 -17
  320. package/skills/fec-legacy-web-standard/references/legacy-patterns.md +16 -16
  321. package/skills/fec-list-virtualization/SKILL.md +16 -16
  322. package/skills/fec-list-virtualization/references/virtualization-patterns.md +31 -31
  323. package/skills/fec-monorepo-project-standard/SKILL.md +52 -52
  324. package/skills/fec-motion-interaction/SKILL.md +51 -44
  325. package/skills/fec-motion-interaction/references/motion-patterns.md +11 -11
  326. package/skills/fec-nextjs-project-standard/SKILL.md +64 -58
  327. package/skills/fec-nuxt-project-standard/SKILL.md +57 -57
  328. package/skills/fec-performance-optimization/SKILL.md +54 -50
  329. package/skills/fec-performance-optimization/references/framework-performance-patterns.md +38 -0
  330. package/skills/fec-performance-optimization/references/report-template.md +34 -28
  331. package/skills/fec-pwa-implementation/SKILL.md +17 -17
  332. package/skills/fec-pwa-implementation/references/manifest-and-icons.md +12 -12
  333. package/skills/fec-pwa-implementation/references/service-worker-workbox.md +13 -13
  334. package/skills/fec-react-project-standard/SKILL.md +72 -64
  335. package/skills/fec-react-project-standard/references/react-performance-patterns.md +35 -0
  336. package/skills/fec-react-project-standard/references/react-project-structure.md +197 -0
  337. package/skills/fec-react-project-standard/references/react-quality-patterns.md +131 -0
  338. package/skills/fec-react-project-standard/references/react-runtime-patterns.md +293 -0
  339. package/skills/fec-refactor-clean/SKILL.md +30 -30
  340. package/skills/fec-refactor-clean/references/report-template.md +23 -23
  341. package/skills/fec-responsive-layout/SKILL.md +17 -17
  342. package/skills/fec-responsive-layout/references/responsive-layout-patterns.md +39 -28
  343. package/skills/fec-route-protection/SKILL.md +26 -26
  344. package/skills/fec-security-review/SKILL.md +20 -20
  345. package/skills/fec-security-review/references/report-template.md +12 -12
  346. package/skills/fec-security-review/references/security-checklist.md +27 -27
  347. package/skills/fec-source-driven-development/SKILL.md +66 -40
  348. package/skills/fec-state-management/SKILL.md +34 -34
  349. package/skills/fec-state-management/references/state-patterns.md +19 -19
  350. package/skills/fec-storybook-component-doc/SKILL.md +19 -19
  351. package/skills/fec-storybook-component-doc/references/story-patterns.md +12 -12
  352. package/skills/fec-svg-animation/SKILL.md +32 -32
  353. package/skills/fec-tailwind-design-system/SKILL.md +17 -17
  354. package/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +36 -32
  355. package/skills/fec-tdd-workflow/SKILL.md +28 -28
  356. package/skills/fec-testing-strategy/SKILL.md +29 -29
  357. package/skills/fec-typescript-project-standard/SKILL.md +54 -0
  358. package/skills/fec-typescript-project-standard/references/type-safety-patterns.md +102 -0
  359. package/skills/fec-typescript-project-standard/references/type-safety.md +148 -0
  360. package/skills/fec-ui-design/SKILL.md +90 -72
  361. package/skills/fec-ui-design/data/style-archetypes.json +40 -0
  362. package/skills/fec-ui-design/data/ux-quality-rules.json +35 -0
  363. package/skills/fec-ui-design/references/design-intelligence.md +81 -21
  364. package/skills/fec-ui-design/references/master-page-overrides.md +15 -15
  365. package/skills/fec-ui-design/references/pre-delivery-checklist.md +38 -32
  366. package/skills/fec-ui-design/scripts/design-system.mjs +119 -1
  367. package/skills/fec-validation-fix/SKILL.md +26 -26
  368. package/skills/fec-validation-fix/references/report-template.md +25 -25
  369. package/skills/fec-vite-project-standard/SKILL.md +39 -39
  370. package/skills/fec-vue3-project-standard/SKILL.md +39 -30
  371. package/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +163 -0
  372. package/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +13 -0
  373. package/skills/fec-vue3-project-standard/references/vue3-project-structure.md +177 -0
  374. package/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +216 -0
  375. package/skills/fec-web-video-presentation/SKILL.md +61 -0
  376. package/skills/fec-web-video-presentation/data/starter-themes.json +59 -0
  377. package/skills/fec-web-video-presentation/references/chapter-craft.md +37 -0
  378. package/skills/fec-web-video-presentation/references/content-plan.md +38 -0
  379. package/skills/fec-web-video-presentation/references/recording-and-audio.md +33 -0
  380. package/skills/fec-web-video-presentation/references/theme-system.md +36 -0
  381. package/skills/fec-web-video-presentation/scripts/create-video-presentation.mjs +430 -0
  382. package/skills/fec-web-workers/SKILL.md +16 -16
  383. package/skills/fec-web-workers/references/advanced-workers.md +13 -13
  384. package/skills/fec-web-workers/references/basic-worker.md +8 -8
  385. package/skills/metadata.json +402 -220
  386. package/skills/relations.json +120 -25
  387. package/templates/claude/CLAUDE.md +60 -60
  388. package/templates/codex/AGENTS.md +76 -76
  389. package/templates/codex/config.toml +4 -4
  390. package/templates/openclaw/AGENTS.md +68 -68
  391. package/templates/openclaw/OPENCLAW-CONFIG.md +8 -8
  392. package/templates/shared/rules/fec-agent-workflow.md +40 -40
  393. package/templates/shared/rules/fec-api-layer.md +52 -52
  394. package/templates/shared/rules/fec-ci-cd.md +29 -117
  395. package/templates/shared/rules/fec-code-comments.md +22 -22
  396. package/templates/shared/rules/fec-design-system.md +65 -241
  397. package/templates/shared/rules/fec-error-handling.md +41 -185
  398. package/templates/shared/rules/fec-git-conventions.md +42 -42
  399. package/templates/shared/rules/fec-i18n.md +48 -96
  400. package/templates/shared/rules/fec-naming-conventions.md +91 -91
  401. package/templates/shared/rules/fec-performance.md +78 -78
  402. package/templates/shared/rules/fec-react.md +58 -58
  403. package/templates/shared/rules/fec-refactoring.md +34 -30
  404. package/templates/shared/rules/fec-rendering-patterns.md +40 -183
  405. package/templates/shared/rules/fec-responsive-design.md +37 -214
  406. package/templates/shared/rules/fec-source-driven-development.md +22 -22
  407. package/templates/shared/rules/fec-state-management.md +45 -148
  408. package/templates/shared/rules/fec-testing.md +64 -64
  409. package/templates/shared/rules/fec-typescript.md +98 -341
  410. package/templates/shared/rules/fec-vue.md +42 -42
  411. package/templates/shared/rules/fec-working-modes.md +34 -34
  412. package/skills/fec-e2e-testing/references/e2e-advanced.md +0 -176
  413. package/skills/fec-react-project-standard/references/react-project-details.md +0 -642
  414. package/skills/fec-vue3-project-standard/references/vue3-project-details.md +0 -547
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/artifact-routing.md ADDED
@@ -0,0 +1,80 @@
1
+ # Artifact Routing
2
+
3
+ ## Mode selection
4
+
5
+ Choose the execution mode before writing a prompt:
6
+
7
+ | Mode | Use when | Behavior |
8
+ | ---- | -------- | -------- |
9
+ | Deterministic source | Text, labels, charts, connectors, or exact geometry must be correct | Build Mermaid, SVG, HTML/CSS, canvas, plotting, or design-tool source first, then export PNG. |
10
+ | Host-native image tool | The task needs raster aesthetics, illustration, product mood, photo-like output, or image editing and the current environment has an image tool | Write a structured prompt and call the host image tool. Save or report the prompt when future edits are likely. |
11
+ | Prompt-only advisor | No image tool is available or the user only wants a prompt | Produce the final prompt, usage notes, and verification checklist. Do not imply an image was generated. |
12
+ | Hybrid | Exact text or UI structure plus generated imagery are both needed | Generate supporting imagery, then compose final text/layout in SVG, HTML, canvas, or a design tool. |
13
+
14
+ Do not introduce local image API scripts, provider-specific environment variables, or OpenAI-compatible gateway assumptions as part of this workflow. If a project already owns such a pipeline, treat it as a host tool and keep prompts provider-neutral.
15
+
16
+ ## Route by output
17
+
18
+ | Output | Preferred route | Notes |
19
+ | ------ | --------------- | ----- |
20
+ | Poster / ad creative | Image generation, then optional layout polish in HTML/SVG or design tool | Lock exact copy before generation; recompose text outside the bitmap when accuracy matters. |
21
+ | UI mockup | HTML/CSS or design-tool mockup first; raster generation only for mood or hero references | Keep controls readable and avoid fake product states in final handoff. |
22
+ | Product image | Image generation or edit with reference constraints | Preserve brand, perspective, material, and lighting; do not overwrite original assets. |
23
+ | Infographic | Structured SVG/HTML/canvas for text and charts; generated illustrations only as supporting media | Export PNG after layout QA. |
24
+ | Academic figure | Deterministic plotting, SVG, Mermaid, LaTeX, or canvas | Accuracy beats style; keep source reproducible. |
25
+ | Comic / storyboard | Image generation with panel manifest | Track panel count, exact captions, characters, scene continuity, and reading order. |
26
+ | Avatar | Image generation or edit | Ask only when identity, style, or usage rights are ambiguous. |
27
+ | Brand board | Mixed route: generated imagery, palette/type/layout board in HTML/SVG | Record palette roles, typography mood, imagery rules, and avoid-list. |
28
+ | Image edit | Edit target plus explicit invariants | Preserve requested identity, composition, text, object, lighting, or background constraints. |
29
+
30
+ ## Visual asset categories
31
+
32
+ Use these categories to pick prompt detail and verification focus:
33
+
34
+ - Product and commerce: product image, packaging, lifestyle scene, marketplace board.
35
+ - UI and interface: app mockup, chat scene, dashboard view, landing hero, social post.
36
+ - Technical and academic: architecture, sequence, state, ER, method figure, graphical abstract.
37
+ - Narrative and brand: poster, campaign key visual, storyboard, comic, avatar, mascot, brand board.
38
+ - Information design: infographic, map, comparison, step-by-step guide, KPI board.
39
+ - Editing: background replacement, object removal, local replacement, retouching, portrait edit.
40
+
41
+ If the category is text-heavy or diagram-heavy, prefer a deterministic source or hybrid route.
42
+
43
+ ## Prompt contract
44
+
45
+ Use this compact structure when calling an image tool:
46
+
47
+ ```text
48
+ Asset type:
49
+ Use:
50
+ Canvas / aspect ratio:
51
+ Audience:
52
+ Required text:
53
+ Subject:
54
+ Composition:
55
+ Style / brand tone:
56
+ Reference assets:
57
+ Must preserve:
58
+ Avoid:
59
+ Output:
60
+ ```
61
+
62
+ For exact text, prefer adding text in SVG/HTML/design source after image generation. If text must be inside generated imagery, keep it short and verify manually.
63
+
64
+ For image edits, add:
65
+
66
+ ```text
67
+ Source image:
68
+ Edit region:
69
+ Invariants:
70
+ Replacement:
71
+ Lighting / perspective:
72
+ ```
73
+
74
+ ## Handoff checklist
75
+
76
+ - Final image path is inside the workspace when the asset is project-bound.
77
+ - Source or prompt is saved when future edits are likely.
78
+ - Exact text, diagram labels, chart values, citations, and brand marks are manually checked.
79
+ - Generated variants that were rejected are not referenced by code or docs.
80
+ - If no image was generated, the final answer clearly states prompt-only mode.
package/skills/fec-image-generation/references/diagram-workflows.md ADDED
@@ -0,0 +1,74 @@
1
+ # Diagram Workflows
2
+
3
+ ## Source selection
4
+
5
+ | Diagram type | Preferred source | QA focus |
6
+ | ------------ | ---------------- | -------- |
7
+ | ER diagram | Mermaid ER, DBML, Graphviz, SVG | Cardinality labels, table names, key fields, crossing relations. |
8
+ | UML class | Mermaid class, PlantUML, Graphviz | Inheritance direction, method/property wrapping, package grouping. |
9
+ | Sequence | Mermaid sequence, PlantUML | Lifeline order, activation spans, async/return arrows, message text. |
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. |
12
+ | ML / deep learning | SVG/HTML/canvas | Tensor shapes, layer order, branch joins, repeated blocks, annotations. |
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.
31
+
32
+ ## Minimum source manifest
33
+
34
+ When the rendering path allows it, save a layout manifest next to the PNG:
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
+ Coordinates are PNG pixel coordinates after export. Boxes should cover visible label/node bounds, not just the center point.
49
+
50
+ ## Diagram repair playbook
51
+
52
+ - **Overlapping nodes:** increase rank/column spacing, split clusters, or move low-priority annotations into a legend.
53
+ - **Truncated labels:** widen the node, add manual line breaks, reduce label length, or increase export scale.
54
+ - **Connector through labels:** add waypoints, route orthogonally around boxes, or move labels above the segment.
55
+ - **Connector stacking:** separate parallel edges with different waypoints or bundle them with a shared labeled bus.
56
+ - **Edge clipping:** increase outer padding or export viewBox/canvas size.
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.
71
+
72
+ ## Export guidance
73
+
74
+ Prefer exporting at 2x scale for raster PNGs, then downsample only if text remains crisp. Keep the editable source committed or attached wherever future diagram changes are expected.