scrum-skills 0.3.2 → 0.3.4

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 (365) hide show
  1. package/.agents/skills/diagram-design/LICENSE +4 -0
  2. package/.agents/skills/diagram-design/SKILL.md +423 -0
  3. package/.agents/skills/diagram-design/UPSTREAM.json +88 -0
  4. package/.agents/skills/diagram-design/UPSTREAM.md +23 -0
  5. package/.agents/skills/diagram-design/assets/example-architecture-containment.html +205 -0
  6. package/.agents/skills/diagram-design/assets/example-architecture-delta.html +193 -0
  7. package/.agents/skills/diagram-design/assets/example-architecture.html +183 -0
  8. package/.agents/skills/diagram-design/assets/example-axonometric-plan-campus.html +108 -0
  9. package/.agents/skills/diagram-design/assets/example-axonometric-plan-coffee-shop.html +121 -0
  10. package/.agents/skills/diagram-design/assets/example-axonometric-plan-warehouse.html +127 -0
  11. package/.agents/skills/diagram-design/assets/example-axonometric-plan.html +114 -0
  12. package/.agents/skills/diagram-design/assets/example-bar.html +129 -0
  13. package/.agents/skills/diagram-design/assets/example-beeswarm.html +384 -0
  14. package/.agents/skills/diagram-design/assets/example-box-plot.html +127 -0
  15. package/.agents/skills/diagram-design/assets/example-bubble.html +147 -0
  16. package/.agents/skills/diagram-design/assets/example-bump.html +142 -0
  17. package/.agents/skills/diagram-design/assets/example-data-flow.html +143 -0
  18. package/.agents/skills/diagram-design/assets/example-datalake.html +269 -0
  19. package/.agents/skills/diagram-design/assets/example-db-schema.html +302 -0
  20. package/.agents/skills/diagram-design/assets/example-dependency.html +224 -0
  21. package/.agents/skills/diagram-design/assets/example-deployment.html +190 -0
  22. package/.agents/skills/diagram-design/assets/example-dp-integration.html +81 -0
  23. package/.agents/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  24. package/.agents/skills/diagram-design/assets/example-er.html +202 -0
  25. package/.agents/skills/diagram-design/assets/example-exploded-ai-stack.html +85 -0
  26. package/.agents/skills/diagram-design/assets/example-exploded-keyboard.html +84 -0
  27. package/.agents/skills/diagram-design/assets/example-exploded-phone.html +83 -0
  28. package/.agents/skills/diagram-design/assets/example-exploded-unboxing.html +84 -0
  29. package/.agents/skills/diagram-design/assets/example-exploded.html +83 -0
  30. package/.agents/skills/diagram-design/assets/example-fishbone.html +152 -0
  31. package/.agents/skills/diagram-design/assets/example-flowchart.html +163 -0
  32. package/.agents/skills/diagram-design/assets/example-gantt.html +137 -0
  33. package/.agents/skills/diagram-design/assets/example-heatmap.html +224 -0
  34. package/.agents/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  35. package/.agents/skills/diagram-design/assets/example-high-level.html +301 -0
  36. package/.agents/skills/diagram-design/assets/example-import-drawio.html +185 -0
  37. package/.agents/skills/diagram-design/assets/example-import-excalidraw.html +70 -0
  38. package/.agents/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  39. package/.agents/skills/diagram-design/assets/example-it-state.html +128 -0
  40. package/.agents/skills/diagram-design/assets/example-journey.html +148 -0
  41. package/.agents/skills/diagram-design/assets/example-kanban.html +174 -0
  42. package/.agents/skills/diagram-design/assets/example-layers.html +123 -0
  43. package/.agents/skills/diagram-design/assets/example-line.html +111 -0
  44. package/.agents/skills/diagram-design/assets/example-loop.html +100 -0
  45. package/.agents/skills/diagram-design/assets/example-marimekko.html +148 -0
  46. package/.agents/skills/diagram-design/assets/example-medallion.html +159 -0
  47. package/.agents/skills/diagram-design/assets/example-nested.html +136 -0
  48. package/.agents/skills/diagram-design/assets/example-org-chart.html +45 -0
  49. package/.agents/skills/diagram-design/assets/example-polar.html +116 -0
  50. package/.agents/skills/diagram-design/assets/example-process.html +64 -0
  51. package/.agents/skills/diagram-design/assets/example-pyramid.html +119 -0
  52. package/.agents/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  53. package/.agents/skills/diagram-design/assets/example-quadrant.html +135 -0
  54. package/.agents/skills/diagram-design/assets/example-radar.html +139 -0
  55. package/.agents/skills/diagram-design/assets/example-ridgeline.html +104 -0
  56. package/.agents/skills/diagram-design/assets/example-sankey.html +150 -0
  57. package/.agents/skills/diagram-design/assets/example-scatter.html +141 -0
  58. package/.agents/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  59. package/.agents/skills/diagram-design/assets/example-sequence.html +222 -0
  60. package/.agents/skills/diagram-design/assets/example-service-blueprint.html +185 -0
  61. package/.agents/skills/diagram-design/assets/example-slopegraph.html +119 -0
  62. package/.agents/skills/diagram-design/assets/example-state-lifecycle.html +92 -0
  63. package/.agents/skills/diagram-design/assets/example-state.html +147 -0
  64. package/.agents/skills/diagram-design/assets/example-story-map.html +184 -0
  65. package/.agents/skills/diagram-design/assets/example-streamgraph.html +99 -0
  66. package/.agents/skills/diagram-design/assets/example-swimlane.html +172 -0
  67. package/.agents/skills/diagram-design/assets/example-timeline.html +135 -0
  68. package/.agents/skills/diagram-design/assets/example-tree-block-decomposition.html +151 -0
  69. package/.agents/skills/diagram-design/assets/example-tree.html +173 -0
  70. package/.agents/skills/diagram-design/assets/example-treemap.html +107 -0
  71. package/.agents/skills/diagram-design/assets/example-uml-class.html +188 -0
  72. package/.agents/skills/diagram-design/assets/example-venn.html +110 -0
  73. package/.agents/skills/diagram-design/assets/example-wardley.html +153 -0
  74. package/.agents/skills/diagram-design/assets/example-waterfall.html +129 -0
  75. package/.agents/skills/diagram-design/assets/template-dark.html +99 -0
  76. package/.agents/skills/diagram-design/assets/template-full.html +421 -0
  77. package/.agents/skills/diagram-design/assets/template-motion.html +448 -0
  78. package/.agents/skills/diagram-design/assets/template-terminal.html +188 -0
  79. package/.agents/skills/diagram-design/assets/template.html +100 -0
  80. package/.agents/skills/diagram-design/references/animation.md +143 -0
  81. package/.agents/skills/diagram-design/references/export-registry.md +78 -0
  82. package/.agents/skills/diagram-design/references/export.md +376 -0
  83. package/.agents/skills/diagram-design/references/import-drawio.md +181 -0
  84. package/.agents/skills/diagram-design/references/import-excalidraw.md +130 -0
  85. package/.agents/skills/diagram-design/references/import-mermaid.md +137 -0
  86. package/.agents/skills/diagram-design/references/layout-budget.md +97 -0
  87. package/.agents/skills/diagram-design/references/onboarding.md +368 -0
  88. package/.agents/skills/diagram-design/references/output-spec.md +277 -0
  89. package/.agents/skills/diagram-design/references/primitive-annotation.md +36 -0
  90. package/.agents/skills/diagram-design/references/primitive-icons.md +827 -0
  91. package/.agents/skills/diagram-design/references/primitive-sketchy.md +43 -0
  92. package/.agents/skills/diagram-design/references/primitive-terminal.md +76 -0
  93. package/.agents/skills/diagram-design/references/primitives-core.md +150 -0
  94. package/.agents/skills/diagram-design/references/profiles.md +183 -0
  95. package/.agents/skills/diagram-design/references/semantic-patterns.md +154 -0
  96. package/.agents/skills/diagram-design/references/style-guide.md +236 -0
  97. package/.agents/skills/diagram-design/references/style-vivid.md +148 -0
  98. package/.agents/skills/diagram-design/references/type-architecture-delta.md +143 -0
  99. package/.agents/skills/diagram-design/references/type-architecture.md +117 -0
  100. package/.agents/skills/diagram-design/references/type-axonometric-plan.md +83 -0
  101. package/.agents/skills/diagram-design/references/type-bar.md +108 -0
  102. package/.agents/skills/diagram-design/references/type-data-flow.md +371 -0
  103. package/.agents/skills/diagram-design/references/type-db-schema.md +48 -0
  104. package/.agents/skills/diagram-design/references/type-dependency.md +44 -0
  105. package/.agents/skills/diagram-design/references/type-deployment.md +45 -0
  106. package/.agents/skills/diagram-design/references/type-dp-integration.md +407 -0
  107. package/.agents/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  108. package/.agents/skills/diagram-design/references/type-er.md +25 -0
  109. package/.agents/skills/diagram-design/references/type-exploded.md +115 -0
  110. package/.agents/skills/diagram-design/references/type-fishbone.md +75 -0
  111. package/.agents/skills/diagram-design/references/type-flowchart.md +23 -0
  112. package/.agents/skills/diagram-design/references/type-gantt.md +45 -0
  113. package/.agents/skills/diagram-design/references/type-heatmap.md +80 -0
  114. package/.agents/skills/diagram-design/references/type-high-level.md +470 -0
  115. package/.agents/skills/diagram-design/references/type-it-state.md +468 -0
  116. package/.agents/skills/diagram-design/references/type-journey.md +55 -0
  117. package/.agents/skills/diagram-design/references/type-kanban.md +49 -0
  118. package/.agents/skills/diagram-design/references/type-layers.md +26 -0
  119. package/.agents/skills/diagram-design/references/type-line.md +337 -0
  120. package/.agents/skills/diagram-design/references/type-loop.md +223 -0
  121. package/.agents/skills/diagram-design/references/type-medallion.md +356 -0
  122. package/.agents/skills/diagram-design/references/type-nested.md +22 -0
  123. package/.agents/skills/diagram-design/references/type-org-chart.md +44 -0
  124. package/.agents/skills/diagram-design/references/type-polar.md +136 -0
  125. package/.agents/skills/diagram-design/references/type-process.md +490 -0
  126. package/.agents/skills/diagram-design/references/type-pyramid.md +33 -0
  127. package/.agents/skills/diagram-design/references/type-quadrant.md +81 -0
  128. package/.agents/skills/diagram-design/references/type-radar.md +82 -0
  129. package/.agents/skills/diagram-design/references/type-sankey.md +75 -0
  130. package/.agents/skills/diagram-design/references/type-scatter.md +276 -0
  131. package/.agents/skills/diagram-design/references/type-sequence.md +130 -0
  132. package/.agents/skills/diagram-design/references/type-service-blueprint.md +103 -0
  133. package/.agents/skills/diagram-design/references/type-state.md +30 -0
  134. package/.agents/skills/diagram-design/references/type-story-map.md +46 -0
  135. package/.agents/skills/diagram-design/references/type-swimlane.md +22 -0
  136. package/.agents/skills/diagram-design/references/type-timeline.md +20 -0
  137. package/.agents/skills/diagram-design/references/type-tree.md +24 -0
  138. package/.agents/skills/diagram-design/references/type-treemap.md +137 -0
  139. package/.agents/skills/diagram-design/references/type-uml-class.md +65 -0
  140. package/.agents/skills/diagram-design/references/type-venn.md +26 -0
  141. package/.agents/skills/diagram-design/references/type-wardley.md +39 -0
  142. package/.agents/skills/diagram-design/references/type-waterfall.md +75 -0
  143. package/.agents/skills/scrum-meta/SKILL.md +36 -36
  144. package/.agents/skills/scrum-planning/SKILL.md +61 -61
  145. package/.agents/skills/scrum-planning/references/schema.md +384 -336
  146. package/.agents/skills/scrum-report/SKILL.md +42 -42
  147. package/.agents/skills/scrum-sprint/SKILL.md +49 -49
  148. package/.agents/skills/scrum-tdd/SKILL.md +140 -127
  149. package/README.md +24 -1
  150. package/assets/board/200.html +1 -1
  151. package/assets/board/404.html +1 -1
  152. package/assets/board/_nuxt/4gQF_HS3.js +1 -0
  153. package/assets/board/_nuxt/5okfNy5D.js +1 -0
  154. package/assets/board/_nuxt/{Bb3Limos.js → B0C2jsdk.js} +1 -1
  155. package/assets/board/_nuxt/B1j6UC4U.js +1 -0
  156. package/assets/board/_nuxt/B3LKy6o2.js +1 -0
  157. package/assets/board/_nuxt/BAQQngAq.js +13 -0
  158. package/assets/board/_nuxt/BE6t7Q2m.js +1 -0
  159. package/assets/board/_nuxt/BGwhkDRl.js +1 -0
  160. package/assets/board/_nuxt/BLvbupFS.js +1 -0
  161. package/assets/board/_nuxt/BQgzP7ur.js +1 -0
  162. package/assets/board/_nuxt/BRZIF_wo.js +1 -0
  163. package/assets/board/_nuxt/BU8vdZUs.js +95 -0
  164. package/assets/board/_nuxt/BW3xJdEx.js +1 -0
  165. package/assets/board/_nuxt/{Cm9lkUvP.js → BY36DFyj.js} +1 -1
  166. package/assets/board/_nuxt/BZlZD94i.js +1 -0
  167. package/assets/board/_nuxt/BZvXNwev.js +3 -0
  168. package/assets/board/_nuxt/BiWrMOsL.js +1 -0
  169. package/assets/board/_nuxt/BkoKCNUY.js +1 -0
  170. package/assets/board/_nuxt/BlKmZhhF.js +1 -0
  171. package/assets/board/_nuxt/BmBpmU73.js +1 -0
  172. package/assets/board/_nuxt/BmrSh0rL.js +1 -0
  173. package/assets/board/_nuxt/BrWE0up6.js +1 -0
  174. package/assets/board/_nuxt/Bs52qkgk.js +1 -0
  175. package/assets/board/_nuxt/BuBzMkFZ.js +1 -0
  176. package/assets/board/_nuxt/Bubk0xn-.js +1 -0
  177. package/assets/board/_nuxt/BxuBMtk_.js +3 -0
  178. package/assets/board/_nuxt/By1KXXLR.js +1 -0
  179. package/assets/board/_nuxt/BygIGL69.js +2 -0
  180. package/assets/board/_nuxt/C-fx-vFO.js +1 -0
  181. package/assets/board/_nuxt/C1iO5KH3.js +1 -0
  182. package/assets/board/_nuxt/C2YPmTzt.js +1 -0
  183. package/assets/board/_nuxt/C3SpAhCW.js +1 -0
  184. package/assets/board/_nuxt/C3ZRWz5L.js +1 -0
  185. package/assets/board/_nuxt/C4WdPP6K.js +1 -0
  186. package/assets/board/_nuxt/C6o03JHe.js +1 -0
  187. package/assets/board/_nuxt/C8qB5llI.js +1 -0
  188. package/assets/board/_nuxt/C9MgRdhu.js +1 -0
  189. package/assets/board/_nuxt/CCA81-4P.js +1 -0
  190. package/assets/board/_nuxt/{D2O8Q8x9.js → CFCM18fF.js} +1 -1
  191. package/assets/board/_nuxt/CGXljzd_.js +1 -0
  192. package/assets/board/_nuxt/CI0scS-N.js +1 -0
  193. package/assets/board/_nuxt/CJs9B42o.js +1 -0
  194. package/assets/board/_nuxt/COmtTtfB.js +1 -0
  195. package/assets/board/_nuxt/CPYm4J_K.js +1 -0
  196. package/assets/board/_nuxt/CXG7GZes.js +1 -0
  197. package/assets/board/_nuxt/CYGiZn-X.js +1 -0
  198. package/assets/board/_nuxt/CaE8VlUp.js +1 -0
  199. package/assets/board/_nuxt/Cajxc4Dw.js +1 -0
  200. package/assets/board/_nuxt/CcGiNUgA.js +1 -0
  201. package/assets/board/_nuxt/Ccgv3lDj.js +1 -0
  202. package/assets/board/_nuxt/CdPGFZyy.js +1 -0
  203. package/assets/board/_nuxt/{DfR3IZN_.js → Cdf_T8Xa.js} +1 -1
  204. package/assets/board/_nuxt/CgQ30j_6.js +1 -0
  205. package/assets/board/_nuxt/Ck0-FqVI.js +1 -0
  206. package/assets/board/_nuxt/CkWKLtjO.js +1 -0
  207. package/assets/board/_nuxt/CoipdpDu.js +1 -0
  208. package/assets/board/_nuxt/Cq7hsCKB.js +1 -0
  209. package/assets/board/_nuxt/D166WVUG.js +1 -0
  210. package/assets/board/_nuxt/D1V1gysQ.js +1 -0
  211. package/assets/board/_nuxt/D4Dpzo9e.js +1 -0
  212. package/assets/board/_nuxt/D5i92OZO.js +1 -0
  213. package/assets/board/_nuxt/D6dUp4Nm.js +9 -0
  214. package/assets/board/_nuxt/DFQDFspC.js +1 -0
  215. package/assets/board/_nuxt/DHX2tw9J.js +1 -0
  216. package/assets/board/_nuxt/DJM7u8P3.js +1 -0
  217. package/assets/board/_nuxt/{BPTrRhcw.js → DLr85ebo.js} +1 -1
  218. package/assets/board/_nuxt/DOMM1wfl.js +1 -0
  219. package/assets/board/_nuxt/DU6ArlUN.js +1 -0
  220. package/assets/board/_nuxt/{B_SlFcWp.js → DUgGsde6.js} +1 -1
  221. package/assets/board/_nuxt/DV4ti-Pq.js +1 -0
  222. package/assets/board/_nuxt/D_ct-Stz.js +2 -0
  223. package/assets/board/_nuxt/DbWAComO.js +1 -0
  224. package/assets/board/_nuxt/DbwlcHAt.js +1 -0
  225. package/assets/board/_nuxt/Dki9VkAL.js +3 -0
  226. package/assets/board/_nuxt/DlNJhOoc.js +1 -0
  227. package/assets/board/_nuxt/Dmg78zOY.js +3 -0
  228. package/assets/board/_nuxt/DqG7CtD4.js +1 -0
  229. package/assets/board/_nuxt/DqUSsCJ2.js +1 -0
  230. package/assets/board/_nuxt/Du2F4WXh.js +1 -0
  231. package/assets/board/_nuxt/DuRiEXn4.js +1 -0
  232. package/assets/board/_nuxt/DwCE3305.js +1 -0
  233. package/assets/board/_nuxt/DwzGxoX2.js +1 -0
  234. package/assets/board/_nuxt/DxBwVNyP.js +2 -0
  235. package/assets/board/_nuxt/DzmVW5-D.js +1 -0
  236. package/assets/board/_nuxt/I-sGtDIB.js +6 -0
  237. package/assets/board/_nuxt/JU9-x68N.js +1 -0
  238. package/assets/board/_nuxt/Lozm7hhE.js +1 -0
  239. package/assets/board/_nuxt/MMsTMkcB.js +1 -0
  240. package/assets/board/_nuxt/MS7CGmCB.js +1 -0
  241. package/assets/board/_nuxt/OKKaKILz.js +1 -0
  242. package/assets/board/_nuxt/{Csqgy925.js → P6qlvBHA.js} +1 -1
  243. package/assets/board/_nuxt/SrNUvNwO.js +1 -0
  244. package/assets/board/_nuxt/{DSaWoFHS.js → SywdkA98.js} +1 -1
  245. package/assets/board/_nuxt/TBIRpVLG.js +1 -0
  246. package/assets/board/_nuxt/TlTrMIMm.js +1 -0
  247. package/assets/board/_nuxt/Utb4TVOl.js +1 -0
  248. package/assets/board/_nuxt/Zv9-SOQF.js +1 -0
  249. package/assets/board/_nuxt/_id_.B6iqDPxe.css +1 -0
  250. package/assets/board/_nuxt/b7xtxFRl.js +1 -0
  251. package/assets/board/_nuxt/builds/latest.json +1 -1
  252. package/assets/board/_nuxt/builds/meta/08bebe14-0f1b-4d2a-8de4-e84e122d10e9.json +1 -0
  253. package/assets/board/_nuxt/diagrams.pyhqNtmr.css +1 -0
  254. package/assets/board/_nuxt/{entry.CKHePurH.css → entry.BBv-sBnP.css} +1 -1
  255. package/assets/board/_nuxt/error-404.CgJNdpB5.css +1 -0
  256. package/assets/board/_nuxt/error-500.WYSoH44y.css +1 -0
  257. package/assets/board/_nuxt/jbri6q1p.js +1 -0
  258. package/assets/board/_nuxt/q_8bxRMt.js +1 -0
  259. package/assets/board/burndown/index.html +1 -1
  260. package/assets/board/diagrams/index.html +1 -0
  261. package/assets/board/epics/index.html +1 -1
  262. package/assets/board/gantt/index.html +1 -1
  263. package/assets/board/index.html +1 -1
  264. package/assets/board/last-change/index.html +1 -1
  265. package/assets/board/milestones/index.html +1 -1
  266. package/assets/board/tests/index.html +1 -1
  267. package/bin/scrum-skills.mjs +13 -0
  268. package/package.json +2 -1
  269. package/templates/AGENTS.md +10 -0
  270. package/tools/diagram-import.mjs +238 -0
  271. package/tools/diagram-lint.mjs +518 -0
  272. package/tools/diagram.mjs +299 -0
  273. package/tools/last-change.mjs +326 -326
  274. package/tools/projects.mjs +29 -4
  275. package/tools/serve.mjs +27 -1
  276. package/tools/validate.mjs +781 -664
  277. package/assets/board/_nuxt/1eqboJxR.js +0 -1
  278. package/assets/board/_nuxt/2K7ag6ES.js +0 -1
  279. package/assets/board/_nuxt/51OWHj8c.js +0 -2
  280. package/assets/board/_nuxt/6gFtTBwm.js +0 -1
  281. package/assets/board/_nuxt/B3jkABw9.js +0 -1
  282. package/assets/board/_nuxt/B5n2_jZN.js +0 -1
  283. package/assets/board/_nuxt/BDK2Hj7B.js +0 -1
  284. package/assets/board/_nuxt/BDcnzXHq.js +0 -1
  285. package/assets/board/_nuxt/BaG8y0Wt.js +0 -1
  286. package/assets/board/_nuxt/BbwJq5pb.js +0 -1
  287. package/assets/board/_nuxt/BgLeKwx0.js +0 -1
  288. package/assets/board/_nuxt/Bi9Axj3V.js +0 -1
  289. package/assets/board/_nuxt/BmxvtaMq.js +0 -1
  290. package/assets/board/_nuxt/BodFvto3.js +0 -1
  291. package/assets/board/_nuxt/BpWeHLuN.js +0 -1
  292. package/assets/board/_nuxt/BuOKDFiJ.js +0 -1
  293. package/assets/board/_nuxt/C40iTe-x.js +0 -1
  294. package/assets/board/_nuxt/C7K0R7F-.js +0 -2
  295. package/assets/board/_nuxt/C8vL692X.js +0 -1
  296. package/assets/board/_nuxt/C9StZL3D.js +0 -3
  297. package/assets/board/_nuxt/CGI_ZV79.js +0 -1
  298. package/assets/board/_nuxt/CJ2mz0WY.js +0 -1
  299. package/assets/board/_nuxt/CJMBJQuf.js +0 -1
  300. package/assets/board/_nuxt/CK-lOYG9.js +0 -1
  301. package/assets/board/_nuxt/CK9_veoz.js +0 -1
  302. package/assets/board/_nuxt/CLBcBrYf.js +0 -1
  303. package/assets/board/_nuxt/CMUi2-Lj.js +0 -1
  304. package/assets/board/_nuxt/COf6E6h4.js +0 -1
  305. package/assets/board/_nuxt/CPCUMJnF.js +0 -1
  306. package/assets/board/_nuxt/CPcKlmSm.js +0 -1
  307. package/assets/board/_nuxt/CQTvWh4i.js +0 -1
  308. package/assets/board/_nuxt/CSEEUF8S.js +0 -1
  309. package/assets/board/_nuxt/CSSb154I.js +0 -13
  310. package/assets/board/_nuxt/CgDTd7jS.js +0 -1
  311. package/assets/board/_nuxt/ChG76uh9.js +0 -1
  312. package/assets/board/_nuxt/Ci0qbkgh.js +0 -1
  313. package/assets/board/_nuxt/CqoQ__I_.js +0 -1
  314. package/assets/board/_nuxt/CuJUHLl8.js +0 -1
  315. package/assets/board/_nuxt/CvLiA4_O.js +0 -1
  316. package/assets/board/_nuxt/Cvs12oA0.js +0 -3
  317. package/assets/board/_nuxt/CyEXFe3V.js +0 -1
  318. package/assets/board/_nuxt/Cz6rZcLK.js +0 -1
  319. package/assets/board/_nuxt/D2FhHl1o.js +0 -1
  320. package/assets/board/_nuxt/D3YCAmfu.js +0 -1
  321. package/assets/board/_nuxt/D5CE81jK.js +0 -1
  322. package/assets/board/_nuxt/D75vbfSb.js +0 -1
  323. package/assets/board/_nuxt/D99LbGfb.js +0 -9
  324. package/assets/board/_nuxt/DEfLc7p3.js +0 -6
  325. package/assets/board/_nuxt/DF-nsa1Z.js +0 -1
  326. package/assets/board/_nuxt/DIc8yx98.js +0 -1
  327. package/assets/board/_nuxt/DLkAKotw.js +0 -1
  328. package/assets/board/_nuxt/DRPlYvb3.js +0 -1
  329. package/assets/board/_nuxt/DRlQgul3.js +0 -1
  330. package/assets/board/_nuxt/DSLbmoWa.js +0 -1
  331. package/assets/board/_nuxt/DWO9c9yp.js +0 -1
  332. package/assets/board/_nuxt/DZo3dYLJ.js +0 -3
  333. package/assets/board/_nuxt/D_S6N7_b.js +0 -1
  334. package/assets/board/_nuxt/DajA-Tkt.js +0 -1
  335. package/assets/board/_nuxt/DbHiyab-.js +0 -1
  336. package/assets/board/_nuxt/Dc7Ql6eE.js +0 -1
  337. package/assets/board/_nuxt/Dd9ZukPU.js +0 -1
  338. package/assets/board/_nuxt/Dg2LiqmN.js +0 -1
  339. package/assets/board/_nuxt/DhuleNnm.js +0 -1
  340. package/assets/board/_nuxt/DkI1Qxpp.js +0 -95
  341. package/assets/board/_nuxt/DnDHGSYI.js +0 -1
  342. package/assets/board/_nuxt/DpXJ_tCU.js +0 -1
  343. package/assets/board/_nuxt/DqZgF3hU.js +0 -1
  344. package/assets/board/_nuxt/DqcxvfbD.js +0 -1
  345. package/assets/board/_nuxt/DsA2lVci.js +0 -1
  346. package/assets/board/_nuxt/Dtsa-1NS.js +0 -1
  347. package/assets/board/_nuxt/Du91iq0p.js +0 -1
  348. package/assets/board/_nuxt/Dx1wcYFo.js +0 -1
  349. package/assets/board/_nuxt/EYTShbt4.js +0 -1
  350. package/assets/board/_nuxt/MaXJprwN.js +0 -1
  351. package/assets/board/_nuxt/P9x67aq2.js +0 -1
  352. package/assets/board/_nuxt/S08nFESZ.js +0 -3
  353. package/assets/board/_nuxt/V0uynWE2.js +0 -1
  354. package/assets/board/_nuxt/Vo4wMbnS.js +0 -1
  355. package/assets/board/_nuxt/ZVTqot-_.js +0 -1
  356. package/assets/board/_nuxt/ZngEd3HB.js +0 -1
  357. package/assets/board/_nuxt/_id_.B2NDKSlX.css +0 -1
  358. package/assets/board/_nuxt/assMu_Wn.js +0 -1
  359. package/assets/board/_nuxt/builds/meta/8e23aec9-5b67-4569-b8bf-d4f07e50ffdf.json +0 -1
  360. package/assets/board/_nuxt/error-404.BFmXOnCT.css +0 -1
  361. package/assets/board/_nuxt/error-500.BZ-DdjQ6.css +0 -1
  362. package/assets/board/_nuxt/rlePnzpc.js +0 -1
  363. package/assets/board/_nuxt/uKzCKCTq.js +0 -1
  364. package/assets/board/_nuxt/vwxaNGfc.js +0 -1
  365. package/assets/board/_nuxt/yh6sf_D5.js +0 -1
