@taloswork/ose-shared 0.1.7 → 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 (166) 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
  156. package/skills/document/bin/doc-gen.cjs +3 -6
  157. package/skills/document/bin/html2pptx.cjs +17 -9
  158. package/skills/document/bin/pptx-clone.cjs +41 -30
  159. package/skills/document/bin/pptx-embed-fonts.cjs +6 -2
  160. package/skills/document/bin/pptx-slide.cjs +46 -50
  161. package/skills/document/content-pipeline.md +54 -5
  162. package/skills/document/layouts/README.md +8 -0
  163. package/skills/document/layouts/blocks-2x2.tpl +19 -9
  164. package/skills/document/layouts/cards-3.tpl +1 -1
  165. package/skills/document/layouts/org-tree.tpl +1 -1
  166. package/skills/document/layouts/steps-vertical.tpl +1 -1
package/skills/diagram-design/assets/example-loop-dark.html ADDED
@@ -0,0 +1,100 @@
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>The self-improving loop · Dark</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --paper: #2d3142; --ink: #f5f5f5; --muted: #bfc0c0; --soft: #8e98ac;
12
+ --accent: #f08a59; --accent-tint: rgba(240,138,89,0.10); --link: #6a95d8;
13
+ --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
14
+ --mono: 'Geist Mono', ui-monospace, monospace;
15
+ }
16
+ body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
17
+ .frame { width: 100%; max-width: 1200px; }
18
+ .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
19
+ h1 { margin-bottom: 1.5rem; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw + 0.75rem, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; }
20
+ svg { display: block; width: 100%; min-width: 900px; }
21
+ .ring { fill: none; stroke: var(--muted); stroke-width: 1.2; }
22
+ .spoke { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 5 4; }
23
+ .station { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
24
+ .station.focal { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
25
+ .hub { fill: var(--ink); }
26
+ .node-name { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
27
+ .focal-name { fill: var(--accent); }
28
+ .sublabel { fill: var(--soft); font: 400 8px var(--mono); text-anchor: middle; }
29
+ .hub-name { fill: var(--paper); font: 600 16px var(--sans); text-anchor: middle; }
30
+ .hub-sub { fill: var(--paper); opacity: 0.72; font: 400 8px var(--mono); text-anchor: middle; }
31
+ .arrow-label { fill: var(--soft); font: 400 8px var(--mono); letter-spacing: 0.06em; text-anchor: middle; }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <main class="frame">
36
+ <p class="eyebrow">Loop · Diagram Design</p>
37
+ <h1>The self-improving loop</h1>
38
+
39
+ <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-dark-title loop-dark-desc">
40
+ <title id="loop-dark-title">The self-improving loop</title>
41
+ <desc id="loop-dark-desc">Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate.</desc>
42
+ <defs>
43
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.9" fill="rgba(245,245,245,0.10)"/></pattern>
44
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/></marker>
45
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#f08a59"/></marker>
46
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/></marker>
47
+ <marker id="arrow-soft" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#8e98ac"/></marker>
48
+ </defs>
49
+ <rect width="1040" height="680" fill="#2d3142"/>
50
+ <rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
51
+
52
+ <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
53
+ <path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
54
+ <path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
55
+ <path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
56
+ <path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
57
+ <path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
58
+ <path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
59
+
60
+ <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
61
+ <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
62
+ <path class="spoke" d="M672 252 L616 284" marker-end="url(#arrow-soft)"/>
63
+ <path class="spoke" d="M672 428 L616 396" marker-end="url(#arrow-soft)"/>
64
+ <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)"/>
65
+ <path class="spoke" d="M368 428 L424 396" marker-end="url(#arrow-soft)"/>
66
+ <path class="spoke" d="M368 252 L424 284" marker-end="url(#arrow-soft)"/>
67
+
68
+ <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
69
+ <rect x="532" y="200" width="48" height="16" rx="4" fill="#2d3142"/>
70
+ <text x="556" y="212" class="arrow-label">SIGNALS</text>
71
+ <rect x="460" y="464" width="52" height="16" rx="4" fill="#2d3142"/>
72
+ <text x="486" y="476" class="arrow-label">OUTCOMES</text>
73
+
74
+ <!-- Stations -->
75
+ <rect class="station" x="440" y="68" width="160" height="64" rx="6"/>
76
+ <text x="520" y="96" class="node-name">Capture</text><text x="520" y="116" class="sublabel">signals in / intake</text>
77
+
78
+ <rect class="station" x="648" y="188" width="160" height="64" rx="6"/>
79
+ <text x="728" y="216" class="node-name">Research</text><text x="728" y="236" class="sublabel">evidence pulled</text>
80
+
81
+ <rect class="station focal" x="648" y="428" width="160" height="64" rx="6"/>
82
+ <text x="728" y="456" class="node-name focal-name">Decide</text><text x="728" y="476" class="sublabel">human approves</text>
83
+
84
+ <rect class="station" x="440" y="548" width="160" height="64" rx="6"/>
85
+ <text x="520" y="576" class="node-name">Act</text><text x="520" y="596" class="sublabel">work ships</text>
86
+
87
+ <rect class="station" x="232" y="428" width="160" height="64" rx="6"/>
88
+ <text x="312" y="456" class="node-name">Measure</text><text x="312" y="476" class="sublabel">outcomes logged</text>
89
+
90
+ <rect class="station" x="232" y="188" width="160" height="64" rx="6"/>
91
+ <text x="312" y="216" class="node-name">Learn</text><text x="312" y="236" class="sublabel">playbook updated</text>
92
+
93
+ <!-- The one shared-state hub. -->
94
+ <rect class="hub" x="420" y="288" width="200" height="104" rx="8"/>
95
+ <text x="520" y="336" class="hub-name">Shared memory</text>
96
+ <text x="520" y="360" class="hub-sub">one record, every loop</text>
97
+ </svg>
98
+ </main>
99
+ </body>
100
+ </html>
package/skills/diagram-design/assets/example-loop-full.html ADDED
@@ -0,0 +1,137 @@
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>The self-improving loop · Full</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --paper: #f5f5f5; --paper-2: #ececec; --ink: #2d3142; --muted: #4f5d75;
12
+ --soft: #7a8399; --rule: rgba(45,49,66,0.12); --accent: #eb6c36;
13
+ --accent-tint: rgba(235,108,54,0.08); --link: #2e5aa8;
14
+ --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
15
+ --mono: 'Geist Mono', ui-monospace, monospace;
16
+ }
17
+ body { min-height: 100vh; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
18
+ .container { width: 100%; max-width: 1200px; margin: 0 auto; }
19
+ .header { margin-bottom: 2.5rem; }
20
+ .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
21
+ h1 { margin-bottom: 0.5rem; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw + 0.75rem, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; }
22
+ .subtitle { max-width: 62ch; color: var(--muted); font-size: 1rem; line-height: 1.55; }
23
+ .diagram-container { overflow-x: auto; padding: 1.5rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; }
24
+ svg { display: block; width: 100%; min-width: 1040px; }
25
+ .ring { fill: none; stroke: var(--muted); stroke-width: 1.2; }
26
+ .spoke { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 5 4; }
27
+ .station { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
28
+ .station.focal { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
29
+ .hub { fill: var(--ink); }
30
+ .node-name { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
31
+ .focal-name { fill: var(--accent); }
32
+ .sublabel { fill: var(--soft); font: 400 8px var(--mono); text-anchor: middle; }
33
+ .hub-name { fill: var(--paper); font: 600 16px var(--sans); text-anchor: middle; }
34
+ .hub-sub { fill: var(--paper); opacity: 0.72; font: 400 8px var(--mono); text-anchor: middle; }
35
+ .arrow-label { fill: var(--soft); font: 400 8px var(--mono); letter-spacing: 0.06em; text-anchor: middle; }
36
+ .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
37
+ .card { padding: 1.25rem; background: #fff; border: 1px solid var(--rule); border-radius: 6px; }
38
+ .card-eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.5rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
39
+ .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); }
40
+ .card-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
41
+ .card-dot.coral { background: var(--accent); } .card-dot.ink { background: var(--ink); } .card-dot.muted { background: var(--muted); }
42
+ .card h2 { font-size: 0.875rem; font-weight: 600; }
43
+ .card p, .card ul { color: var(--muted); font-size: 0.8125rem; line-height: 1.55; list-style: none; }
44
+ .card li { position: relative; margin-bottom: 0.3rem; padding-left: 0.875rem; }
45
+ .card li::before { position: absolute; left: 0; color: rgba(45,49,66,0.25); content: '—'; }
46
+ .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 2rem; padding-top: 1.5rem; color: var(--soft); border-top: 1px solid rgba(45,49,66,0.10); font: 400 0.72rem var(--mono); letter-spacing: 0.06em; }
47
+ @media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <main class="container">
52
+ <header class="header">
53
+ <p class="eyebrow">Loop · Diagram Design</p>
54
+ <h1>The self-improving loop</h1>
55
+ <p class="subtitle">A company operating rhythm where work moves clockwise, every pass writes back to one shared record, and a human stays accountable for the decision.</p>
56
+ </header>
57
+
58
+ <div class="diagram-container">
59
+ <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-full-title loop-full-desc">
60
+ <title id="loop-full-title">The self-improving loop</title>
61
+ <desc id="loop-full-desc">Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate.</desc>
62
+ <defs>
63
+ <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>
64
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
65
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/></marker>
66
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2e5aa8"/></marker>
67
+ <marker id="arrow-soft" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#7a8399"/></marker>
68
+ </defs>
69
+ <rect width="1040" height="680" fill="#f5f5f5"/>
70
+ <rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
71
+
72
+ <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
73
+ <path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
74
+ <path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
75
+ <path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
76
+ <path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
77
+ <path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
78
+ <path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
79
+
80
+ <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
81
+ <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
82
+ <path class="spoke" d="M672 252 L616 284" marker-end="url(#arrow-soft)"/>
83
+ <path class="spoke" d="M672 428 L616 396" marker-end="url(#arrow-soft)"/>
84
+ <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)"/>
85
+ <path class="spoke" d="M368 428 L424 396" marker-end="url(#arrow-soft)"/>
86
+ <path class="spoke" d="M368 252 L424 284" marker-end="url(#arrow-soft)"/>
87
+
88
+ <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
89
+ <rect x="532" y="200" width="48" height="16" rx="4" fill="#f5f5f5"/>
90
+ <text x="556" y="212" class="arrow-label">SIGNALS</text>
91
+ <rect x="460" y="464" width="52" height="16" rx="4" fill="#f5f5f5"/>
92
+ <text x="486" y="476" class="arrow-label">OUTCOMES</text>
93
+
94
+ <!-- Stations -->
95
+ <rect class="station" x="440" y="68" width="160" height="64" rx="6"/>
96
+ <text x="520" y="96" class="node-name">Capture</text><text x="520" y="116" class="sublabel">signals in / intake</text>
97
+ <rect class="station" x="648" y="188" width="160" height="64" rx="6"/>
98
+ <text x="728" y="216" class="node-name">Research</text><text x="728" y="236" class="sublabel">evidence pulled</text>
99
+ <rect class="station focal" x="648" y="428" width="160" height="64" rx="6"/>
100
+ <text x="728" y="456" class="node-name focal-name">Decide</text><text x="728" y="476" class="sublabel">human approves</text>
101
+ <rect class="station" x="440" y="548" width="160" height="64" rx="6"/>
102
+ <text x="520" y="576" class="node-name">Act</text><text x="520" y="596" class="sublabel">work ships</text>
103
+ <rect class="station" x="232" y="428" width="160" height="64" rx="6"/>
104
+ <text x="312" y="456" class="node-name">Measure</text><text x="312" y="476" class="sublabel">outcomes logged</text>
105
+ <rect class="station" x="232" y="188" width="160" height="64" rx="6"/>
106
+ <text x="312" y="216" class="node-name">Learn</text><text x="312" y="236" class="sublabel">playbook updated</text>
107
+
108
+ <!-- The one shared-state hub. -->
109
+ <rect class="hub" x="420" y="288" width="200" height="104" rx="8"/>
110
+ <text x="520" y="336" class="hub-name">Shared memory</text>
111
+ <text x="520" y="360" class="hub-sub">one record, every loop</text>
112
+ </svg>
113
+ </div>
114
+
115
+ <section class="cards" aria-label="Loop summary">
116
+ <article class="card">
117
+ <p class="card-eyebrow">THE LOOP SIGNAL</p>
118
+ <div class="card-header"><span class="card-dot coral"></span><h2>The dashed lines are the product</h2></div>
119
+ <p>Shipping work matters once. Writing the result back makes the next pass faster, safer, and better informed.</p>
120
+ </article>
121
+ <article class="card">
122
+ <div class="card-header"><span class="card-dot ink"></span><h2>Memory compounds</h2></div>
123
+ <ul><li>Evidence survives the handoff</li><li>Outcomes update the playbook</li><li>One record stays shared</li></ul>
124
+ </article>
125
+ <article class="card">
126
+ <div class="card-header"><span class="card-dot muted"></span><h2>One human gate</h2></div>
127
+ <p>Decide is the only focal station because accountability should remain visible inside an improving system.</p>
128
+ </article>
129
+ </section>
130
+
131
+ <footer class="footer">
132
+ <span>company operations · reinforcing loop</span>
133
+ <span>example · schematic skill</span>
134
+ </footer>
135
+ </main>
136
+ </body>
137
+ </html>
package/skills/diagram-design/assets/example-loop-terminal.html ADDED
@@ -0,0 +1,347 @@
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>The self-improving loop · Terminal</title>
7
+ <link
8
+ href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&amp;display=swap"
9
+ rel="stylesheet"
10
+ />
11
+ <style>
12
+ *,
13
+ *::before,
14
+ *::after {
15
+ box-sizing: border-box;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+ :root {
20
+ --page: #0a0a0a;
21
+ --paper: #141414;
22
+ --bar: #1b1b1b;
23
+ --border: #2b2b2b;
24
+ --ink: #f5f5f5;
25
+ --muted: #9a9a9a;
26
+ --soft: #5c5c5c;
27
+ --accent: #ff5a36;
28
+ --accent-tint: rgba(255, 90, 54, 0.12);
29
+ --mono: "Geist Mono", ui-monospace, monospace;
30
+ }
31
+ body {
32
+ min-height: 100vh;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ padding: 3rem 2rem;
37
+ background: var(--page);
38
+ font-family: var(--mono);
39
+ }
40
+ .terminal {
41
+ width: 100%;
42
+ max-width: 1200px;
43
+ background: var(--paper);
44
+ border: 1px solid var(--border);
45
+ border-radius: 12px;
46
+ overflow: hidden;
47
+ }
48
+ .titlebar {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: 8px;
52
+ padding: 12px 16px;
53
+ background: var(--bar);
54
+ border-bottom: 1px solid var(--border);
55
+ }
56
+ .dot {
57
+ width: 10px;
58
+ height: 10px;
59
+ border-radius: 50%;
60
+ background: var(--soft);
61
+ }
62
+ .dot.accent {
63
+ background: var(--accent);
64
+ }
65
+ .titlebar-name {
66
+ flex: 1;
67
+ text-align: center;
68
+ color: var(--muted);
69
+ font: 500 0.7rem var(--mono);
70
+ letter-spacing: 0.04em;
71
+ margin-right: 46px;
72
+ }
73
+ .frame {
74
+ padding: 2.25rem 2.5rem 2.5rem;
75
+ }
76
+ .prompt {
77
+ display: flex;
78
+ gap: 0.6em;
79
+ margin-bottom: 0.9rem;
80
+ color: var(--muted);
81
+ font: 500 0.8rem var(--mono);
82
+ letter-spacing: 0.01em;
83
+ }
84
+ .prompt .sign {
85
+ color: var(--accent);
86
+ }
87
+ h1 {
88
+ margin-bottom: 1.5rem;
89
+ color: var(--ink);
90
+ font: 700 clamp(1.5rem, 2.2vw + 0.8rem, 2.05rem)/1.2 var(--mono);
91
+ letter-spacing: -0.01em;
92
+ }
93
+ h1::before {
94
+ content: "# ";
95
+ color: var(--soft);
96
+ }
97
+ svg {
98
+ display: block;
99
+ width: 100%;
100
+ min-width: 900px;
101
+ }
102
+ .ring {
103
+ fill: none;
104
+ stroke: var(--muted);
105
+ stroke-width: 1.2;
106
+ }
107
+ .spoke {
108
+ fill: none;
109
+ stroke: var(--soft);
110
+ stroke-width: 1;
111
+ stroke-dasharray: 5 4;
112
+ }
113
+ .station {
114
+ fill: var(--paper);
115
+ stroke: var(--ink);
116
+ stroke-width: 1;
117
+ }
118
+ .station.focal {
119
+ fill: var(--accent-tint);
120
+ stroke: var(--accent);
121
+ stroke-width: 1.4;
122
+ }
123
+ .hub {
124
+ fill: var(--ink);
125
+ }
126
+ .node-name {
127
+ fill: var(--ink);
128
+ font: 600 14px var(--mono);
129
+ text-anchor: middle;
130
+ }
131
+ .focal-name {
132
+ fill: var(--accent);
133
+ }
134
+ .sublabel {
135
+ fill: var(--muted);
136
+ font: 400 9.5px var(--mono);
137
+ text-anchor: middle;
138
+ }
139
+ .hub-name {
140
+ fill: var(--paper);
141
+ font: 700 18px var(--mono);
142
+ text-anchor: middle;
143
+ }
144
+ .hub-sub {
145
+ fill: var(--paper);
146
+ opacity: 0.7;
147
+ font: 400 9.5px var(--mono);
148
+ text-anchor: middle;
149
+ }
150
+ .arrow-label {
151
+ fill: var(--muted);
152
+ font: 500 9px var(--mono);
153
+ letter-spacing: 0.08em;
154
+ text-anchor: middle;
155
+ }
156
+ </style>
157
+ </head>
158
+ <body>
159
+ <div class="terminal">
160
+ <div class="titlebar">
161
+ <div class="dot accent"></div>
162
+ <div class="dot"></div>
163
+ <div class="dot"></div>
164
+ <div class="titlebar-name">loop.sh — self-improving-loop</div>
165
+ </div>
166
+ <main class="frame">
167
+ <p class="prompt">
168
+ <span class="sign">$</span> diagram-design render --type loop
169
+ </p>
170
+ <h1>The self-improving loop</h1>
171
+
172
+ <svg
173
+ viewBox="0 0 1040 680"
174
+ xmlns="http://www.w3.org/2000/svg"
175
+ role="img"
176
+ aria-labelledby="loop-terminal-title loop-terminal-desc"
177
+ >
178
+ <title id="loop-terminal-title">The self-improving loop</title>
179
+ <desc id="loop-terminal-desc">
180
+ Six stations flow clockwise from Capture through Learn and back to
181
+ Capture. Each station writes shared state into one central memory
182
+ hub, with Decide highlighted as the human approval gate.
183
+ </desc>
184
+ <defs>
185
+ <pattern
186
+ id="dots"
187
+ width="22"
188
+ height="22"
189
+ patternUnits="userSpaceOnUse"
190
+ >
191
+ <circle cx="1" cy="1" r="0.9" fill="rgba(255,255,255,0.08)" />
192
+ </pattern>
193
+ <marker
194
+ id="arrow"
195
+ markerWidth="8"
196
+ markerHeight="6"
197
+ refX="7"
198
+ refY="3"
199
+ orient="auto"
200
+ >
201
+ <polygon points="0 0, 8 3, 0 6" fill="#9a9a9a" />
202
+ </marker>
203
+ <marker
204
+ id="arrow-soft"
205
+ markerWidth="8"
206
+ markerHeight="6"
207
+ refX="7"
208
+ refY="3"
209
+ orient="auto"
210
+ >
211
+ <polygon points="0 0, 8 3, 0 6" fill="#5c5c5c" />
212
+ </marker>
213
+ </defs>
214
+ <rect width="1040" height="680" fill="#141414" />
215
+ <rect width="1040" height="680" fill="url(#dots)" opacity="0.7" />
216
+
217
+ <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
218
+ <path
219
+ class="ring"
220
+ d="M600 113.726 A240 240 0 0 1 704.969 187.073"
221
+ marker-end="url(#arrow)"
222
+ />
223
+ <path
224
+ class="ring"
225
+ d="M743.285 252 A240 240 0 0 1 743.722 426.882"
226
+ marker-end="url(#arrow)"
227
+ />
228
+ <path
229
+ class="ring"
230
+ d="M705.731 492 A240 240 0 0 1 601.130 565.871"
231
+ marker-end="url(#arrow)"
232
+ />
233
+ <path
234
+ class="ring"
235
+ d="M440 566.274 A240 240 0 0 1 335.031 492.927"
236
+ marker-end="url(#arrow)"
237
+ />
238
+ <path
239
+ class="ring"
240
+ d="M296.715 428 A240 240 0 0 1 296.278 253.118"
241
+ marker-end="url(#arrow)"
242
+ />
243
+ <path
244
+ class="ring"
245
+ d="M334.269 188 A240 240 0 0 1 438.870 114.129"
246
+ marker-end="url(#arrow)"
247
+ />
248
+
249
+ <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
250
+ <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)" />
251
+ <path
252
+ class="spoke"
253
+ d="M672 252 L616 284"
254
+ marker-end="url(#arrow-soft)"
255
+ />
256
+ <path
257
+ class="spoke"
258
+ d="M672 428 L616 396"
259
+ marker-end="url(#arrow-soft)"
260
+ />
261
+ <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)" />
262
+ <path
263
+ class="spoke"
264
+ d="M368 428 L424 396"
265
+ marker-end="url(#arrow-soft)"
266
+ />
267
+ <path
268
+ class="spoke"
269
+ d="M368 252 L424 284"
270
+ marker-end="url(#arrow-soft)"
271
+ />
272
+
273
+ <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
274
+ <rect x="530" y="199" width="52" height="17" rx="4" fill="#141414" />
275
+ <text x="556" y="211.5" class="arrow-label">SIGNALS</text>
276
+ <rect x="457" y="463" width="58" height="17" rx="4" fill="#141414" />
277
+ <text x="486" y="475.5" class="arrow-label">OUTCOMES</text>
278
+
279
+ <!-- Stations -->
280
+ <rect class="station" x="440" y="68" width="160" height="64" rx="6" />
281
+ <text x="520" y="96.5" class="node-name">Capture</text>
282
+ <text x="520" y="116.5" class="sublabel">signals in / intake</text>
283
+
284
+ <rect
285
+ class="station"
286
+ x="648"
287
+ y="188"
288
+ width="160"
289
+ height="64"
290
+ rx="6"
291
+ />
292
+ <text x="728" y="216.5" class="node-name">Research</text>
293
+ <text x="728" y="236.5" class="sublabel">evidence pulled</text>
294
+
295
+ <rect
296
+ class="station focal"
297
+ x="648"
298
+ y="428"
299
+ width="160"
300
+ height="64"
301
+ rx="6"
302
+ />
303
+ <text x="728" y="456.5" class="node-name focal-name">Decide</text>
304
+ <text x="728" y="476.5" class="sublabel">human approves</text>
305
+
306
+ <rect
307
+ class="station"
308
+ x="440"
309
+ y="548"
310
+ width="160"
311
+ height="64"
312
+ rx="6"
313
+ />
314
+ <text x="520" y="576.5" class="node-name">Act</text>
315
+ <text x="520" y="596.5" class="sublabel">work ships</text>
316
+
317
+ <rect
318
+ class="station"
319
+ x="232"
320
+ y="428"
321
+ width="160"
322
+ height="64"
323
+ rx="6"
324
+ />
325
+ <text x="312" y="456.5" class="node-name">Measure</text>
326
+ <text x="312" y="476.5" class="sublabel">outcomes logged</text>
327
+
328
+ <rect
329
+ class="station"
330
+ x="232"
331
+ y="188"
332
+ width="160"
333
+ height="64"
334
+ rx="6"
335
+ />
336
+ <text x="312" y="216.5" class="node-name">Learn</text>
337
+ <text x="312" y="236.5" class="sublabel">playbook updated</text>
338
+
339
+ <!-- The one shared-state hub. -->
340
+ <rect class="hub" x="420" y="288" width="200" height="104" rx="8" />
341
+ <text x="520" y="337.5" class="hub-name">Shared memory</text>
342
+ <text x="520" y="360.5" class="hub-sub">one record, every loop</text>
343
+ </svg>
344
+ </main>
345
+ </div>
346
+ </body>
347
+ </html>