@taloswork/ose-shared 0.1.8 → 0.1.9

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 (155) hide show
  1. package/package.json +3 -3
  2. package/skills/cozy-static-svg/SKILL.md +76 -0
  3. package/skills/cozy-static-svg/references/approved-preview.png +0 -0
  4. package/skills/cozy-static-svg/references/cross-platform.md +73 -0
  5. package/skills/cozy-static-svg/references/moon_keeps_watch.svg +229 -0
  6. package/skills/cozy-static-svg/references/style-anchor.md +271 -0
  7. package/skills/cozy-static-svg/scripts/artkit.py +321 -0
  8. package/skills/cozy-static-svg/scripts/to_png.py +333 -0
  9. package/skills/diagram-design/SKILL.md +568 -0
  10. package/skills/diagram-design/assets/example-architecture-dark.html +182 -0
  11. package/skills/diagram-design/assets/example-architecture-full.html +194 -0
  12. package/skills/diagram-design/assets/example-architecture.html +183 -0
  13. package/skills/diagram-design/assets/example-bar-dark.html +129 -0
  14. package/skills/diagram-design/assets/example-bar-full.html +105 -0
  15. package/skills/diagram-design/assets/example-bar.html +129 -0
  16. package/skills/diagram-design/assets/example-data-flow-dark.html +143 -0
  17. package/skills/diagram-design/assets/example-data-flow-full.html +185 -0
  18. package/skills/diagram-design/assets/example-data-flow.html +143 -0
  19. package/skills/diagram-design/assets/example-datalake-dark.html +243 -0
  20. package/skills/diagram-design/assets/example-datalake-full.html +248 -0
  21. package/skills/diagram-design/assets/example-datalake.html +269 -0
  22. package/skills/diagram-design/assets/example-dp-integration-dark.html +80 -0
  23. package/skills/diagram-design/assets/example-dp-integration-full.html +90 -0
  24. package/skills/diagram-design/assets/example-dp-integration.html +80 -0
  25. package/skills/diagram-design/assets/example-dp-security-matrix-dark.html +31 -0
  26. package/skills/diagram-design/assets/example-dp-security-matrix-full.html +32 -0
  27. package/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  28. package/skills/diagram-design/assets/example-er-dark.html +202 -0
  29. package/skills/diagram-design/assets/example-er-full.html +205 -0
  30. package/skills/diagram-design/assets/example-er.html +202 -0
  31. package/skills/diagram-design/assets/example-flowchart-dark.html +156 -0
  32. package/skills/diagram-design/assets/example-flowchart-full.html +159 -0
  33. package/skills/diagram-design/assets/example-flowchart.html +156 -0
  34. package/skills/diagram-design/assets/example-gantt-dark.html +137 -0
  35. package/skills/diagram-design/assets/example-gantt-full.html +127 -0
  36. package/skills/diagram-design/assets/example-gantt.html +137 -0
  37. package/skills/diagram-design/assets/example-high-level-dark.html +251 -0
  38. package/skills/diagram-design/assets/example-high-level-full.html +247 -0
  39. package/skills/diagram-design/assets/example-high-level-vertical-dark.html +274 -0
  40. package/skills/diagram-design/assets/example-high-level-vertical-full.html +252 -0
  41. package/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  42. package/skills/diagram-design/assets/example-high-level.html +301 -0
  43. package/skills/diagram-design/assets/example-import-drawio.html +185 -0
  44. package/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  45. package/skills/diagram-design/assets/example-it-state-dark.html +90 -0
  46. package/skills/diagram-design/assets/example-it-state-full.html +69 -0
  47. package/skills/diagram-design/assets/example-it-state.html +128 -0
  48. package/skills/diagram-design/assets/example-layers-dark.html +123 -0
  49. package/skills/diagram-design/assets/example-layers-full.html +126 -0
  50. package/skills/diagram-design/assets/example-layers.html +123 -0
  51. package/skills/diagram-design/assets/example-line-dark.html +111 -0
  52. package/skills/diagram-design/assets/example-line-full.html +105 -0
  53. package/skills/diagram-design/assets/example-line.html +111 -0
  54. package/skills/diagram-design/assets/example-loop-dark.html +100 -0
  55. package/skills/diagram-design/assets/example-loop-full.html +137 -0
  56. package/skills/diagram-design/assets/example-loop-terminal.html +347 -0
  57. package/skills/diagram-design/assets/example-loop.html +100 -0
  58. package/skills/diagram-design/assets/example-medallion-dark.html +159 -0
  59. package/skills/diagram-design/assets/example-medallion-full.html +201 -0
  60. package/skills/diagram-design/assets/example-medallion.html +159 -0
  61. package/skills/diagram-design/assets/example-nested-dark.html +132 -0
  62. package/skills/diagram-design/assets/example-nested-full.html +135 -0
  63. package/skills/diagram-design/assets/example-nested.html +136 -0
  64. package/skills/diagram-design/assets/example-org-chart-dark.html +45 -0
  65. package/skills/diagram-design/assets/example-org-chart-full.html +45 -0
  66. package/skills/diagram-design/assets/example-org-chart.html +45 -0
  67. package/skills/diagram-design/assets/example-paved-road-animated.html +546 -0
  68. package/skills/diagram-design/assets/example-policy-trace-animated.html +490 -0
  69. package/skills/diagram-design/assets/example-process-dark.html +64 -0
  70. package/skills/diagram-design/assets/example-process-full.html +74 -0
  71. package/skills/diagram-design/assets/example-process.html +64 -0
  72. package/skills/diagram-design/assets/example-pyramid-dark.html +119 -0
  73. package/skills/diagram-design/assets/example-pyramid-full.html +122 -0
  74. package/skills/diagram-design/assets/example-pyramid.html +119 -0
  75. package/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  76. package/skills/diagram-design/assets/example-quadrant-dark.html +135 -0
  77. package/skills/diagram-design/assets/example-quadrant-full.html +138 -0
  78. package/skills/diagram-design/assets/example-quadrant.html +135 -0
  79. package/skills/diagram-design/assets/example-queue-animated.html +577 -0
  80. package/skills/diagram-design/assets/example-radar-dark.html +139 -0
  81. package/skills/diagram-design/assets/example-radar-full.html +135 -0
  82. package/skills/diagram-design/assets/example-radar.html +139 -0
  83. package/skills/diagram-design/assets/example-scatter-dark.html +141 -0
  84. package/skills/diagram-design/assets/example-scatter-full.html +116 -0
  85. package/skills/diagram-design/assets/example-scatter.html +141 -0
  86. package/skills/diagram-design/assets/example-sequence-dark.html +222 -0
  87. package/skills/diagram-design/assets/example-sequence-full.html +388 -0
  88. package/skills/diagram-design/assets/example-sequence-oauth-dark.html +188 -0
  89. package/skills/diagram-design/assets/example-sequence-oauth-full.html +350 -0
  90. package/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  91. package/skills/diagram-design/assets/example-sequence.html +222 -0
  92. package/skills/diagram-design/assets/example-state-dark.html +147 -0
  93. package/skills/diagram-design/assets/example-state-full.html +150 -0
  94. package/skills/diagram-design/assets/example-state.html +147 -0
  95. package/skills/diagram-design/assets/example-swimlane-dark.html +172 -0
  96. package/skills/diagram-design/assets/example-swimlane-full.html +175 -0
  97. package/skills/diagram-design/assets/example-swimlane.html +172 -0
  98. package/skills/diagram-design/assets/example-timeline-dark.html +135 -0
  99. package/skills/diagram-design/assets/example-timeline-full.html +138 -0
  100. package/skills/diagram-design/assets/example-timeline.html +135 -0
  101. package/skills/diagram-design/assets/example-tree-dark.html +173 -0
  102. package/skills/diagram-design/assets/example-tree-full.html +176 -0
  103. package/skills/diagram-design/assets/example-tree.html +173 -0
  104. package/skills/diagram-design/assets/example-venn-dark.html +132 -0
  105. package/skills/diagram-design/assets/example-venn-full.html +135 -0
  106. package/skills/diagram-design/assets/example-venn.html +110 -0
  107. package/skills/diagram-design/assets/icons.html +230 -0
  108. package/skills/diagram-design/assets/index.html +369 -0
  109. package/skills/diagram-design/assets/template-dark.html +85 -0
  110. package/skills/diagram-design/assets/template-full.html +413 -0
  111. package/skills/diagram-design/assets/template-motion.html +434 -0
  112. package/skills/diagram-design/assets/template-terminal.html +173 -0
  113. package/skills/diagram-design/assets/template.html +86 -0
  114. package/skills/diagram-design/references/animation.md +141 -0
  115. package/skills/diagram-design/references/export.md +136 -0
  116. package/skills/diagram-design/references/import-drawio.md +171 -0
  117. package/skills/diagram-design/references/import-mermaid.md +126 -0
  118. package/skills/diagram-design/references/onboarding.md +297 -0
  119. package/skills/diagram-design/references/output-spec.md +181 -0
  120. package/skills/diagram-design/references/primitive-annotation.md +36 -0
  121. package/skills/diagram-design/references/primitive-icons.md +827 -0
  122. package/skills/diagram-design/references/primitive-sketchy.md +43 -0
  123. package/skills/diagram-design/references/primitive-terminal.md +76 -0
  124. package/skills/diagram-design/references/semantic-patterns.md +122 -0
  125. package/skills/diagram-design/references/style-guide.md +139 -0
  126. package/skills/diagram-design/references/type-architecture.md +78 -0
  127. package/skills/diagram-design/references/type-bar.md +48 -0
  128. package/skills/diagram-design/references/type-data-flow.md +374 -0
  129. package/skills/diagram-design/references/type-dp-integration.md +410 -0
  130. package/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  131. package/skills/diagram-design/references/type-er.md +23 -0
  132. package/skills/diagram-design/references/type-flowchart.md +23 -0
  133. package/skills/diagram-design/references/type-gantt.md +45 -0
  134. package/skills/diagram-design/references/type-high-level.md +458 -0
  135. package/skills/diagram-design/references/type-it-state.md +470 -0
  136. package/skills/diagram-design/references/type-layers.md +26 -0
  137. package/skills/diagram-design/references/type-line.md +44 -0
  138. package/skills/diagram-design/references/type-loop.md +223 -0
  139. package/skills/diagram-design/references/type-medallion.md +356 -0
  140. package/skills/diagram-design/references/type-nested.md +22 -0
  141. package/skills/diagram-design/references/type-org-chart.md +44 -0
  142. package/skills/diagram-design/references/type-process.md +495 -0
  143. package/skills/diagram-design/references/type-pyramid.md +33 -0
  144. package/skills/diagram-design/references/type-quadrant.md +81 -0
  145. package/skills/diagram-design/references/type-radar.md +80 -0
  146. package/skills/diagram-design/references/type-scatter.md +39 -0
  147. package/skills/diagram-design/references/type-sequence.md +130 -0
  148. package/skills/diagram-design/references/type-state.md +21 -0
  149. package/skills/diagram-design/references/type-swimlane.md +20 -0
  150. package/skills/diagram-design/references/type-timeline.md +20 -0
  151. package/skills/diagram-design/references/type-tree.md +24 -0
  152. package/skills/diagram-design/references/type-venn.md +26 -0
  153. package/skills/diagram-design/scripts/drawio_extract.py +856 -0
  154. package/skills/diagram-design/scripts/mermaid_extract.py +1285 -0
  155. package/skills/diagram-design/scripts/self_check.py +389 -0