package/.agents/skills/diagram-design/assets/example-service-blueprint.html ADDED
@@ -0,0 +1,185 @@
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.0">
6
+ <title>Trial to paid — what the customer never sees · Service blueprint</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-accent: #bf4520;
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+ body {
20
+ font-family: var(--font-sans);
21
+ background: var(--color-paper);
22
+ color: var(--color-ink);
23
+ min-height: 100vh;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ padding: 3rem 2rem;
28
+ }
29
+ .frame { max-width: 1280px; width: 100%; }
30
+ .eyebrow {
31
+ font-family: var(--font-mono);
32
+ font-size: 0.66rem;
33
+ font-weight: 500;
34
+ letter-spacing: 0.18em;
35
+ text-transform: uppercase;
36
+ color: var(--color-muted);
37
+ margin-bottom: 0.5rem;
38
+ }
39
+ h1 {
40
+ font-family: var(--font-serif);
41
+ font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
42
+ font-weight: 400;
43
+ letter-spacing: -0.02em;
44
+ line-height: 1.15;
45
+ color: var(--color-ink);
46
+ margin-bottom: 1.5rem;
47
+ }
48
+ .diagram-container { width: 100%; overflow-x: auto; }
49
+ svg { width: 100%; min-width: 1280px; display: block; }
50
+ @media print {
51
+ .diagram-container { overflow-x: visible; }
52
+ svg { min-width: 0; }
53
+ }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="frame">
58
+ <p class="eyebrow">Service blueprint · Diagram Design</p>
59
+ <h1>Trial to paid — what the customer never sees</h1>
60
+
61
+ <div class="diagram-container">
62
+ <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-title service-blueprint-desc">
63
+ <title id="service-blueprint-title">Trial to paid — what the customer never sees</title>
64
+ <desc id="service-blueprint-desc">Service blueprint of a trial-to-paid path across five stages, with customer and frontstage actions above a line of visibility and a focal backstage dunning-job timeout under Hit the limit.</desc>
65
+ <defs>
66
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
67
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
68
+ </pattern>
69
+ </defs>
70
+
71
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
72
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
73
+ <rect x="96" y="272" width="1104" height="120" fill="rgba(45,49,66,0.03)"/>
74
+ <rect x="96" y="24" width="208" height="48" fill="none" data-stage="sign-up"/>
75
+ <text x="200" y="40" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.14em">STAGE 1</text>
76
+ <text x="200" y="60" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Sign up</text>
77
+ <rect x="320" y="24" width="208" height="48" fill="none" data-stage="activate"/>
78
+ <text x="424" y="40" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.14em">STAGE 2</text>
79
+ <text x="424" y="60" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Activate</text>
80
+ <rect x="544" y="24" width="208" height="48" fill="none" data-stage="hit-limit"/>
81
+ <text x="648" y="40" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.14em">STAGE 3</text>
82
+ <text x="648" y="60" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Hit the limit</text>
83
+ <rect x="768" y="24" width="208" height="48" fill="none" data-stage="upgrade"/>
84
+ <text x="872" y="40" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.14em">STAGE 4</text>
85
+ <text x="872" y="60" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Upgrade</text>
86
+ <rect x="992" y="24" width="208" height="48" fill="none" data-stage="invoice"/>
87
+ <text x="1096" y="40" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.14em">STAGE 5</text>
88
+ <text x="1096" y="60" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">First invoice</text>
89
+ <line x1="96" y1="196" x2="1200" y2="196" stroke="rgba(45,49,66,0.18)" stroke-width="1" data-role="interaction"/>
90
+ <line x1="96" y1="268" x2="1200" y2="268" stroke="rgba(45,49,66,0.55)" stroke-width="2" data-role="visibility"/>
91
+ <line x1="96" y1="340" x2="1200" y2="340" stroke="rgba(45,49,66,0.18)" stroke-width="1" data-role="internal-interaction"/>
92
+ <g data-layer="evidence">
93
+ <text x="88" y="107" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.12em">EVIDENCE</text>
94
+ <rect x="96" y="80" width="208" height="48" rx="4" fill="#ffffff"/>
95
+ <rect x="96" y="80" width="208" height="48" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="sign-up" data-name="Welcome email"/>
96
+ <text x="200" y="108" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Welcome email</text>
97
+ <rect x="320" y="80" width="208" height="48" rx="4" fill="#ffffff"/>
98
+ <rect x="320" y="80" width="208" height="48" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="activate" data-name="Product UI"/>
99
+ <text x="424" y="108" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Product UI</text>
100
+ <rect x="544" y="80" width="208" height="48" rx="4" fill="#ffffff"/>
101
+ <rect x="544" y="80" width="208" height="48" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="hit-limit" data-name="Paywall"/>
102
+ <text x="648" y="108" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Paywall</text>
103
+ <rect x="768" y="80" width="208" height="48" rx="4" fill="#ffffff"/>
104
+ <rect x="768" y="80" width="208" height="48" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="upgrade" data-name="Checkout form"/>
105
+ <text x="872" y="108" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Checkout form</text>
106
+ <rect x="992" y="80" width="208" height="48" rx="4" fill="#ffffff"/>
107
+ <rect x="992" y="80" width="208" height="48" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="invoice" data-name="PDF invoice"/>
108
+ <text x="1096" y="108" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">PDF invoice</text>
109
+ </g>
110
+ <g data-layer="customer">
111
+ <text x="88" y="163" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.12em">CUSTOMER</text>
112
+ <rect x="96" y="128" width="208" height="64" rx="4" fill="#ffffff"/>
113
+ <rect x="96" y="128" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="sign-up" data-name="Create account"/>
114
+ <text x="200" y="164" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Create account</text>
115
+ <rect x="320" y="128" width="208" height="64" rx="4" fill="#ffffff"/>
116
+ <rect x="320" y="128" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="activate" data-name="Use product"/>
117
+ <text x="424" y="164" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Use product</text>
118
+ <rect x="544" y="128" width="208" height="64" rx="4" fill="#ffffff"/>
119
+ <rect x="544" y="128" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="hit-limit" data-name="Retry payment"/>
120
+ <text x="648" y="164" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Retry payment</text>
121
+ <rect x="768" y="128" width="208" height="64" rx="4" fill="#ffffff"/>
122
+ <rect x="768" y="128" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="upgrade" data-name="Pick plan"/>
123
+ <text x="872" y="164" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Pick plan</text>
124
+ <rect x="992" y="128" width="208" height="64" rx="4" fill="#ffffff"/>
125
+ <rect x="992" y="128" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="invoice" data-name="Read bill"/>
126
+ <text x="1096" y="164" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Read bill</text>
127
+ </g>
128
+ <g data-layer="frontstage">
129
+ <text x="88" y="235" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.12em">FRONTSTAGE</text>
130
+ <rect x="96" y="200" width="208" height="64" rx="4" fill="#ffffff"/>
131
+ <rect x="96" y="200" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="sign-up" data-name="Welcome"/>
132
+ <text x="200" y="236" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Welcome</text>
133
+ <rect x="320" y="200" width="208" height="64" rx="4" fill="#ffffff"/>
134
+ <rect x="320" y="200" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="activate" data-name="In-app nags"/>
135
+ <text x="424" y="236" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">In-app nags</text>
136
+ <rect x="544" y="200" width="208" height="64" rx="4" fill="#ffffff"/>
137
+ <rect x="544" y="200" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="hit-limit" data-name="Pay modal"/>
138
+ <text x="648" y="236" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Pay modal</text>
139
+ <rect x="768" y="200" width="208" height="64" rx="4" fill="#ffffff"/>
140
+ <rect x="768" y="200" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="upgrade" data-name="Checkout"/>
141
+ <text x="872" y="236" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Checkout</text>
142
+ <rect x="992" y="200" width="208" height="64" rx="4" fill="#ffffff"/>
143
+ <rect x="992" y="200" width="208" height="64" rx="4" fill="#ffffff" stroke="#2d3142" stroke-width="1" data-stage="invoice" data-name="Receipt"/>
144
+ <text x="1096" y="236" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Receipt</text>
145
+ </g>
146
+ <g data-layer="backstage">
147
+ <text x="88" y="307" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.12em">BACKSTAGE</text>
148
+ <rect x="96" y="272" width="208" height="64" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="sign-up" data-name="CRM write"/>
149
+ <text x="200" y="308" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">CRM write</text>
150
+ <rect x="320" y="272" width="208" height="64" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="activate" data-name="Usage meter"/>
151
+ <text x="424" y="308" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Usage meter</text>
152
+ <rect x="544" y="272" width="208" height="64" rx="4" fill="rgba(191,69,32,0.12)" stroke="#bf4520" stroke-width="1" data-stage="hit-limit" data-name="dunning-job timeout" data-focal="true"/>
153
+ <text x="648" y="300" fill="#bf4520" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle" font-weight="600">dunning-job timeout</text>
154
+ <text x="648" y="318" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">dunning-job · 4h</text>
155
+ <rect x="768" y="272" width="208" height="64" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="upgrade" data-name="Tax calc"/>
156
+ <text x="872" y="308" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Tax calc</text>
157
+ <rect x="992" y="272" width="208" height="64" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="invoice" data-name="Ledger"/>
158
+ <text x="1096" y="308" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Ledger</text>
159
+ </g>
160
+ <g data-layer="support">
161
+ <text x="88" y="371" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.12em">SUPPORT</text>
162
+ <rect x="96" y="344" width="208" height="48" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="sign-up" data-name="Email"/>
163
+ <text x="200" y="372" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Email</text>
164
+ <rect x="320" y="344" width="208" height="48" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="activate" data-name="Analytics"/>
165
+ <text x="424" y="372" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Analytics</text>
166
+ <rect x="544" y="344" width="208" height="48" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="hit-limit" data-name="Card processor"/>
167
+ <text x="648" y="372" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">Card processor</text>
168
+ <rect x="768" y="344" width="208" height="48" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="upgrade" data-name="—"/>
169
+ <text x="872" y="372" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">—</text>
170
+ <rect x="992" y="344" width="208" height="48" rx="4" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1" data-stage="invoice" data-name="GL"/>
171
+ <text x="1096" y="372" fill="#2d3142" font-size="12" font-family="'Geist', sans-serif" text-anchor="middle">GL</text>
172
+ </g>
173
+ <line x1="96" y1="448" x2="1200" y2="448" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
174
+ <text x="96" y="468" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
175
+ <line x1="96" y1="492" x2="124" y2="492" stroke="rgba(45,49,66,0.55)" stroke-width="2"/>
176
+ <text x="132" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Line of visibility</text>
177
+ <rect x="280" y="484" width="16" height="10" rx="2" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="1"/>
178
+ <text x="304" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Backstage layer</text>
179
+ <rect x="456" y="484" width="16" height="10" rx="2" fill="rgba(191,69,32,0.12)" stroke="#bf4520" stroke-width="1"/>
180
+ <text x="480" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Focal cell · timeout</text>
181
+ </svg>
182
+ </div>
183
+ </div>
184
+ </body>
185
+ </html>
package/.agents/skills/diagram-design/assets/example-slopegraph.html ADDED
@@ -0,0 +1,119 @@
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.0">
6
+ <title>p95 by service, before and after · Slopegraph</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-accent: #bf4520;
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+ body { font-family: var(--font-sans); background: var(--color-paper); color: var(--color-ink); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
20
+ .frame { max-width: 1200px; width: 100%; }
21
+ .eyebrow { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.5rem; }
22
+ h1 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.5rem; }
23
+ svg { width: 100%; min-width: 760px; display: block; }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <div class="frame">
28
+ <p class="eyebrow">Slopegraph · Diagram Design</p>
29
+ <h1>One service went the other way</h1>
30
+
31
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-title slopegraph-desc">
32
+ <title id="slopegraph-title">One service went the other way</title>
33
+ <desc id="slopegraph-desc">Slopegraph of p95 response time by service before and after a caching layer, on one shared 100-to-550-millisecond scale; four services got faster and the recommender got slower, crossing three of them.</desc>
34
+ <defs>
35
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
36
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
37
+ </pattern>
38
+ </defs>
39
+
40
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
41
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
42
+
43
+ <!-- Both axes carry the SAME 100-550 ms scale. That is the whole claim of a
44
+ slopegraph and the only thing that makes one slope comparable with
45
+ another; scripts/verify-slopegraph.py enforces it against the values
46
+ each line declares. -->
47
+ <text transform="rotate(-90 24 230)" x="24" y="230" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">P95 RESPONSE TIME, MS</text>
48
+
49
+ <!-- No gridlines: every endpoint prints its own value, so a gridline would
50
+ be ink carrying nothing. The two axis rules are the scale. -->
51
+ <line x1="320" y1="40" x2="320" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
52
+ <text data-axis="from" data-state="BEFORE" x="320" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">BEFORE</text>
53
+ <line x1="680" y1="40" x2="680" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
54
+ <text data-axis="to" data-state="AFTER" x="680" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">AFTER</text>
55
+
56
+ <line data-series="Search" data-from="512" data-to="208" x1="320" y1="72.1" x2="680" y2="328.8" stroke="rgba(45,49,66,0.80)" stroke-width="1.2"/>
57
+ <circle cx="320" cy="72.1" r="3" fill="rgba(45,49,66,0.80)"/>
58
+ <circle cx="680" cy="328.8" r="3" fill="rgba(45,49,66,0.80)"/>
59
+ <text data-series="Search" data-end="from" data-role="name" x="272" y="75.6" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif" text-anchor="end">Search</text>
60
+ <text data-series="Search" data-end="from" x="304" y="75.6" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">512</text>
61
+ <text data-series="Search" data-end="to" x="696" y="332.3" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">208</text>
62
+ <text data-series="Search" data-end="to" data-role="name" x="728" y="332.3" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif">Search</text>
63
+
64
+ <line data-series="Catalog" data-from="376" data-to="164" x1="320" y1="186.9" x2="680" y2="366" stroke="rgba(45,49,66,0.74)" stroke-width="1.2"/>
65
+ <circle cx="320" cy="186.9" r="3" fill="rgba(45,49,66,0.74)"/>
66
+ <circle cx="680" cy="366" r="3" fill="rgba(45,49,66,0.74)"/>
67
+ <text data-series="Catalog" data-end="from" data-role="name" x="272" y="190.4" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif" text-anchor="end">Catalog</text>
68
+ <text data-series="Catalog" data-end="from" x="304" y="190.4" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">376</text>
69
+ <text data-series="Catalog" data-end="to" x="696" y="369.5" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">164</text>
70
+ <text data-series="Catalog" data-end="to" data-role="name" x="728" y="369.5" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif">Catalog</text>
71
+
72
+ <line data-series="Checkout" data-from="291" data-to="143" x1="320" y1="258.7" x2="680" y2="383.7" stroke="rgba(45,49,66,0.68)" stroke-width="1.2"/>
73
+ <circle cx="320" cy="258.7" r="3" fill="rgba(45,49,66,0.68)"/>
74
+ <circle cx="680" cy="383.7" r="3" fill="rgba(45,49,66,0.68)"/>
75
+ <text data-series="Checkout" data-end="from" data-role="name" x="272" y="262.2" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif" text-anchor="end">Checkout</text>
76
+ <text data-series="Checkout" data-end="from" x="304" y="262.2" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">291</text>
77
+ <text data-series="Checkout" data-end="to" x="696" y="387.2" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">143</text>
78
+ <text data-series="Checkout" data-end="to" data-role="name" x="728" y="387.2" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif">Checkout</text>
79
+
80
+ <line data-series="Auth" data-from="154" data-to="121" x1="320" y1="374.4" x2="680" y2="402.3" stroke="rgba(45,49,66,0.62)" stroke-width="1.2"/>
81
+ <circle cx="320" cy="374.4" r="3" fill="rgba(45,49,66,0.62)"/>
82
+ <circle cx="680" cy="402.3" r="3" fill="rgba(45,49,66,0.62)"/>
83
+ <text data-series="Auth" data-end="from" data-role="name" x="272" y="377.9" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif" text-anchor="end">Auth</text>
84
+ <text data-series="Auth" data-end="from" x="304" y="377.9" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">154</text>
85
+ <text data-series="Auth" data-end="to" x="696" y="405.8" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">121</text>
86
+ <text data-series="Auth" data-end="to" data-role="name" x="728" y="405.8" fill="#2d3142" font-size="11" font-weight="500" font-family="'Geist', sans-serif">Auth</text>
87
+
88
+ <!-- Recommender FOCAL -- and it is the series that got WORSE. The accent marks
89
+ the editorially focal line, never the winner. Focus is carried by STROKE
90
+ WEIGHT, not tone: the accent measures 4.71:1 on light paper, inside the 3.8-6.5:1
91
+ spread of the ink ramp, so on tone alone the focal line would not
92
+ stand out from the lines it is meant to dominate. Its labels stay
93
+ ink/muted so the accent marks the line and nothing else. Being the only ascending line it crosses three of
94
+ the other four -- not Auth, which starts and ends below it, because moving
95
+ the opposite way does not guarantee meeting. The crossings are left
96
+ unannotated: two endpoints say nothing about WHEN the regression started. -->
97
+ <line data-series="Recommender" data-from="238" data-to="431" x1="320" y1="303.5" x2="680" y2="140.5" stroke="#bf4520" stroke-width="2.4"/>
98
+ <circle cx="320" cy="303.5" r="4" fill="#bf4520"/>
99
+ <circle cx="680" cy="140.5" r="4" fill="#bf4520"/>
100
+ <text data-series="Recommender" data-end="from" data-role="name" x="272" y="307" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="end">Recommender</text>
101
+ <text data-series="Recommender" data-end="from" x="304" y="307" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">238</text>
102
+ <text data-series="Recommender" data-end="to" x="696" y="144" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">431</text>
103
+ <text data-series="Recommender" data-end="to" data-role="name" x="728" y="144" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif">Recommender</text>
104
+
105
+ <!-- Legend -->
106
+ <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
107
+ <text x="40" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
108
+ <text x="960" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em" text-anchor="end">P95 RESPONSE TIME IN MS, LOWER IS BETTER · SAME 100-550 SCALE ON BOTH AXES · ILLUSTRATIVE FIGURES, NOT A MEASURED RELEASE</text>
109
+
110
+ <line x1="40" y1="492" x2="64" y2="492" stroke="#bf4520" stroke-width="2.4"/>
111
+ <circle cx="52" cy="492" r="4" fill="#bf4520"/>
112
+ <text x="72" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Recommender · focal, the only regression</text>
113
+ <line x1="320" y1="492" x2="344" y2="492" stroke="rgba(45,49,66,0.80)" stroke-width="1.2"/>
114
+ <circle cx="332" cy="492" r="3" fill="rgba(45,49,66,0.80)"/>
115
+ <text x="352" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Other services · strongest tone was slowest before</text>
116
+ </svg>
117
+ </div>
118
+ </body>
119
+ </html>
package/.agents/skills/diagram-design/assets/example-state-lifecycle.html ADDED
@@ -0,0 +1,92 @@
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.0">
6
+ <title>Newsletter publication lifecycle · State machine</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root { --color-paper:#f5f5f5; --color-ink:#2d3142; --color-muted:#4f5d75; --color-accent:#bf4520; --font-sans:'Geist',system-ui,sans-serif; --font-serif:'Instrument Serif',serif; --font-mono:'Geist Mono',ui-monospace,monospace; }
11
+ body { font-family:var(--font-sans); background:var(--color-paper); color:var(--color-ink); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; }
12
+ .frame { max-width:1200px; width:100%; overflow-x:auto; }
13
+ .eyebrow { font-family:var(--font-mono); font-size:0.66rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-muted); margin-bottom:0.5rem; }
14
+ h1 { font-family:var(--font-serif); font-size:clamp(1.5rem,2.4vw + 0.75rem,2rem); font-weight:400; letter-spacing:-0.02em; line-height:1.15; color:var(--color-ink); margin-bottom:1.5rem; }
15
+ svg { width:100%; min-width:900px; display:block; }
16
+ svg text { font-family:'Geist',sans-serif; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <div class="frame">
21
+ <p class="eyebrow">State · Lifecycle phase map</p>
22
+ <h1>Newsletter publication lifecycle</h1>
23
+
24
+ <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-title state-lifecycle-desc">
25
+ <title id="state-lifecycle-title">Newsletter publication lifecycle</title>
26
+ <desc id="state-lifecycle-desc">A lifecycle phase map with Draft, Editing, Scheduled, Sending, and Sent on the primary rail; Approval and Delivery Retry in a recovery band; and Cancelled and Failed terminal outcomes.</desc>
27
+ <defs>
28
+ <pattern id="lifecycle-dots" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/></pattern>
29
+ <marker id="lifecycle-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4f5d75"/></marker>
30
+ <marker id="lifecycle-arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#bf4520"/></marker>
31
+ </defs>
32
+
33
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
34
+ <rect width="100%" height="100%" fill="url(#lifecycle-dots)" opacity="0.55"/>
35
+ <rect x="24" y="44" width="952" height="120" rx="8" fill="rgba(79,93,117,0.035)" stroke="rgba(45,49,66,0.12)"/>
36
+ <rect x="24" y="400" width="952" height="104" rx="8" fill="rgba(45,49,66,0.035)" stroke="rgba(45,49,66,0.12)"/>
37
+ <text x="40" y="64" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" letter-spacing="0.14em">WAIT / RECOVERY</text>
38
+ <text x="40" y="208" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" letter-spacing="0.14em">PRIMARY PHASES</text>
39
+ <text x="40" y="420" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" letter-spacing="0.14em">TERMINAL OUTCOMES</text>
40
+
41
+ <!-- Ten labeled transitions, drawn before states. -->
42
+ <line x1="40" y1="256" x2="64" y2="256" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
43
+ <line x1="214" y1="256" x2="244" y2="256" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
44
+ <path d="M319 220 V176 H369 V140" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
45
+ <path d="M449 140 V176 H499 V220" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
46
+ <line x1="574" y1="256" x2="604" y2="256" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
47
+ <line x1="754" y1="256" x2="800" y2="256" stroke="#bf4520" stroke-width="1.4" marker-end="url(#lifecycle-arrow-accent)"/>
48
+ <path d="M649 220 V176 H639 V140" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#lifecycle-arrow)"/>
49
+ <path d="M719 140 V188 H709 V220" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#lifecycle-arrow)"/>
50
+ <path d="M499 292 V416" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
51
+ <path d="M604 104 H584 V380 H749 V416" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#lifecycle-arrow)"/>
52
+
53
+ <!-- Opaque masks keep every transition label clear of its stroke. -->
54
+ <g font-family="'Geist Mono',monospace" font-size="7" text-anchor="middle" letter-spacing="0.08em" fill="#4f5d75">
55
+ <rect x="27" y="238" width="32" height="12" rx="2" fill="#f5f5f5"/><text x="43" y="247">NEW</text>
56
+ <rect x="215" y="238" width="28" height="12" rx="2" fill="#f5f5f5"/><text x="229" y="247">WRITE</text>
57
+ <rect x="326" y="158" width="48" height="12" rx="2" fill="#f5f5f5"/><text x="350" y="167">SUBMIT</text>
58
+ <rect x="448" y="158" width="56" height="12" rx="2" fill="#f5f5f5"/><text x="476" y="167">APPROVE</text>
59
+ <rect x="575" y="238" width="28" height="12" rx="2" fill="#f5f5f5"/><text x="589" y="247">START</text>
60
+ <rect x="760" y="238" width="34" height="12" rx="2" fill="#f5f5f5"/><text x="777" y="247" fill="#bf4520">DELIVER</text>
61
+ <rect x="620" y="158" width="46" height="12" rx="2" fill="#f5f5f5"/><text x="643" y="167">ERROR</text>
62
+ <rect x="700" y="180" width="42" height="12" rx="2" fill="#f5f5f5"/><text x="721" y="189">RETRY</text>
63
+ <rect x="474" y="350" width="52" height="12" rx="2" fill="#f5f5f5"/><text x="500" y="359">CANCEL</text>
64
+ <rect x="588" y="362" width="66" height="12" rx="2" fill="#f5f5f5"/><text x="621" y="371">EXHAUSTED</text>
65
+ </g>
66
+
67
+ <circle cx="34" cy="256" r="6" fill="#2d3142"/>
68
+
69
+ <!-- Primary rail: five phases. -->
70
+ <g font-family="'Geist',sans-serif" text-anchor="middle">
71
+ <g><rect x="64" y="220" width="150" height="72" rx="8" fill="#fff" stroke="#2d3142"/><text x="139" y="251" fill="#2d3142" font-size="12" font-weight="600">Draft</text><text x="139" y="270" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">content exists</text></g>
72
+ <g><rect x="244" y="220" width="150" height="72" rx="8" fill="#fff" stroke="#2d3142"/><text x="319" y="251" fill="#2d3142" font-size="12" font-weight="600">Editing</text><text x="319" y="270" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">owner revises</text></g>
73
+ <g><rect x="424" y="220" width="150" height="72" rx="8" fill="#fff" stroke="#2d3142"/><text x="499" y="251" fill="#2d3142" font-size="12" font-weight="600">Scheduled</text><text x="499" y="270" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">send time set</text></g>
74
+ <g><rect x="604" y="220" width="150" height="72" rx="8" fill="#fff" stroke="#2d3142"/><text x="679" y="251" fill="#2d3142" font-size="12" font-weight="600">Sending</text><text x="679" y="270" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">provider active</text></g>
75
+ <g><rect x="800" y="220" width="150" height="72" rx="8" fill="rgba(191,69,32,0.08)" stroke="#bf4520"/><circle cx="824" cy="244" r="7" fill="none" stroke="#bf4520"/><circle cx="824" cy="244" r="4" fill="#bf4520"/><text x="875" y="251" fill="#2d3142" font-size="12" font-weight="600">Sent</text><text x="875" y="270" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">delivery complete</text></g>
76
+ </g>
77
+
78
+ <!-- Supporting states. -->
79
+ <g text-anchor="middle">
80
+ <g><rect x="334" y="68" width="150" height="72" rx="8" fill="#f5f5f5" stroke="#4f5d75" stroke-dasharray="5,4"/><rect x="344" y="78" width="34" height="12" rx="2" fill="none" stroke="rgba(79,93,117,0.45)"/><text x="361" y="87" fill="#4f5d75" font-size="7" font-family="'Geist Mono',monospace">WAIT</text><text x="409" y="111" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist',sans-serif">Approval</text><text x="409" y="126" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">editor decision</text></g>
81
+ <g><rect x="604" y="68" width="150" height="72" rx="8" fill="#f5f5f5" stroke="#4f5d75" stroke-dasharray="5,4"/><rect x="614" y="78" width="52" height="12" rx="2" fill="none" stroke="rgba(79,93,117,0.45)"/><text x="640" y="87" fill="#4f5d75" font-size="7" font-family="'Geist Mono',monospace">RECOVERY</text><text x="679" y="111" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist',sans-serif">Delivery Retry</text><text x="679" y="126" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">attempt 1 of 3</text></g>
82
+ </g>
83
+
84
+ <!-- Terminal outcomes use text, shape, and dash differences. -->
85
+ <g text-anchor="middle">
86
+ <g><rect x="424" y="416" width="150" height="72" rx="8" fill="rgba(45,49,66,0.04)" stroke="#4f5d75"/><rect x="434" y="426" width="54" height="12" rx="2" fill="none" stroke="rgba(79,93,117,0.45)"/><text x="461" y="435" fill="#4f5d75" font-size="7" font-family="'Geist Mono',monospace">TERMINAL</text><text x="499" y="459" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist',sans-serif">Cancelled</text><text x="499" y="474" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">stopped by owner</text></g>
87
+ <g><rect x="674" y="416" width="150" height="72" rx="8" fill="rgba(45,49,66,0.04)" stroke="#4f5d75" stroke-width="1.5" stroke-dasharray="3,3"/><rect x="684" y="426" width="54" height="12" rx="2" fill="none" stroke="rgba(79,93,117,0.45)"/><text x="711" y="435" fill="#4f5d75" font-size="7" font-family="'Geist Mono',monospace">TERMINAL</text><text x="749" y="459" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist',sans-serif">Failed</text><text x="749" y="474" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">retries exhausted</text></g>
88
+ </g>
89
+ </svg>
90
+ </div>
91
+ </body>
92
+ </html>
package/.agents/skills/diagram-design/assets/example-state.html ADDED
@@ -0,0 +1,147 @@
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.0">
6
+ <title>Article lifecycle · State machine</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-accent: #bf4520;
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+
20
+ body {
21
+ font-family: var(--font-sans);
22
+ background: var(--color-paper);
23
+ color: var(--color-ink);
24
+ min-height: 100vh;
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ padding: 3rem 2rem;
29
+ }
30
+
31
+ .frame { max-width: 1200px; width: 100%; }
32
+
33
+ .eyebrow {
34
+ font-family: var(--font-mono);
35
+ font-size: 0.66rem;
36
+ font-weight: 500;
37
+ letter-spacing: 0.18em;
38
+ text-transform: uppercase;
39
+ color: var(--color-muted);
40
+ margin-bottom: 0.5rem;
41
+ }
42
+
43
+ h1 {
44
+ font-family: var(--font-serif);
45
+ font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
46
+ font-weight: 400;
47
+ letter-spacing: -0.02em;
48
+ line-height: 1.15;
49
+ color: var(--color-ink);
50
+ margin-bottom: 1.5rem;
51
+ }
52
+
53
+ svg { width: 100%; min-width: 900px; display: block; }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="frame">
58
+ <p class="eyebrow">State machine · Diagram Design</p>
59
+ <h1>Article lifecycle</h1>
60
+
61
+ <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-title state-desc">
62
+ <title id="state-title">Article lifecycle</title>
63
+ <desc id="state-desc">State machine showing an article moving from Draft through In Review and Published to Archived, including rejection and revision.</desc>
64
+ <defs>
65
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
66
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
67
+ </pattern>
68
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
69
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#bf4520"/></marker>
70
+ </defs>
71
+
72
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
73
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
74
+
75
+ <!-- Transitions (drawn first) -->
76
+ <!-- Start → Draft -->
77
+ <line x1="68" y1="200" x2="120" y2="200" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
78
+ <!-- Draft → In Review -->
79
+ <line x1="280" y1="200" x2="340" y2="200" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
80
+ <!-- In Review → Published (coral — happy path) -->
81
+ <line x1="500" y1="200" x2="560" y2="200" stroke="#bf4520" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
82
+ <!-- Published → Archived (down) -->
83
+ <line x1="640" y1="240" x2="640" y2="300" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
84
+ <!-- Archived → End (down) -->
85
+ <line x1="640" y1="400" x2="640" y2="432" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
86
+ <!-- In Review → Draft (curved back up-and-left) -->
87
+ <path d="M 420 160 C 420 96, 200 96, 200 160" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
88
+
89
+ <!-- Transition labels -->
90
+ <rect x="172" y="184" width="48" height="12" rx="2" fill="#f5f5f5"/>
91
+ <text x="196" y="194" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">CREATE</text>
92
+
93
+ <rect x="288" y="184" width="48" height="12" rx="2" fill="#f5f5f5"/>
94
+ <text x="312" y="194" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">SUBMIT</text>
95
+
96
+ <rect x="500" y="184" width="60" height="12" rx="2" fill="#f5f5f5"/>
97
+ <text x="530" y="194" fill="#bf4520" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">APPROVE</text>
98
+
99
+ <rect x="612" y="264" width="56" height="12" rx="2" fill="#f5f5f5"/>
100
+ <text x="640" y="274" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXPIRE</text>
101
+
102
+ <rect x="620" y="416" width="40" height="12" rx="2" fill="#f5f5f5"/>
103
+ <text x="640" y="426" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">PURGE</text>
104
+
105
+ <!-- Reject label on curved path -->
106
+ <rect x="276" y="92" width="80" height="12" rx="2" fill="#f5f5f5"/>
107
+ <text x="316" y="102" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">REJECT · REVISE</text>
108
+
109
+ <!-- Start dot (filled ink) -->
110
+ <circle cx="60" cy="200" r="6" fill="#2d3142"/>
111
+
112
+ <!-- State: Draft -->
113
+ <rect x="120" y="160" width="160" height="80" rx="8" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
114
+ <rect x="128" y="168" width="40" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/>
115
+ <text x="148" y="177" fill="#2d3142" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">STATE</text>
116
+ <text x="200" y="208" fill="#2d3142" font-size="14" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Draft</text>
117
+ <text x="200" y="224" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">unpublished</text>
118
+
119
+ <!-- State: In Review -->
120
+ <rect x="340" y="160" width="160" height="80" rx="8" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
121
+ <rect x="348" y="168" width="40" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/>
122
+ <text x="368" y="177" fill="#2d3142" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">STATE</text>
123
+ <text x="420" y="208" fill="#2d3142" font-size="14" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">In Review</text>
124
+ <text x="420" y="224" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">awaiting approval</text>
125
+
126
+ <!-- State: Published (focal coral) -->
127
+ <rect x="560" y="160" width="160" height="80" rx="8" fill="rgba(191,69,32,0.08)" stroke="#bf4520" stroke-width="1"/>
128
+ <rect x="568" y="168" width="40" height="12" rx="2" fill="transparent" stroke="rgba(191,69,32,0.50)" stroke-width="0.8"/>
129
+ <text x="588" y="177" fill="#bf4520" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">STATE</text>
130
+ <text x="640" y="208" fill="#2d3142" font-size="14" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Published</text>
131
+ <text x="640" y="224" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">live on site</text>
132
+
133
+ <!-- State: Archived -->
134
+ <rect x="560" y="300" width="160" height="100" rx="8" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
135
+ <rect x="568" y="308" width="40" height="12" rx="2" fill="transparent" stroke="rgba(79,93,117,0.50)" stroke-width="0.8"/>
136
+ <text x="588" y="317" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">STATE</text>
137
+ <text x="640" y="348" fill="#2d3142" font-size="14" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Archived</text>
138
+ <text x="640" y="364" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">noindex · hidden</text>
139
+ <text x="640" y="382" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">redirect retained</text>
140
+
141
+ <!-- End ring dot -->
142
+ <circle cx="640" cy="440" r="8" fill="none" stroke="#2d3142" stroke-width="1"/>
143
+ <circle cx="640" cy="440" r="5" fill="#2d3142"/>
144
+ </svg>
145
+ </div>
146
+ </body>
147
+ </html>