@bovinphang/frontend-craft 2.7.0 → 2.9.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 (502) hide show
  1. package/.claude-plugin/marketplace.json +3 -3
  2. package/.claude-plugin/plugin.json +1 -1
  3. package/CHANGELOG.md +378 -305
  4. package/CHANGELOG.zh-CN.md +377 -304
  5. package/CONTRIBUTING.md +371 -361
  6. package/CONTRIBUTING.zh-CN.md +371 -361
  7. package/README.md +545 -493
  8. package/README.openclaw.md +359 -264
  9. package/README.openclaw.zh-CN.md +359 -264
  10. package/README.zh-CN.md +545 -493
  11. package/agents/fec-architect.md +70 -70
  12. package/agents/fec-code-reviewer.md +103 -82
  13. package/agents/fec-debugger.md +20 -20
  14. package/agents/fec-design-token-mapper.md +36 -36
  15. package/agents/fec-doc-updater.md +13 -13
  16. package/agents/fec-e2e-runner.md +45 -45
  17. package/agents/fec-figma-implementer.md +59 -59
  18. package/agents/fec-performance-optimizer.md +128 -128
  19. package/agents/fec-refactor-cleaner.md +17 -14
  20. package/agents/fec-refactoring-expert.md +81 -0
  21. package/agents/fec-security-reviewer.md +82 -67
  22. package/agents/fec-test-planner.md +27 -27
  23. package/agents/fec-typescript-reviewer.md +103 -87
  24. package/agents/fec-ui-checker.md +64 -64
  25. package/commands/fec-debug.md +19 -19
  26. package/commands/fec-doc-sync.md +11 -11
  27. package/commands/fec-init.md +37 -38
  28. package/commands/fec-plan.md +58 -58
  29. package/commands/fec-refactor-clean.md +11 -11
  30. package/commands/fec-refactor-plan.md +17 -0
  31. package/commands/fec-refactor.md +18 -0
  32. package/commands/fec-review.md +71 -41
  33. package/commands/fec-scaffold.md +41 -41
  34. package/commands/fec-smell.md +17 -0
  35. package/commands/fec-tdd.md +17 -13
  36. package/dist/bin/frontend-craft.js +190 -36
  37. package/dist/hooks/fec-run-tests.js +5 -1
  38. package/dist/hooks/fec-session-start.js +1 -1
  39. package/docs/example-prompts.md +157 -137
  40. package/docs/ja-JP/README.md +534 -493
  41. package/docs/ko-KR/README.md +534 -493
  42. package/docs/project-structure.md +151 -123
  43. package/docs/refactoring/README.md +50 -0
  44. package/docs/refactoring/catalog.md +105 -0
  45. package/docs/refactoring/smell-refactoring-matrix.md +41 -0
  46. package/docs/review-and-diagram-workflows.md +39 -0
  47. package/docs/runtimes/antigravity.md +18 -10
  48. package/docs/runtimes/augment.md +18 -10
  49. package/docs/runtimes/claude.md +191 -177
  50. package/docs/runtimes/claude.zh-CN.md +189 -175
  51. package/docs/runtimes/cline.md +18 -10
  52. package/docs/runtimes/codebuddy.md +18 -10
  53. package/docs/runtimes/codex.md +18 -10
  54. package/docs/runtimes/compatibility.md +27 -0
  55. package/docs/runtimes/copilot.md +18 -10
  56. package/docs/runtimes/cursor.md +18 -10
  57. package/docs/runtimes/gemini.md +18 -10
  58. package/docs/runtimes/kilo.md +18 -10
  59. package/docs/runtimes/openclaw.md +18 -10
  60. package/docs/runtimes/opencode.md +18 -10
  61. package/docs/runtimes/qoder.md +18 -19
  62. package/docs/runtimes/trae.md +18 -10
  63. package/docs/runtimes/windsurf.md +18 -10
  64. package/docs/superpowers/plans/2026-09-26-content-integrity.md +145 -0
  65. package/docs/superpowers/plans/2026-09-26-diagram-quality.md +170 -0
  66. package/docs/superpowers/specs/2026-09-26-diagram-quality-design.md +77 -0
  67. package/docs/superpowers/specs/2026-09-26-project-optimization-design.md +95 -0
  68. package/docs/zh-CN/example-prompts.md +157 -137
  69. package/docs/zh-CN/project-structure.md +148 -123
  70. package/docs/zh-CN/review-and-diagram-workflows.md +39 -0
  71. package/docs/zh-TW/README.md +534 -493
  72. package/localized/zh-CN/agents/fec-architect.md +125 -0
  73. package/localized/zh-CN/agents/fec-code-reviewer.md +171 -0
  74. package/localized/zh-CN/agents/fec-debugger.md +44 -0
  75. package/localized/zh-CN/agents/fec-design-token-mapper.md +75 -0
  76. package/localized/zh-CN/agents/fec-doc-updater.md +30 -0
  77. package/localized/zh-CN/agents/fec-e2e-runner.md +107 -0
  78. package/localized/zh-CN/agents/fec-figma-implementer.md +104 -0
  79. package/localized/zh-CN/agents/fec-performance-optimizer.md +293 -0
  80. package/localized/zh-CN/agents/fec-refactor-cleaner.md +35 -0
  81. package/localized/zh-CN/agents/fec-refactoring-expert.md +53 -0
  82. package/localized/zh-CN/agents/fec-security-reviewer.md +132 -0
  83. package/localized/zh-CN/agents/fec-test-planner.md +50 -0
  84. package/localized/zh-CN/agents/fec-typescript-reviewer.md +158 -0
  85. package/localized/zh-CN/agents/fec-ui-checker.md +120 -0
  86. package/localized/zh-CN/commands/fec-debug.md +30 -0
  87. package/localized/zh-CN/commands/fec-doc-sync.md +19 -0
  88. package/localized/zh-CN/commands/fec-init.md +70 -0
  89. package/localized/zh-CN/commands/fec-plan.md +94 -0
  90. package/localized/zh-CN/commands/fec-refactor-clean.md +19 -0
  91. package/localized/zh-CN/commands/fec-refactor-plan.md +15 -0
  92. package/localized/zh-CN/commands/fec-refactor.md +14 -0
  93. package/localized/zh-CN/commands/fec-review.md +97 -0
  94. package/localized/zh-CN/commands/fec-scaffold.md +205 -0
  95. package/localized/zh-CN/commands/fec-smell.md +13 -0
  96. package/localized/zh-CN/commands/fec-tdd.md +25 -0
  97. package/localized/zh-CN/skills/TEMPLATE.md +155 -0
  98. package/localized/zh-CN/skills/eval_queries.json +1257 -0
  99. package/localized/zh-CN/skills/fec-accessibility-check/SKILL.md +39 -0
  100. package/localized/zh-CN/skills/fec-accessibility-check/references/report-template.md +23 -0
  101. package/localized/zh-CN/skills/fec-accessibility-check/references/screen-reader-testing.md +33 -0
  102. package/localized/zh-CN/skills/fec-alchemy/SKILL.md +74 -0
  103. package/localized/zh-CN/skills/fec-alchemy/assets/absorption-plan-template.md +47 -0
  104. package/localized/zh-CN/skills/fec-alchemy/assets/intake-template.md +55 -0
  105. package/localized/zh-CN/skills/fec-alchemy/assets/review-checklist.md +31 -0
  106. package/localized/zh-CN/skills/fec-alchemy/references/methodology.md +94 -0
  107. package/localized/zh-CN/skills/fec-alchemy/references/originality-and-licensing.md +57 -0
  108. package/localized/zh-CN/skills/fec-api-integration/SKILL.md +78 -0
  109. package/localized/zh-CN/skills/fec-api-integration/references/integration-patterns.md +80 -0
  110. package/localized/zh-CN/skills/fec-backend-requirements-handoff/SKILL.md +45 -0
  111. package/localized/zh-CN/skills/fec-browser-storage/SKILL.md +34 -0
  112. package/localized/zh-CN/skills/fec-browser-storage/references/storage-patterns.md +65 -0
  113. package/localized/zh-CN/skills/fec-canvas-threejs/SKILL.md +66 -0
  114. package/localized/zh-CN/skills/fec-canvas-threejs/references/rendering-patterns.md +67 -0
  115. package/localized/zh-CN/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +67 -0
  116. package/localized/zh-CN/skills/fec-code-review/SKILL.md +162 -0
  117. package/localized/zh-CN/skills/fec-code-review/references/report-template.md +39 -0
  118. package/localized/zh-CN/skills/fec-code-smells/SKILL.md +33 -0
  119. package/localized/zh-CN/skills/fec-code-smells/references/detection-guide.md +25 -0
  120. package/localized/zh-CN/skills/fec-code-smells/references/smell-catalog.md +817 -0
  121. package/localized/zh-CN/skills/fec-code-smells/references/smell-to-refactoring-map.md +265 -0
  122. package/localized/zh-CN/skills/fec-component-testing/SKILL.md +119 -0
  123. package/localized/zh-CN/skills/fec-data-fetching/SKILL.md +62 -0
  124. package/localized/zh-CN/skills/fec-data-fetching/references/query-patterns.md +103 -0
  125. package/localized/zh-CN/skills/fec-debug-framework/SKILL.md +157 -0
  126. package/localized/zh-CN/skills/fec-debug-framework/references/report-template.md +58 -0
  127. package/localized/zh-CN/skills/fec-dependency-upgrade/SKILL.md +34 -0
  128. package/localized/zh-CN/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +56 -0
  129. package/localized/zh-CN/skills/fec-doc-sync/SKILL.md +39 -0
  130. package/localized/zh-CN/skills/fec-drawio-studio/SKILL.md +73 -0
  131. package/localized/zh-CN/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +10 -0
  132. package/localized/zh-CN/skills/fec-drawio-studio/data/brand-icons.json +878 -0
  133. package/localized/zh-CN/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  134. package/localized/zh-CN/skills/fec-drawio-studio/references/data-residency.md +27 -0
  135. package/localized/zh-CN/skills/fec-drawio-studio/references/diagram-patterns.md +60 -0
  136. package/localized/zh-CN/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  137. package/localized/zh-CN/skills/fec-drawio-studio/references/layout-and-export.md +72 -0
  138. package/localized/zh-CN/skills/fec-drawio-studio/references/troubleshooting.md +29 -0
  139. package/localized/zh-CN/skills/fec-drawio-studio/references/xml-and-mermaid.md +58 -0
  140. package/localized/zh-CN/skills/fec-drawio-studio/scripts/brand-symbols.mjs +99 -0
  141. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-lint.mjs +205 -0
  142. package/localized/zh-CN/skills/fec-drawio-studio/scripts/diagram-url.mjs +102 -0
  143. package/localized/zh-CN/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  144. package/localized/zh-CN/skills/fec-drawio-studio/scripts/layout-graph.mjs +107 -0
  145. package/localized/zh-CN/skills/fec-drawio-studio/scripts/png-embed-fix.mjs +26 -0
  146. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-go-packages.mjs +36 -0
  147. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-js-modules.mjs +52 -0
  148. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-classes.mjs +30 -0
  149. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-python-modules.mjs +55 -0
  150. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-rust-modules.mjs +35 -0
  151. package/localized/zh-CN/skills/fec-drawio-studio/scripts/scan-ts-modules.mjs +7 -0
  152. package/localized/zh-CN/skills/fec-drawio-studio/scripts/shape-query.mjs +121 -0
  153. package/localized/zh-CN/skills/fec-drawio-studio/scripts/studio-core.mjs +139 -0
  154. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/corporate.json +49 -0
  155. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/default.json +49 -0
  156. package/localized/zh-CN/skills/fec-drawio-studio/styles/built-in/handdrawn.json +49 -0
  157. package/localized/zh-CN/skills/fec-drawio-studio/styles/schema.json +112 -0
  158. package/localized/zh-CN/skills/fec-e2e-testing/SKILL.md +42 -0
  159. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-ci-reporting.md +62 -0
  160. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-special-scenarios.md +52 -0
  161. package/localized/zh-CN/skills/fec-e2e-testing/references/e2e-visual-regression.md +60 -0
  162. package/localized/zh-CN/skills/fec-e2e-testing/references/playwright-patterns.md +95 -0
  163. package/localized/zh-CN/skills/fec-form-handling/SKILL.md +76 -0
  164. package/localized/zh-CN/skills/fec-form-handling/references/advanced-form-patterns.md +101 -0
  165. package/localized/zh-CN/skills/fec-image-generation/SKILL.md +110 -0
  166. package/localized/zh-CN/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  167. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/README.md +14 -0
  168. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/architecture.json +121 -0
  169. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/invalid-explicit.json +41 -0
  170. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/sequence.json +53 -0
  171. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/sequence.mmd +21 -0
  172. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/workflow.json +98 -0
  173. package/localized/zh-CN/skills/fec-image-generation/assets/quality-examples/workflow.mmd +7 -0
  174. package/localized/zh-CN/skills/fec-image-generation/references/artifact-routing.md +80 -0
  175. package/localized/zh-CN/skills/fec-image-generation/references/diagram-workflows.md +81 -0
  176. package/localized/zh-CN/skills/fec-image-generation/references/html-technical-diagrams.md +243 -0
  177. package/localized/zh-CN/skills/fec-image-generation/references/png-qa-autofix.md +37 -0
  178. package/localized/zh-CN/skills/fec-image-generation/scripts/diagram-browser.mjs +90 -0
  179. package/localized/zh-CN/skills/fec-image-generation/scripts/diagram-layout.mjs +176 -0
  180. package/localized/zh-CN/skills/fec-image-generation/scripts/export-diagram.mjs +332 -0
  181. package/localized/zh-CN/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  182. package/localized/zh-CN/skills/fec-image-generation/scripts/mermaid-render.mjs +64 -0
  183. package/localized/zh-CN/skills/fec-image-generation/scripts/png-qa.mjs +462 -0
  184. package/localized/zh-CN/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1537 -0
  185. package/localized/zh-CN/skills/fec-implement-from-design/SKILL.md +129 -0
  186. package/localized/zh-CN/skills/fec-implement-from-design/references/design-plan-template.md +36 -0
  187. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/SKILL.md +46 -0
  188. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +110 -0
  189. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +41 -0
  190. package/localized/zh-CN/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +48 -0
  191. package/localized/zh-CN/skills/fec-legacy-web-standard/SKILL.md +35 -0
  192. package/localized/zh-CN/skills/fec-legacy-web-standard/references/legacy-patterns.md +85 -0
  193. package/localized/zh-CN/skills/fec-list-virtualization/SKILL.md +34 -0
  194. package/localized/zh-CN/skills/fec-list-virtualization/references/virtualization-patterns.md +80 -0
  195. package/localized/zh-CN/skills/fec-monorepo-project-standard/SKILL.md +142 -0
  196. package/localized/zh-CN/skills/fec-motion-interaction/SKILL.md +73 -0
  197. package/localized/zh-CN/skills/fec-motion-interaction/references/motion-patterns.md +112 -0
  198. package/localized/zh-CN/skills/fec-nextjs-project-standard/SKILL.md +123 -0
  199. package/localized/zh-CN/skills/fec-nuxt-project-standard/SKILL.md +122 -0
  200. package/localized/zh-CN/skills/fec-performance-optimization/SKILL.md +80 -0
  201. package/localized/zh-CN/skills/fec-performance-optimization/references/framework-performance-patterns.md +38 -0
  202. package/localized/zh-CN/skills/fec-performance-optimization/references/report-template.md +59 -0
  203. package/localized/zh-CN/skills/fec-pwa-implementation/SKILL.md +35 -0
  204. package/localized/zh-CN/skills/fec-pwa-implementation/references/manifest-and-icons.md +53 -0
  205. package/localized/zh-CN/skills/fec-pwa-implementation/references/service-worker-workbox.md +68 -0
  206. package/localized/zh-CN/skills/fec-react-project-standard/SKILL.md +91 -0
  207. package/localized/zh-CN/skills/fec-react-project-standard/references/react-performance-patterns.md +35 -0
  208. package/localized/zh-CN/skills/fec-react-project-standard/references/react-project-structure.md +197 -0
  209. package/localized/zh-CN/skills/fec-react-project-standard/references/react-quality-patterns.md +131 -0
  210. package/localized/zh-CN/skills/fec-react-project-standard/references/react-runtime-patterns.md +293 -0
  211. package/localized/zh-CN/skills/fec-refactor-clean/SKILL.md +54 -0
  212. package/localized/zh-CN/skills/fec-refactor-clean/references/report-template.md +42 -0
  213. package/localized/zh-CN/skills/fec-refactoring/SKILL.md +83 -0
  214. package/localized/zh-CN/skills/fec-refactoring/references/principles.md +43 -0
  215. package/localized/zh-CN/skills/fec-refactoring/references/refactoring-vs-feature-change.md +25 -0
  216. package/localized/zh-CN/skills/fec-refactoring/references/when-to-refactor.md +17 -0
  217. package/localized/zh-CN/skills/fec-refactoring/references/workflow.md +59 -0
  218. package/localized/zh-CN/skills/fec-refactoring-api/SKILL.md +25 -0
  219. package/localized/zh-CN/skills/fec-refactoring-api/references/api-refactorings.md +496 -0
  220. package/localized/zh-CN/skills/fec-refactoring-catalog/SKILL.md +21 -0
  221. package/localized/zh-CN/skills/fec-refactoring-catalog/references/catalog-index.md +99 -0
  222. package/localized/zh-CN/skills/fec-refactoring-catalog/references/composition-guide.md +49 -0
  223. package/localized/zh-CN/skills/fec-refactoring-catalog/references/selection-guide.md +41 -0
  224. package/localized/zh-CN/skills/fec-refactoring-control/SKILL.md +25 -0
  225. package/localized/zh-CN/skills/fec-refactoring-control/references/conditional-refactorings.md +299 -0
  226. package/localized/zh-CN/skills/fec-refactoring-data/SKILL.md +25 -0
  227. package/localized/zh-CN/skills/fec-refactoring-data/references/data-refactorings.md +248 -0
  228. package/localized/zh-CN/skills/fec-refactoring-encapsulation/SKILL.md +25 -0
  229. package/localized/zh-CN/skills/fec-refactoring-encapsulation/references/encapsulation-refactorings.md +452 -0
  230. package/localized/zh-CN/skills/fec-refactoring-functions/SKILL.md +25 -0
  231. package/localized/zh-CN/skills/fec-refactoring-functions/references/function-refactorings.md +567 -0
  232. package/localized/zh-CN/skills/fec-refactoring-inheritance/SKILL.md +25 -0
  233. package/localized/zh-CN/skills/fec-refactoring-inheritance/references/inheritance-refactorings.md +550 -0
  234. package/localized/zh-CN/skills/fec-refactoring-move-features/SKILL.md +25 -0
  235. package/localized/zh-CN/skills/fec-refactoring-move-features/references/moving-refactorings.md +453 -0
  236. package/localized/zh-CN/skills/fec-refactoring-validation/SKILL.md +52 -0
  237. package/localized/zh-CN/skills/fec-refactoring-validation/references/behavior-preservation.md +15 -0
  238. package/localized/zh-CN/skills/fec-refactoring-validation/references/refactoring-test-checklist.md +25 -0
  239. package/localized/zh-CN/skills/fec-responsive-layout/SKILL.md +34 -0
  240. package/localized/zh-CN/skills/fec-responsive-layout/references/responsive-layout-patterns.md +70 -0
  241. package/localized/zh-CN/skills/fec-route-protection/SKILL.md +135 -0
  242. package/localized/zh-CN/skills/fec-security-review/SKILL.md +54 -0
  243. package/localized/zh-CN/skills/fec-security-review/references/report-template.md +37 -0
  244. package/localized/zh-CN/skills/fec-security-review/references/security-checklist.md +64 -0
  245. package/localized/zh-CN/skills/fec-source-driven-development/SKILL.md +87 -0
  246. package/localized/zh-CN/skills/fec-state-management/SKILL.md +140 -0
  247. package/localized/zh-CN/skills/fec-state-management/references/state-patterns.md +109 -0
  248. package/localized/zh-CN/skills/fec-storybook-component-doc/SKILL.md +37 -0
  249. package/localized/zh-CN/skills/fec-storybook-component-doc/references/story-patterns.md +118 -0
  250. package/localized/zh-CN/skills/fec-svg-animation/SKILL.md +148 -0
  251. package/localized/zh-CN/skills/fec-tailwind-design-system/SKILL.md +34 -0
  252. package/localized/zh-CN/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +59 -0
  253. package/localized/zh-CN/skills/fec-tdd-workflow/SKILL.md +55 -0
  254. package/localized/zh-CN/skills/fec-testing-strategy/SKILL.md +45 -0
  255. package/localized/zh-CN/skills/fec-typescript-project-standard/SKILL.md +54 -0
  256. package/localized/zh-CN/skills/fec-typescript-project-standard/references/type-safety-patterns.md +102 -0
  257. package/localized/zh-CN/skills/fec-typescript-project-standard/references/type-safety.md +148 -0
  258. package/localized/zh-CN/skills/fec-ui-design/SKILL.md +108 -0
  259. package/localized/zh-CN/skills/fec-ui-design/data/product-rules.json +231 -0
  260. package/localized/zh-CN/skills/fec-ui-design/data/stack-ui-rules.json +146 -0
  261. package/localized/zh-CN/skills/fec-ui-design/data/style-archetypes.json +373 -0
  262. package/localized/zh-CN/skills/fec-ui-design/data/ux-quality-rules.json +203 -0
  263. package/localized/zh-CN/skills/fec-ui-design/references/design-intelligence.md +97 -0
  264. package/localized/zh-CN/skills/fec-ui-design/references/master-page-overrides.md +30 -0
  265. package/localized/zh-CN/skills/fec-ui-design/references/pre-delivery-checklist.md +39 -0
  266. package/localized/zh-CN/skills/fec-ui-design/scripts/design-system.mjs +648 -0
  267. package/localized/zh-CN/skills/fec-validation-fix/SKILL.md +51 -0
  268. package/localized/zh-CN/skills/fec-validation-fix/references/report-template.md +43 -0
  269. package/localized/zh-CN/skills/fec-vite-project-standard/SKILL.md +83 -0
  270. package/localized/zh-CN/skills/fec-vue3-project-standard/SKILL.md +58 -0
  271. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +162 -0
  272. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +13 -0
  273. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-project-structure.md +176 -0
  274. package/localized/zh-CN/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +216 -0
  275. package/localized/zh-CN/skills/fec-web-video-presentation/SKILL.md +61 -0
  276. package/localized/zh-CN/skills/fec-web-video-presentation/data/starter-themes.json +59 -0
  277. package/localized/zh-CN/skills/fec-web-video-presentation/references/chapter-craft.md +37 -0
  278. package/localized/zh-CN/skills/fec-web-video-presentation/references/content-plan.md +38 -0
  279. package/localized/zh-CN/skills/fec-web-video-presentation/references/recording-and-audio.md +33 -0
  280. package/localized/zh-CN/skills/fec-web-video-presentation/references/theme-system.md +36 -0
  281. package/localized/zh-CN/skills/fec-web-video-presentation/scripts/create-video-presentation.mjs +430 -0
  282. package/localized/zh-CN/skills/fec-web-workers/SKILL.md +35 -0
  283. package/localized/zh-CN/skills/fec-web-workers/references/advanced-workers.md +54 -0
  284. package/localized/zh-CN/skills/fec-web-workers/references/basic-worker.md +67 -0
  285. package/localized/zh-CN/skills/metadata.json +2004 -0
  286. package/localized/zh-CN/skills/relations.json +1023 -0
  287. package/localized/zh-CN/templates/claude/CLAUDE.md +106 -0
  288. package/localized/zh-CN/templates/claude/settings.json +62 -0
  289. package/localized/zh-CN/templates/codex/AGENTS.md +105 -0
  290. package/localized/zh-CN/templates/codex/config.toml +32 -0
  291. package/localized/zh-CN/templates/openclaw/AGENTS.md +101 -0
  292. package/localized/zh-CN/templates/openclaw/OPENCLAW-CONFIG.md +12 -0
  293. package/localized/zh-CN/templates/shared/rules/fec-agent-workflow.md +55 -0
  294. package/localized/zh-CN/templates/shared/rules/fec-api-layer.md +99 -0
  295. package/localized/zh-CN/templates/shared/rules/fec-ci-cd.md +40 -0
  296. package/localized/zh-CN/templates/shared/rules/fec-code-comments.md +33 -0
  297. package/localized/zh-CN/templates/shared/rules/fec-design-system.md +72 -0
  298. package/localized/zh-CN/templates/shared/rules/fec-error-handling.md +56 -0
  299. package/localized/zh-CN/templates/shared/rules/fec-git-conventions.md +73 -0
  300. package/localized/zh-CN/templates/shared/rules/fec-i18n.md +64 -0
  301. package/localized/zh-CN/templates/shared/rules/fec-naming-conventions.md +120 -0
  302. package/localized/zh-CN/templates/shared/rules/fec-performance.md +101 -0
  303. package/localized/zh-CN/templates/shared/rules/fec-react.md +82 -0
  304. package/localized/zh-CN/templates/shared/rules/fec-refactoring.md +47 -0
  305. package/localized/zh-CN/templates/shared/rules/fec-rendering-patterns.md +40 -0
  306. package/localized/zh-CN/templates/shared/rules/fec-responsive-design.md +50 -0
  307. package/localized/zh-CN/templates/shared/rules/fec-source-driven-development.md +31 -0
  308. package/localized/zh-CN/templates/shared/rules/fec-state-management.md +60 -0
  309. package/localized/zh-CN/templates/shared/rules/fec-testing.md +98 -0
  310. package/localized/zh-CN/templates/shared/rules/fec-typescript.md +112 -0
  311. package/localized/zh-CN/templates/shared/rules/fec-vue.md +64 -0
  312. package/localized/zh-CN/templates/shared/rules/fec-working-modes.md +50 -0
  313. package/openclaw.plugin.json +2 -3
  314. package/package.json +28 -17
  315. package/skills/TEMPLATE.md +74 -74
  316. package/skills/eval_queries.json +922 -678
  317. package/skills/fec-accessibility-check/SKILL.md +21 -21
  318. package/skills/fec-accessibility-check/references/report-template.md +12 -12
  319. package/skills/fec-accessibility-check/references/screen-reader-testing.md +24 -24
  320. package/skills/fec-alchemy/SKILL.md +50 -50
  321. package/skills/fec-alchemy/assets/absorption-plan-template.md +32 -32
  322. package/skills/fec-alchemy/assets/intake-template.md +55 -55
  323. package/skills/fec-alchemy/assets/review-checklist.md +23 -23
  324. package/skills/fec-alchemy/references/methodology.md +66 -66
  325. package/skills/fec-alchemy/references/originality-and-licensing.md +42 -42
  326. package/skills/fec-api-integration/SKILL.md +61 -61
  327. package/skills/fec-api-integration/references/integration-patterns.md +30 -30
  328. package/skills/fec-backend-requirements-handoff/SKILL.md +25 -25
  329. package/skills/fec-browser-storage/SKILL.md +16 -16
  330. package/skills/fec-browser-storage/references/storage-patterns.md +16 -16
  331. package/skills/fec-canvas-threejs/SKILL.md +21 -21
  332. package/skills/fec-canvas-threejs/references/rendering-patterns.md +10 -10
  333. package/skills/fec-canvas-threejs/references/shader-webgl-patterns.md +37 -37
  334. package/skills/fec-code-review/SKILL.md +113 -94
  335. package/skills/fec-code-review/references/report-template.md +23 -13
  336. package/skills/fec-code-smells/SKILL.md +33 -0
  337. package/skills/fec-code-smells/references/detection-guide.md +25 -0
  338. package/skills/fec-code-smells/references/smell-catalog.md +861 -0
  339. package/skills/fec-code-smells/references/smell-to-refactoring-map.md +265 -0
  340. package/skills/fec-component-testing/SKILL.md +39 -39
  341. package/skills/fec-data-fetching/SKILL.md +16 -16
  342. package/skills/fec-data-fetching/references/query-patterns.md +27 -27
  343. package/skills/fec-debug-framework/SKILL.md +95 -95
  344. package/skills/fec-debug-framework/references/report-template.md +34 -34
  345. package/skills/fec-dependency-upgrade/SKILL.md +17 -17
  346. package/skills/fec-dependency-upgrade/references/dependency-upgrade-workflow.md +31 -31
  347. package/skills/fec-doc-sync/SKILL.md +23 -23
  348. package/skills/fec-drawio-studio/SKILL.md +42 -38
  349. package/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md +1 -1
  350. package/skills/fec-drawio-studio/data/shape-index.json +83570 -0
  351. package/skills/fec-drawio-studio/references/diagram-patterns.md +19 -0
  352. package/skills/fec-drawio-studio/references/flowchart-quality.md +49 -0
  353. package/skills/fec-drawio-studio/references/layout-and-export.md +18 -3
  354. package/skills/fec-drawio-studio/references/xml-and-mermaid.md +5 -1
  355. package/skills/fec-drawio-studio/scripts/diagram-lint.mjs +62 -0
  356. package/skills/fec-drawio-studio/scripts/drawio-export.mjs +134 -0
  357. package/skills/fec-drawio-studio/scripts/shape-query.mjs +55 -15
  358. package/skills/fec-e2e-testing/SKILL.md +24 -24
  359. package/skills/fec-e2e-testing/references/e2e-ci-reporting.md +20 -20
  360. package/skills/fec-e2e-testing/references/e2e-special-scenarios.md +10 -10
  361. package/skills/fec-e2e-testing/references/e2e-visual-regression.md +17 -17
  362. package/skills/fec-e2e-testing/references/playwright-patterns.md +6 -6
  363. package/skills/fec-form-handling/SKILL.md +21 -21
  364. package/skills/fec-form-handling/references/advanced-form-patterns.md +41 -41
  365. package/skills/fec-image-generation/SKILL.md +84 -29
  366. package/skills/fec-image-generation/assets/interactive-diagram.html +371 -0
  367. package/skills/fec-image-generation/assets/quality-examples/README.md +14 -0
  368. package/skills/fec-image-generation/assets/quality-examples/architecture.json +121 -0
  369. package/skills/fec-image-generation/assets/quality-examples/invalid-explicit.json +41 -0
  370. package/skills/fec-image-generation/assets/quality-examples/sequence.json +53 -0
  371. package/skills/fec-image-generation/assets/quality-examples/sequence.mmd +21 -0
  372. package/skills/fec-image-generation/assets/quality-examples/workflow.json +98 -0
  373. package/skills/fec-image-generation/assets/quality-examples/workflow.mmd +7 -0
  374. package/skills/fec-image-generation/references/diagram-workflows.md +41 -3
  375. package/skills/fec-image-generation/references/html-technical-diagrams.md +243 -0
  376. package/skills/fec-image-generation/references/png-qa-autofix.md +9 -2
  377. package/skills/fec-image-generation/scripts/diagram-browser.mjs +90 -0
  378. package/skills/fec-image-generation/scripts/diagram-layout.mjs +176 -0
  379. package/skills/fec-image-generation/scripts/export-diagram.mjs +332 -0
  380. package/skills/fec-image-generation/scripts/interactive-diagram-server.mjs +654 -0
  381. package/skills/fec-image-generation/scripts/mermaid-render.mjs +64 -0
  382. package/skills/fec-image-generation/scripts/png-qa.mjs +35 -4
  383. package/skills/fec-image-generation/scripts/tech-diagram-render.mjs +1537 -0
  384. package/skills/fec-implement-from-design/SKILL.md +81 -81
  385. package/skills/fec-implement-from-design/references/design-plan-template.md +16 -16
  386. package/skills/fec-legacy-to-modern-migration/SKILL.md +29 -29
  387. package/skills/fec-legacy-to-modern-migration/references/migration-execution-checklist.md +81 -81
  388. package/skills/fec-legacy-to-modern-migration/references/migration-report-template.md +37 -37
  389. package/skills/fec-legacy-to-modern-migration/references/migration-strategy-and-mapping.md +31 -31
  390. package/skills/fec-legacy-web-standard/SKILL.md +17 -17
  391. package/skills/fec-legacy-web-standard/references/legacy-patterns.md +16 -16
  392. package/skills/fec-list-virtualization/SKILL.md +16 -16
  393. package/skills/fec-list-virtualization/references/virtualization-patterns.md +31 -31
  394. package/skills/fec-monorepo-project-standard/SKILL.md +52 -52
  395. package/skills/fec-motion-interaction/SKILL.md +51 -51
  396. package/skills/fec-motion-interaction/references/motion-patterns.md +11 -11
  397. package/skills/fec-nextjs-project-standard/SKILL.md +64 -64
  398. package/skills/fec-nuxt-project-standard/SKILL.md +57 -57
  399. package/skills/fec-performance-optimization/SKILL.md +54 -54
  400. package/skills/fec-performance-optimization/references/framework-performance-patterns.md +23 -23
  401. package/skills/fec-performance-optimization/references/report-template.md +31 -31
  402. package/skills/fec-pwa-implementation/SKILL.md +17 -17
  403. package/skills/fec-pwa-implementation/references/manifest-and-icons.md +12 -12
  404. package/skills/fec-pwa-implementation/references/service-worker-workbox.md +13 -13
  405. package/skills/fec-react-project-standard/SKILL.md +72 -72
  406. package/skills/fec-react-project-standard/references/react-performance-patterns.md +28 -28
  407. package/skills/fec-react-project-standard/references/react-project-structure.md +112 -112
  408. package/skills/fec-react-project-standard/references/react-quality-patterns.md +72 -72
  409. package/skills/fec-react-project-standard/references/react-runtime-patterns.md +94 -94
  410. package/skills/fec-refactor-clean/SKILL.md +33 -30
  411. package/skills/fec-refactor-clean/references/report-template.md +23 -23
  412. package/skills/fec-refactoring/SKILL.md +83 -0
  413. package/skills/fec-refactoring/references/principles.md +60 -0
  414. package/skills/fec-refactoring/references/refactoring-vs-feature-change.md +27 -0
  415. package/skills/fec-refactoring/references/when-to-refactor.md +31 -0
  416. package/skills/fec-refactoring/references/workflow.md +90 -0
  417. package/skills/fec-refactoring-api/SKILL.md +25 -0
  418. package/skills/fec-refactoring-api/references/api-refactorings.md +496 -0
  419. package/skills/fec-refactoring-catalog/SKILL.md +28 -0
  420. package/skills/fec-refactoring-catalog/references/catalog-index.md +99 -0
  421. package/skills/fec-refactoring-catalog/references/composition-guide.md +49 -0
  422. package/skills/fec-refactoring-catalog/references/selection-guide.md +47 -0
  423. package/skills/fec-refactoring-control/SKILL.md +25 -0
  424. package/skills/fec-refactoring-control/references/conditional-refactorings.md +299 -0
  425. package/skills/fec-refactoring-data/SKILL.md +25 -0
  426. package/skills/fec-refactoring-data/references/data-refactorings.md +248 -0
  427. package/skills/fec-refactoring-encapsulation/SKILL.md +25 -0
  428. package/skills/fec-refactoring-encapsulation/references/encapsulation-refactorings.md +452 -0
  429. package/skills/fec-refactoring-functions/SKILL.md +25 -0
  430. package/skills/fec-refactoring-functions/references/function-refactorings.md +567 -0
  431. package/skills/fec-refactoring-inheritance/SKILL.md +25 -0
  432. package/skills/fec-refactoring-inheritance/references/inheritance-refactorings.md +550 -0
  433. package/skills/fec-refactoring-move-features/SKILL.md +25 -0
  434. package/skills/fec-refactoring-move-features/references/moving-refactorings.md +453 -0
  435. package/skills/fec-refactoring-validation/SKILL.md +59 -0
  436. package/skills/fec-refactoring-validation/references/behavior-preservation.md +53 -0
  437. package/skills/fec-refactoring-validation/references/refactoring-test-checklist.md +42 -0
  438. package/skills/fec-responsive-layout/SKILL.md +17 -17
  439. package/skills/fec-responsive-layout/references/responsive-layout-patterns.md +37 -37
  440. package/skills/fec-route-protection/SKILL.md +26 -26
  441. package/skills/fec-security-review/SKILL.md +36 -20
  442. package/skills/fec-security-review/references/report-template.md +22 -12
  443. package/skills/fec-security-review/references/security-checklist.md +27 -27
  444. package/skills/fec-source-driven-development/SKILL.md +59 -59
  445. package/skills/fec-state-management/SKILL.md +34 -34
  446. package/skills/fec-state-management/references/state-patterns.md +19 -19
  447. package/skills/fec-storybook-component-doc/SKILL.md +19 -19
  448. package/skills/fec-storybook-component-doc/references/story-patterns.md +12 -12
  449. package/skills/fec-svg-animation/SKILL.md +32 -32
  450. package/skills/fec-tailwind-design-system/SKILL.md +17 -17
  451. package/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md +36 -36
  452. package/skills/fec-tdd-workflow/SKILL.md +32 -28
  453. package/skills/fec-testing-strategy/SKILL.md +29 -29
  454. package/skills/fec-typescript-project-standard/SKILL.md +38 -38
  455. package/skills/fec-typescript-project-standard/references/type-safety-patterns.md +20 -20
  456. package/skills/fec-typescript-project-standard/references/type-safety.md +18 -18
  457. package/skills/fec-ui-design/SKILL.md +90 -90
  458. package/skills/fec-ui-design/references/design-intelligence.md +61 -61
  459. package/skills/fec-ui-design/references/master-page-overrides.md +15 -15
  460. package/skills/fec-ui-design/references/pre-delivery-checklist.md +38 -38
  461. package/skills/fec-validation-fix/SKILL.md +26 -26
  462. package/skills/fec-validation-fix/references/report-template.md +25 -25
  463. package/skills/fec-vite-project-standard/SKILL.md +39 -39
  464. package/skills/fec-vue3-project-standard/SKILL.md +38 -38
  465. package/skills/fec-vue3-project-standard/references/vue3-composables-routing.md +36 -36
  466. package/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md +8 -8
  467. package/skills/fec-vue3-project-standard/references/vue3-project-structure.md +112 -112
  468. package/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md +74 -74
  469. package/skills/fec-web-video-presentation/SKILL.md +33 -33
  470. package/skills/fec-web-workers/SKILL.md +16 -16
  471. package/skills/fec-web-workers/references/advanced-workers.md +13 -13
  472. package/skills/fec-web-workers/references/basic-worker.md +8 -8
  473. package/skills/metadata.json +485 -116
  474. package/skills/relations.json +268 -0
  475. package/templates/claude/CLAUDE.md +60 -60
  476. package/templates/codex/AGENTS.md +76 -76
  477. package/templates/codex/config.toml +4 -4
  478. package/templates/openclaw/AGENTS.md +68 -68
  479. package/templates/openclaw/OPENCLAW-CONFIG.md +8 -8
  480. package/templates/shared/rules/fec-agent-workflow.md +41 -40
  481. package/templates/shared/rules/fec-api-layer.md +52 -52
  482. package/templates/shared/rules/fec-ci-cd.md +29 -29
  483. package/templates/shared/rules/fec-code-comments.md +22 -22
  484. package/templates/shared/rules/fec-design-system.md +53 -53
  485. package/templates/shared/rules/fec-error-handling.md +40 -40
  486. package/templates/shared/rules/fec-git-conventions.md +42 -42
  487. package/templates/shared/rules/fec-i18n.md +48 -48
  488. package/templates/shared/rules/fec-naming-conventions.md +91 -91
  489. package/templates/shared/rules/fec-performance.md +78 -78
  490. package/templates/shared/rules/fec-react.md +58 -58
  491. package/templates/shared/rules/fec-refactoring.md +34 -34
  492. package/templates/shared/rules/fec-rendering-patterns.md +36 -36
  493. package/templates/shared/rules/fec-responsive-design.md +37 -37
  494. package/templates/shared/rules/fec-source-driven-development.md +22 -22
  495. package/templates/shared/rules/fec-state-management.md +56 -56
  496. package/templates/shared/rules/fec-testing.md +64 -64
  497. package/templates/shared/rules/fec-typescript.md +75 -75
  498. package/templates/shared/rules/fec-vue.md +42 -42
  499. package/templates/shared/rules/fec-working-modes.md +34 -34
  500. package/docs/superpowers/plans/2026-05-29-fec-debug.md +0 -491
  501. package/docs/superpowers/specs/2026-05-29-fec-debug-design.md +0 -340
  502. package/skills/fec-drawio-studio/data/shape-index.json.gz +0 -0