package/skills/diagram-design/assets/example-scatter-full.html ADDED
@@ -0,0 +1,116 @@
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>Deploy frequency vs lead time · Scatter</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-paper-2:#ececec; --color-ink:#2d3142; --color-muted:#4f5d75; --color-soft:#7a8399; --color-rule:rgba(45,49,66,0.12); --color-accent:#eb6c36; --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); min-height: 100vh; padding: 3rem 2rem; color: var(--color-ink); }
12
+ .container { max-width: 1200px; margin: 0 auto; }
13
+ .header { margin-bottom: 2.5rem; }
14
+ .header-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.75rem; }
15
+ h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.5rem; }
16
+ .subtitle { font-size: 1rem; line-height: 1.55; color: var(--color-muted); max-width: 58ch; }
17
+ .diagram-container { background: var(--color-paper-2); border-radius: 8px; border: 1px solid var(--color-rule); padding: 1.5rem; overflow-x: auto; }
18
+ svg { width: 100%; min-width: 760px; display: block; }
19
+ .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
20
+ @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
21
+ .card { background: #fff; border-radius: 6px; border: 1px solid var(--color-rule); padding: 1.25rem; }
22
+ .card .eyebrow { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.5rem; }
23
+ .card-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.875rem; padding-bottom: 0.875rem; border-bottom: 1px solid rgba(45,49,66,0.08); }
24
+ .card-dot { width: 7px; height: 7px; border-radius: 50%; }
25
+ .card-dot.coral { background: var(--color-accent); } .card-dot.ink { background: var(--color-ink); } .card-dot.muted { background: var(--color-muted); }
26
+ .card h3 { font-size: 0.875rem; font-weight: 600; }
27
+ .card p { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; }
28
+ .footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(45,49,66,0.10); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div class="container">
33
+ <div class="header">
34
+ <p class="header-eyebrow">Scatter · Diagram Design</p>
35
+ <h1>Deploy frequency vs. lead time · 12 teams</h1>
36
+ <p class="subtitle">Each point is an engineering team. Moving right means deploying more often; moving down means shipping faster. The Platform team occupies the lower-right — the ideal quadrant.</p>
37
+ </div>
38
+ <div class="diagram-container">
39
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-full-title scatter-full-desc">
40
+ <title id="scatter-full-title">Deploy frequency vs. lead time · 12 teams</title>
41
+ <desc id="scatter-full-desc">Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant.</desc>
42
+ <defs><pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/></pattern></defs>
43
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
44
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
45
+ <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">LEAD TIME (DAYS)</text>
46
+ <text x="520" y="492" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">DEPLOYS PER WEEK</text>
47
+ <line x1="80" y1="325" x2="960" y2="325" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
48
+ <line x1="80" y1="230" x2="960" y2="230" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
49
+ <line x1="80" y1="135" x2="960" y2="135" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
50
+ <line x1="80" y1="40" x2="960" y2="40" stroke="rgba(45,49,66,0.06)" stroke-width="0.8"/>
51
+ <line x1="256" y1="40" x2="256" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
52
+ <line x1="432" y1="40" x2="432" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
53
+ <line x1="608" y1="40" x2="608" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
54
+ <line x1="784" y1="40" x2="784" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
55
+ <line x1="80" y1="40" x2="80" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
56
+ <line x1="80" y1="420" x2="960" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
57
+ <text x="72" y="324" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">6</text>
58
+ <text x="72" y="234" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">12</text>
59
+ <text x="72" y="139" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">18</text>
60
+ <text x="72" y="44" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">24</text>
61
+ <text x="72" y="424" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">0</text>
62
+ <text x="80" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">0</text>
63
+ <text x="256" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">4</text>
64
+ <text x="432" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">8</text>
65
+ <text x="608" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">12</text>
66
+ <text x="784" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">16</text>
67
+ <text x="960" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">20</text>
68
+ <line x1="168" y1="103" x2="900" y2="388" stroke="rgba(45,49,66,0.18)" stroke-width="1" stroke-dasharray="4,3"/>
69
+ <circle cx="168" cy="103" r="5" fill="#f5f5f5"/><circle cx="168" cy="103" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
70
+ <circle cx="256" cy="135" r="5" fill="#f5f5f5"/><circle cx="256" cy="135" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
71
+ <circle cx="256" cy="167" r="5" fill="#f5f5f5"/><circle cx="256" cy="167" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
72
+ <circle cx="344" cy="198" r="5" fill="#f5f5f5"/><circle cx="344" cy="198" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
73
+ <circle cx="432" cy="230" r="5" fill="#f5f5f5"/><circle cx="432" cy="230" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
74
+ <circle cx="432" cy="262" r="5" fill="#f5f5f5"/><circle cx="432" cy="262" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
75
+ <circle cx="520" cy="293" r="5" fill="#f5f5f5"/><circle cx="520" cy="293" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
76
+ <circle cx="608" cy="325" r="5" fill="#f5f5f5"/><circle cx="608" cy="325" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
77
+ <circle cx="608" cy="262" r="5" fill="#f5f5f5"/><circle cx="608" cy="262" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
78
+ <circle cx="784" cy="357" r="5" fill="#f5f5f5"/><circle cx="784" cy="357" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
79
+ <circle cx="960" cy="388" r="5" fill="#f5f5f5"/><circle cx="960" cy="388" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
80
+ <circle cx="872" cy="372" r="6" fill="#f5f5f5"/><circle cx="872" cy="372" r="6" fill="rgba(235,108,54,0.15)" stroke="#eb6c36" stroke-width="1.2"/>
81
+ <rect x="798" y="348" width="64" height="12" rx="2" fill="#f5f5f5"/>
82
+ <text x="830" y="357" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">PLATFORM</text>
83
+ <text x="88" y="56" fill="rgba(45,49,66,0.25)" font-size="8" font-family="'Geist Mono', monospace">HIGH LEAD TIME</text>
84
+ <text x="88" y="412" fill="rgba(45,49,66,0.25)" font-size="8" font-family="'Geist Mono', monospace">LOW LEAD TIME</text>
85
+ <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
86
+ <text x="40" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
87
+ <circle cx="52" cy="490" r="6" fill="rgba(235,108,54,0.15)" stroke="#eb6c36" stroke-width="1.2"/>
88
+ <text x="68" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Platform team · best performer</text>
89
+ <circle cx="256" cy="490" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
90
+ <text x="272" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Engineering team</text>
91
+ <line x1="416" y1="490" x2="440" y2="490" stroke="rgba(45,49,66,0.18)" stroke-width="1" stroke-dasharray="4,3"/>
92
+ <text x="448" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Trend</text>
93
+ </svg>
94
+ </div>
95
+ <div class="cards">
96
+ <div class="card">
97
+ <p class="eyebrow">BEST PERFORMER</p>
98
+ <div class="card-header"><span class="card-dot coral"></span><h3>Platform team · (18, 3)</h3></div>
99
+ <p>18 deploys/week with a 3-day lead time. This combination is achievable because they own the full stack — no cross-team approval gates, and their CI pipeline runs under 4 minutes.</p>
100
+ </div>
101
+ <div class="card">
102
+ <div class="card-header"><span class="card-dot ink"></span><h3>Correlation is clear</h3></div>
103
+ <p>Every team to the right of the median deploy frequency (8/week) is also below the median lead time (12 days). The relationship isn't causal — both are symptoms of the same underlying practice: small, frequent, reversible changes.</p>
104
+ </div>
105
+ <div class="card">
106
+ <div class="card-header"><span class="card-dot muted"></span><h3>Two outliers worth examining</h3></div>
107
+ <p>The team at (2,20) ships rarely and slowly — high coupling, long approval chains. The team at (12,10) deploys frequently but with higher-than-expected lead time — likely a large monorepo with slow integration tests.</p>
108
+ </div>
109
+ </div>
110
+ <div class="footer">
111
+ <span>deploy frequency vs. lead time · 12 teams</span>
112
+ <span>example · diagram design</span>
113
+ </div>
114
+ </div>
115
+ </body>
116
+ </html>
package/skills/diagram-design/assets/example-scatter.html ADDED
@@ -0,0 +1,141 @@
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>Deploy frequency vs lead time · Scatter</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:#eb6c36; --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%; }
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; margin-bottom: 1.5rem; }
15
+ svg { width: 100%; min-width: 760px; display: block; }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <div class="frame">
20
+ <p class="eyebrow">Scatter · Diagram Design</p>
21
+ <h1>Deploy frequency vs. lead time · 12 teams</h1>
22
+
23
+ <!-- X: 0-20 deploys/week → 880px. x = 80 + f/20*880 = 80+44*f -->
24
+ <!-- Y: 0-24 days lead time → 380px. y = 420 - lt/24*380. High lt = high y (worse) -->
25
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-title scatter-desc">
26
+ <title id="scatter-title">Deploy frequency vs. lead time · 12 teams</title>
27
+ <desc id="scatter-desc">Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant.</desc>
28
+ <defs>
29
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
30
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
31
+ </pattern>
32
+ </defs>
33
+
34
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
35
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
36
+
37
+ <!-- Axis labels -->
38
+ <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">LEAD TIME (DAYS)</text>
39
+ <text x="520" y="492" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">DEPLOYS PER WEEK</text>
40
+
41
+ <!-- Gridlines -->
42
+ <!-- Horizontal (constant lead time) -->
43
+ <line x1="80" y1="325" x2="960" y2="325" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
44
+ <line x1="80" y1="230" x2="960" y2="230" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
45
+ <line x1="80" y1="135" x2="960" y2="135" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
46
+ <line x1="80" y1="40" x2="960" y2="40" stroke="rgba(45,49,66,0.06)" stroke-width="0.8"/>
47
+ <!-- Vertical (constant deploy freq) -->
48
+ <line x1="256" y1="40" x2="256" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
49
+ <line x1="432" y1="40" x2="432" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
50
+ <line x1="608" y1="40" x2="608" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
51
+ <line x1="784" y1="40" x2="784" y2="420" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
52
+
53
+ <!-- Axes -->
54
+ <line x1="80" y1="40" x2="80" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
55
+ <line x1="80" y1="420" x2="960" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
56
+
57
+ <!-- Y-axis labels (lead time: 0 at bottom, 24 at top) -->
58
+ <text x="72" y="324" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">6</text>
59
+ <text x="72" y="234" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">12</text>
60
+ <text x="72" y="139" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">18</text>
61
+ <text x="72" y="44" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">24</text>
62
+ <text x="72" y="424" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">0</text>
63
+
64
+ <!-- X-axis labels (deploy frequency) -->
65
+ <text x="80" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">0</text>
66
+ <text x="256" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">4</text>
67
+ <text x="432" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">8</text>
68
+ <text x="608" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">12</text>
69
+ <text x="784" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">16</text>
70
+ <text x="960" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">20</text>
71
+
72
+ <!-- Trend line (dashed, approximate) -->
73
+ <line x1="168" y1="103" x2="900" y2="388" stroke="rgba(45,49,66,0.18)" stroke-width="1" stroke-dasharray="4,3"/>
74
+
75
+ <!-- ─── DATA POINTS (non-focal first) ─── -->
76
+ <!-- (freq, lt) → (x=80+44*f, y=420-380*lt/24) -->
77
+ <!-- (2,20)→(168,103), (4,18)→(256,135), (4,16)→(256,167), (6,14)→(344,198) -->
78
+ <!-- (8,12)→(432,230), (8,10)→(432,262), (10,8)→(520,293), (12,6)→(608,325) -->
79
+ <!-- (12,10)→(608,262), (16,4)→(784,357), (18,3)→(872,372) FOCAL, (20,2)→(960,388) -->
80
+
81
+ <circle cx="168" cy="103" r="5" fill="#f5f5f5"/>
82
+ <circle cx="168" cy="103" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
83
+
84
+ <circle cx="256" cy="135" r="5" fill="#f5f5f5"/>
85
+ <circle cx="256" cy="135" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
86
+
87
+ <circle cx="256" cy="167" r="5" fill="#f5f5f5"/>
88
+ <circle cx="256" cy="167" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
89
+
90
+ <circle cx="344" cy="198" r="5" fill="#f5f5f5"/>
91
+ <circle cx="344" cy="198" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
92
+
93
+ <circle cx="432" cy="230" r="5" fill="#f5f5f5"/>
94
+ <circle cx="432" cy="230" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
95
+
96
+ <circle cx="432" cy="262" r="5" fill="#f5f5f5"/>
97
+ <circle cx="432" cy="262" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
98
+
99
+ <circle cx="520" cy="293" r="5" fill="#f5f5f5"/>
100
+ <circle cx="520" cy="293" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
101
+
102
+ <circle cx="608" cy="325" r="5" fill="#f5f5f5"/>
103
+ <circle cx="608" cy="325" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
104
+
105
+ <circle cx="608" cy="262" r="5" fill="#f5f5f5"/>
106
+ <circle cx="608" cy="262" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
107
+
108
+ <circle cx="784" cy="357" r="5" fill="#f5f5f5"/>
109
+ <circle cx="784" cy="357" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
110
+
111
+ <circle cx="960" cy="388" r="5" fill="#f5f5f5"/>
112
+ <circle cx="960" cy="388" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
113
+
114
+ <!-- FOCAL: Platform team (18,3) → (872,372) -->
115
+ <circle cx="872" cy="372" r="6" fill="#f5f5f5"/>
116
+ <circle cx="872" cy="372" r="6" fill="rgba(235,108,54,0.15)" stroke="#eb6c36" stroke-width="1.2"/>
117
+
118
+ <!-- Focal label -->
119
+ <rect x="798" y="348" width="64" height="12" rx="2" fill="#f5f5f5"/>
120
+ <text x="830" y="357" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">PLATFORM</text>
121
+
122
+ <!-- Quadrant guides (optional) -->
123
+ <text x="88" y="56" fill="rgba(45,49,66,0.25)" font-size="8" font-family="'Geist Mono', monospace">HIGH LEAD TIME</text>
124
+ <text x="88" y="412" fill="rgba(45,49,66,0.25)" font-size="8" font-family="'Geist Mono', monospace">LOW LEAD TIME</text>
125
+
126
+ <!-- Legend -->
127
+ <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
128
+ <text x="40" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
129
+
130
+ <circle cx="52" cy="490" r="6" fill="rgba(235,108,54,0.15)" stroke="#eb6c36" stroke-width="1.2"/>
131
+ <text x="68" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Platform team · best performer</text>
132
+
133
+ <circle cx="256" cy="490" r="5" fill="rgba(79,93,117,0.20)" stroke="#4f5d75" stroke-width="1"/>
134
+ <text x="272" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Engineering team</text>
135
+
136
+ <line x1="416" y1="490" x2="440" y2="490" stroke="rgba(45,49,66,0.18)" stroke-width="1" stroke-dasharray="4,3"/>
137
+ <text x="448" y="494" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Trend</text>
138
+ </svg>
139
+ </div>
140
+ </body>
141
+ </html>
package/skills/diagram-design/assets/example-sequence-dark.html ADDED
@@ -0,0 +1,222 @@
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 request · Sequence</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: #2d3142;
12
+ --color-ink: #f5f5f5;
13
+ --color-muted: #bfc0c0;
14
+ --color-accent: #f08a59;
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">Sequence · Diagram Design</p>
59
+ <h1>Article request, cold cache</h1>
60
+
61
+ <svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-dark-title sequence-dark-desc">
62
+ <title id="sequence-dark-title">Article request, cold cache</title>
63
+ <desc id="sequence-dark-desc">Sequence diagram showing a cold-cache article request moving from reader and browser through Cloudflare to an Astro origin and analytics beacon.</desc>
64
+ <defs>
65
+ <!-- Dot grid background -->
66
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
67
+ <circle cx="1" cy="1" r="0.9" fill="rgba(245,245,245,0.10)"/>
68
+ </pattern>
69
+
70
+ <!-- Arrow markers -->
71
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
72
+ <polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/>
73
+ </marker>
74
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
75
+ <polygon points="0 0, 8 3, 0 6" fill="#f08a59"/>
76
+ </marker>
77
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
78
+ <polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/>
79
+ </marker>
80
+ </defs>
81
+
82
+ <!-- Background: paper + dot grid -->
83
+ <rect width="100%" height="100%" fill="#2d3142"/>
84
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
85
+
86
+ <!-- =================================================================
87
+ LIFELINES — dashed vertical lines from each actor, behind everything.
88
+ Actor lifeline x-coords: 128, 352, 584, 800
89
+ ================================================================= -->
90
+ <line x1="128" y1="128" x2="128" y2="488" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
91
+ <line x1="352" y1="128" x2="352" y2="488" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
92
+ <line x1="584" y1="128" x2="584" y2="488" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
93
+ <line x1="800" y1="128" x2="800" y2="488" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
94
+
95
+ <!-- =================================================================
96
+ ACTIVATION BARS — w=8 rects on lifelines showing control duration.
97
+ Drawn before message arrows so arrows land on their edges.
98
+ ================================================================= -->
99
+ <!-- Cloudflare activation: receives at y=176, responds at y=408 -->
100
+ <rect x="348" y="180" width="8" height="232" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
101
+ <!-- Astro activation: called at y=232, returns at y=352 -->
102
+ <rect x="580" y="236" width="8" height="120" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
103
+
104
+ <!-- =================================================================
105
+ MESSAGE ARROWS — time flows top→down.
106
+ Draw before labels so label masks cover the line.
107
+ ================================================================= -->
108
+
109
+ <!-- M1: Reader → Cloudflare (HTTPS request · link-blue) -->
110
+ <line x1="128" y1="176" x2="352" y2="176" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
111
+
112
+ <!-- M2: Cloudflare → Astro (cache miss · muted) -->
113
+ <line x1="352" y1="232" x2="580" y2="232" stroke="#bfc0c0" stroke-width="1.2" marker-end="url(#arrow)"/>
114
+
115
+ <!-- M3: Astro self-message (render MDX · muted U-loop) -->
116
+ <path d="M 588 284 L 624 284 L 624 316 L 588 316" fill="none" stroke="#bfc0c0" stroke-width="1.2" marker-end="url(#arrow)"/>
117
+
118
+ <!-- M4: Astro → Cloudflare (return HTML · muted dashed) -->
119
+ <line x1="580" y1="352" x2="356" y2="352" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
120
+
121
+ <!-- M5: Cloudflare → Reader (primary success · coral) -->
122
+ <line x1="348" y1="408" x2="128" y2="408" stroke="#f08a59" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
123
+
124
+ <!-- M6: Reader → Analytics (async beacon · muted dashed) -->
125
+ <line x1="128" y1="464" x2="800" y2="464" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
126
+
127
+ <!-- =================================================================
128
+ MESSAGE LABELS — each with an opaque paper-colored mask.
129
+ ================================================================= -->
130
+
131
+ <!-- M1 label -->
132
+ <rect x="188" y="160" width="104" height="12" rx="2" fill="#2d3142"/>
133
+ <text x="240" y="170" fill="#6a95d8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /ARTICLES/SLUG</text>
134
+
135
+ <!-- M2 label -->
136
+ <rect x="416" y="216" width="100" height="12" rx="2" fill="#2d3142"/>
137
+ <text x="466" y="226" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">CACHE MISS · ORIGIN</text>
138
+
139
+ <!-- M3 label (to the right of the self-loop) -->
140
+ <rect x="632" y="292" width="72" height="12" rx="2" fill="#2d3142"/>
141
+ <text x="668" y="302" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">RENDER MDX</text>
142
+
143
+ <!-- M4 label -->
144
+ <rect x="420" y="336" width="96" height="12" rx="2" fill="#2d3142"/>
145
+ <text x="468" y="346" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · HTML + MAX-AGE</text>
146
+
147
+ <!-- M5 label (coral · primary response) -->
148
+ <rect x="192" y="392" width="96" height="12" rx="2" fill="#2d3142"/>
149
+ <text x="240" y="402" fill="#f08a59" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · EDGE-CACHED</text>
150
+
151
+ <!-- M6 label (placed between Astro and Analytics lifelines, a clear gap) -->
152
+ <rect x="648" y="448" width="96" height="12" rx="2" fill="#2d3142"/>
153
+ <text x="696" y="458" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">PAGEVIEW BEACON</text>
154
+
155
+ <!-- =================================================================
156
+ ACTOR BOXES — drawn after arrows/labels.
157
+ Each actor: 144–160 wide × 56 tall. Centers: 128, 352, 584, 800.
158
+ ================================================================= -->
159
+
160
+ <!-- Actor 1: Reader (external / soft) -->
161
+ <rect x="56" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
162
+ <rect x="56" y="72" width="144" height="56" rx="6" fill="rgba(191,192,192,0.10)" stroke="#8e98ac" stroke-width="1"/>
163
+ <rect x="64" y="80" width="28" height="12" rx="2" fill="transparent" stroke="rgba(142,140,131,0.40)" stroke-width="0.8"/>
164
+ <text x="78" y="89" fill="#8e98ac" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
165
+ <text x="128" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Reader</text>
166
+ <text x="128" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Browser</text>
167
+
168
+ <!-- Actor 2: Cloudflare (cloud / muted) -->
169
+ <rect x="280" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
170
+ <rect x="280" y="72" width="144" height="56" rx="6" fill="rgba(245,245,245,0.03)" stroke="rgba(245,245,245,0.30)" stroke-width="1"/>
171
+ <rect x="288" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(245,245,245,0.22)" stroke-width="0.8"/>
172
+ <text x="304" y="89" fill="#8e98ac" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EDGE</text>
173
+ <text x="352" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Cloudflare</text>
174
+ <text x="352" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Pages · cache</text>
175
+
176
+ <!-- Actor 3: Astro Origin (focal / coral) -->
177
+ <rect x="504" y="72" width="160" height="56" rx="6" fill="#2d3142"/>
178
+ <rect x="504" y="72" width="160" height="56" rx="6" fill="rgba(240,138,89,0.08)" stroke="#f08a59" stroke-width="1"/>
179
+ <rect x="512" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(240,138,89,0.50)" stroke-width="0.8"/>
180
+ <text x="528" y="89" fill="#f08a59" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">ORIG</text>
181
+ <text x="584" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Astro Origin</text>
182
+ <text x="584" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">SSR + MDX</text>
183
+
184
+ <!-- Actor 4: Analytics (optional / dashed) -->
185
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
186
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="rgba(245,245,245,0.02)" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="4,3"/>
187
+ <rect x="736" y="80" width="28" height="12" rx="2" fill="transparent" stroke="rgba(245,245,245,0.22)" stroke-width="0.8"/>
188
+ <text x="750" y="89" fill="#8e98ac" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">ASY</text>
189
+ <text x="800" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Analytics</text>
190
+ <text x="800" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Beacon · async</text>
191
+
192
+ <!-- =================================================================
193
+ LEGEND — horizontal strip at the bottom.
194
+ Separator at y=504, eyebrow at y=520, items at y=540–548.
195
+ ================================================================= -->
196
+ <line x1="56" y1="504" x2="944" y2="504" stroke="rgba(245,245,245,0.10)" stroke-width="0.8"/>
197
+ <text x="56" y="520" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
198
+
199
+ <!-- Item 1: Actor swatch (coral focal) -->
200
+ <rect x="56" y="540" width="14" height="10" rx="2" fill="rgba(240,138,89,0.08)" stroke="#f08a59" stroke-width="1"/>
201
+ <text x="76" y="548" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Focal actor</text>
202
+
203
+ <!-- Item 2: Activation bar swatch -->
204
+ <rect x="188" y="536" width="4" height="18" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
205
+ <text x="200" y="548" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Activation</text>
206
+
207
+ <!-- Item 3: Request arrow (link-blue) -->
208
+ <line x1="308" y1="546" x2="336" y2="546" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
209
+ <text x="344" y="548" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">HTTP request</text>
210
+
211
+ <!-- Item 4: Return / async (muted dashed) -->
212
+ <line x1="476" y1="546" x2="504" y2="546" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
213
+ <text x="512" y="548" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Return / async</text>
214
+
215
+ <!-- Item 5: Primary response (coral) -->
216
+ <line x1="652" y1="546" x2="680" y2="546" stroke="#f08a59" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
217
+ <text x="688" y="548" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Primary response</text>
218
+
219
+ </svg>
220
+ </div>
221
+ </body>
222
+ </html>