@@ -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>
@@ -0,0 +1,14 @@
1
+ # Diagram quality examples
2
+
3
+ The JSON fixtures cover sequence self calls, workflow decisions and loops, and architecture groups with reverse/data/async edges. The Mermaid sources are equivalent text-first examples for standard sequence/workflow rendering. Preserve their labels and relationships when changing layout.
4
+
5
+ ```sh
6
+ node skills/fec-image-generation/scripts/tech-diagram-render.mjs --input skills/fec-image-generation/assets/quality-examples/workflow.json --type workflow --output workflow.html --manifest workflow.layout.json
7
+ node skills/fec-image-generation/scripts/export-diagram.mjs --input workflow.html --format png --output workflow.png --theme light --scale 2 --manifest workflow.layout.json --output-manifest workflow.actual.json
8
+ node skills/fec-image-generation/scripts/png-qa.mjs --png workflow.png --manifest workflow.actual.json --format json
9
+ node skills/fec-image-generation/scripts/mermaid-render.mjs --input skills/fec-image-generation/assets/quality-examples/sequence.mmd --output sequence.svg --report sequence.render.json
10
+ ```
11
+
12
+ Use a local Chromium browser for PNG; set FEC_BROWSER_PATH to its executable when detection fails. Mermaid needs an already installed mmdc; no automatic install or CDN is used. Missing Mermaid must be recorded as unavailable and the HTML route selected. Architecture editing uses the existing fec-drawio-studio skill when available, otherwise the JSON/HTML fixture. Graphviz is optional for dense topology and is not installed automatically.
13
+
14
+ Inspect final PNGs at intended reading size. Check node text against shape interiors, edge labels against arrowheads, branch/return directions, loop visibility, group boundaries and light/dark contrast. Run at 1x and 2x and inspect both. Geometry QA is evidence, not a substitute for visual review. Small explicit node sizes, overlapping explicit coordinates or obstructed explicit waypoints are reported; change the source with user intent preserved. Limit automatic source repairs to two rounds (five only when requested), and report partial acceptance if unresolved.
@@ -0,0 +1,121 @@
1
+ {
2
+ "schema_version": 1,
3
+ "diagram_type": "architecture",
4
+ "meta": {
5
+ "title": "Platform layers and trust boundaries"
6
+ },
7
+ "visual": {
8
+ "style": "minimal"
9
+ },
10
+ "groups": [
11
+ {
12
+ "id": "private",
13
+ "label": "Trusted network / business and data services",
14
+ "x": 360,
15
+ "y": 70,
16
+ "width": 920,
17
+ "height": 470,
18
+ "type": "security"
19
+ }
20
+ ],
21
+ "nodes": [
22
+ {
23
+ "id": "web",
24
+ "label": "Browser application",
25
+ "sublabel": "External entry",
26
+ "type": "browser",
27
+ "x": 70,
28
+ "y": 160,
29
+ "width": 200,
30
+ "height": 112
31
+ },
32
+ {
33
+ "id": "gateway",
34
+ "label": "Identity and request routing gateway",
35
+ "type": "gateway",
36
+ "x": 420,
37
+ "y": 150,
38
+ "width": 220,
39
+ "height": 112,
40
+ "group": "private"
41
+ },
42
+ {
43
+ "id": "service",
44
+ "label": "Order query and approval service",
45
+ "type": "backend",
46
+ "x": 760,
47
+ "y": 150,
48
+ "width": 220,
49
+ "height": 112,
50
+ "group": "private"
51
+ },
52
+ {
53
+ "id": "cache",
54
+ "label": "Short-lived query cache",
55
+ "type": "memory",
56
+ "x": 420,
57
+ "y": 370,
58
+ "width": 220,
59
+ "height": 112,
60
+ "group": "private"
61
+ },
62
+ {
63
+ "id": "db",
64
+ "label": "Order and approval database",
65
+ "type": "database",
66
+ "x": 760,
67
+ "y": 370,
68
+ "width": 220,
69
+ "height": 112,
70
+ "group": "private"
71
+ },
72
+ {
73
+ "id": "queue",
74
+ "label": "Async tasks and notification queue",
75
+ "type": "queue",
76
+ "x": 1060,
77
+ "y": 370,
78
+ "width": 180,
79
+ "height": 112,
80
+ "group": "private"
81
+ }
82
+ ],
83
+ "connections": [
84
+ {
85
+ "from": "web",
86
+ "to": "gateway",
87
+ "label": "Authentication request",
88
+ "flow": "control"
89
+ },
90
+ {
91
+ "from": "gateway",
92
+ "to": "service",
93
+ "label": "Validated request",
94
+ "flow": "control"
95
+ },
96
+ {
97
+ "from": "service",
98
+ "to": "gateway",
99
+ "label": "Query response",
100
+ "flow": "data"
101
+ },
102
+ {
103
+ "from": "service",
104
+ "to": "cache",
105
+ "label": "Read cache",
106
+ "flow": "read"
107
+ },
108
+ {
109
+ "from": "service",
110
+ "to": "db",
111
+ "label": "Query records",
112
+ "flow": "read"
113
+ },
114
+ {
115
+ "from": "service",
116
+ "to": "queue",
117
+ "label": "Submit notification task",
118
+ "flow": "async"
119
+ }
120
+ ]
121
+ }
@@ -0,0 +1,41 @@
1
+ {
2
+ "schema_version": 1,
3
+ "diagram_type": "architecture",
4
+ "meta": {
5
+ "title": "Expected diagnostics"
6
+ },
7
+ "nodes": [
8
+ {
9
+ "id": "tiny",
10
+ "label": "A complete long label that cannot fit explicit size",
11
+ "x": -12,
12
+ "y": 40,
13
+ "width": 48,
14
+ "height": 24
15
+ },
16
+ {
17
+ "id": "overlap",
18
+ "label": "Overlap",
19
+ "x": 20,
20
+ "y": 44,
21
+ "width": 100,
22
+ "height": 60
23
+ }
24
+ ],
25
+ "connections": [
26
+ {
27
+ "from": "tiny",
28
+ "to": "overlap",
29
+ "waypoints": [
30
+ [
31
+ 30,
32
+ 50
33
+ ],
34
+ [
35
+ 800,
36
+ -20
37
+ ]
38
+ ]
39
+ }
40
+ ]
41
+ }
@@ -0,0 +1,53 @@
1
+ {
2
+ "schema_version": 1,
3
+ "diagram_type": "sequence",
4
+ "meta": {
5
+ "title": "Order query and cache refill"
6
+ },
7
+ "participants": [
8
+ {
9
+ "id": "client",
10
+ "label": "Browser client",
11
+ "type": "frontend"
12
+ },
13
+ {
14
+ "id": "api",
15
+ "label": "Order service API",
16
+ "type": "backend"
17
+ },
18
+ {
19
+ "id": "db",
20
+ "label": "Persistent database",
21
+ "type": "database"
22
+ }
23
+ ],
24
+ "messages": [
25
+ {
26
+ "from": "client",
27
+ "to": "api",
28
+ "label": "Query order details and current payment status"
29
+ },
30
+ {
31
+ "from": "api",
32
+ "to": "api",
33
+ "label": "Validate identity and order access"
34
+ },
35
+ {
36
+ "from": "api",
37
+ "to": "db",
38
+ "label": "Cache miss: read order records"
39
+ },
40
+ {
41
+ "from": "db",
42
+ "to": "api",
43
+ "label": "Return order records and payment status",
44
+ "variant": "return"
45
+ },
46
+ {
47
+ "from": "api",
48
+ "to": "client",
49
+ "label": "Return results and update the page",
50
+ "variant": "return"
51
+ }
52
+ ]
53
+ }
@@ -0,0 +1,21 @@
1
+ sequenceDiagram
2
+ participant Web as Browser client
3
+ participant API as Order service API
4
+ participant DB as Persistent database
5
+ Web->>API: Query order details and current payment status
6
+ API->>API: Validate identity and order access
7
+ API->>DB: Cache miss: read order records
8
+ DB-->>API: Return order records and payment status
9
+ API-->>Web: Return results and update the page
10
+
11
+ activate API
12
+ alt Cache hit
13
+ API-->>Web: Return cached result
14
+ else Cache miss
15
+ loop Retry failed query
16
+ API->>DB: Read records
17
+ DB-->>API: Return result
18
+ end
19
+ end
20
+ API-)Web: Async update notification
21
+ deactivate API