@taloswork/ose-shared 0.1.8 → 0.1.10

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 (208) hide show
  1. package/mcp/gen/mcp.json +2 -2
  2. package/package.json +3 -3
  3. package/skills/cozy-static-svg/SKILL.md +76 -0
  4. package/skills/cozy-static-svg/references/approved-preview.png +0 -0
  5. package/skills/cozy-static-svg/references/cross-platform.md +73 -0
  6. package/skills/cozy-static-svg/references/moon_keeps_watch.svg +229 -0
  7. package/skills/cozy-static-svg/references/style-anchor.md +271 -0
  8. package/skills/cozy-static-svg/scripts/artkit.py +321 -0
  9. package/skills/cozy-static-svg/scripts/to_png.py +333 -0
  10. package/skills/diagram-design/SKILL.md +568 -0
  11. package/skills/diagram-design/assets/example-architecture-dark.html +182 -0
  12. package/skills/diagram-design/assets/example-architecture-full.html +194 -0
  13. package/skills/diagram-design/assets/example-architecture.html +183 -0
  14. package/skills/diagram-design/assets/example-bar-dark.html +129 -0
  15. package/skills/diagram-design/assets/example-bar-full.html +105 -0
  16. package/skills/diagram-design/assets/example-bar.html +129 -0
  17. package/skills/diagram-design/assets/example-data-flow-dark.html +143 -0
  18. package/skills/diagram-design/assets/example-data-flow-full.html +185 -0
  19. package/skills/diagram-design/assets/example-data-flow.html +143 -0
  20. package/skills/diagram-design/assets/example-datalake-dark.html +243 -0
  21. package/skills/diagram-design/assets/example-datalake-full.html +248 -0
  22. package/skills/diagram-design/assets/example-datalake.html +269 -0
  23. package/skills/diagram-design/assets/example-dp-integration-dark.html +80 -0
  24. package/skills/diagram-design/assets/example-dp-integration-full.html +90 -0
  25. package/skills/diagram-design/assets/example-dp-integration.html +80 -0
  26. package/skills/diagram-design/assets/example-dp-security-matrix-dark.html +31 -0
  27. package/skills/diagram-design/assets/example-dp-security-matrix-full.html +32 -0
  28. package/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  29. package/skills/diagram-design/assets/example-er-dark.html +202 -0
  30. package/skills/diagram-design/assets/example-er-full.html +205 -0
  31. package/skills/diagram-design/assets/example-er.html +202 -0
  32. package/skills/diagram-design/assets/example-flowchart-dark.html +156 -0
  33. package/skills/diagram-design/assets/example-flowchart-full.html +159 -0
  34. package/skills/diagram-design/assets/example-flowchart.html +156 -0
  35. package/skills/diagram-design/assets/example-gantt-dark.html +137 -0
  36. package/skills/diagram-design/assets/example-gantt-full.html +127 -0
  37. package/skills/diagram-design/assets/example-gantt.html +137 -0
  38. package/skills/diagram-design/assets/example-high-level-dark.html +251 -0
  39. package/skills/diagram-design/assets/example-high-level-full.html +247 -0
  40. package/skills/diagram-design/assets/example-high-level-vertical-dark.html +274 -0
  41. package/skills/diagram-design/assets/example-high-level-vertical-full.html +252 -0
  42. package/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  43. package/skills/diagram-design/assets/example-high-level.html +301 -0
  44. package/skills/diagram-design/assets/example-import-drawio.html +185 -0
  45. package/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  46. package/skills/diagram-design/assets/example-it-state-dark.html +90 -0
  47. package/skills/diagram-design/assets/example-it-state-full.html +69 -0
  48. package/skills/diagram-design/assets/example-it-state.html +128 -0
  49. package/skills/diagram-design/assets/example-layers-dark.html +123 -0
  50. package/skills/diagram-design/assets/example-layers-full.html +126 -0
  51. package/skills/diagram-design/assets/example-layers.html +123 -0
  52. package/skills/diagram-design/assets/example-line-dark.html +111 -0
  53. package/skills/diagram-design/assets/example-line-full.html +105 -0
  54. package/skills/diagram-design/assets/example-line.html +111 -0
  55. package/skills/diagram-design/assets/example-loop-dark.html +100 -0
  56. package/skills/diagram-design/assets/example-loop-full.html +137 -0
  57. package/skills/diagram-design/assets/example-loop-terminal.html +347 -0
  58. package/skills/diagram-design/assets/example-loop.html +100 -0
  59. package/skills/diagram-design/assets/example-medallion-dark.html +159 -0
  60. package/skills/diagram-design/assets/example-medallion-full.html +201 -0
  61. package/skills/diagram-design/assets/example-medallion.html +159 -0
  62. package/skills/diagram-design/assets/example-nested-dark.html +132 -0
  63. package/skills/diagram-design/assets/example-nested-full.html +135 -0
  64. package/skills/diagram-design/assets/example-nested.html +136 -0
  65. package/skills/diagram-design/assets/example-org-chart-dark.html +45 -0
  66. package/skills/diagram-design/assets/example-org-chart-full.html +45 -0
  67. package/skills/diagram-design/assets/example-org-chart.html +45 -0
  68. package/skills/diagram-design/assets/example-paved-road-animated.html +546 -0
  69. package/skills/diagram-design/assets/example-policy-trace-animated.html +490 -0
  70. package/skills/diagram-design/assets/example-process-dark.html +64 -0
  71. package/skills/diagram-design/assets/example-process-full.html +74 -0
  72. package/skills/diagram-design/assets/example-process.html +64 -0
  73. package/skills/diagram-design/assets/example-pyramid-dark.html +119 -0
  74. package/skills/diagram-design/assets/example-pyramid-full.html +122 -0
  75. package/skills/diagram-design/assets/example-pyramid.html +119 -0
  76. package/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  77. package/skills/diagram-design/assets/example-quadrant-dark.html +135 -0
  78. package/skills/diagram-design/assets/example-quadrant-full.html +138 -0
  79. package/skills/diagram-design/assets/example-quadrant.html +135 -0
  80. package/skills/diagram-design/assets/example-queue-animated.html +577 -0
  81. package/skills/diagram-design/assets/example-radar-dark.html +139 -0
  82. package/skills/diagram-design/assets/example-radar-full.html +135 -0
  83. package/skills/diagram-design/assets/example-radar.html +139 -0
  84. package/skills/diagram-design/assets/example-scatter-dark.html +141 -0
  85. package/skills/diagram-design/assets/example-scatter-full.html +116 -0
  86. package/skills/diagram-design/assets/example-scatter.html +141 -0
  87. package/skills/diagram-design/assets/example-sequence-dark.html +222 -0
  88. package/skills/diagram-design/assets/example-sequence-full.html +388 -0
  89. package/skills/diagram-design/assets/example-sequence-oauth-dark.html +188 -0
  90. package/skills/diagram-design/assets/example-sequence-oauth-full.html +350 -0
  91. package/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  92. package/skills/diagram-design/assets/example-sequence.html +222 -0
  93. package/skills/diagram-design/assets/example-state-dark.html +147 -0
  94. package/skills/diagram-design/assets/example-state-full.html +150 -0
  95. package/skills/diagram-design/assets/example-state.html +147 -0
  96. package/skills/diagram-design/assets/example-swimlane-dark.html +172 -0
  97. package/skills/diagram-design/assets/example-swimlane-full.html +175 -0
  98. package/skills/diagram-design/assets/example-swimlane.html +172 -0
  99. package/skills/diagram-design/assets/example-timeline-dark.html +135 -0
  100. package/skills/diagram-design/assets/example-timeline-full.html +138 -0
  101. package/skills/diagram-design/assets/example-timeline.html +135 -0
  102. package/skills/diagram-design/assets/example-tree-dark.html +173 -0
  103. package/skills/diagram-design/assets/example-tree-full.html +176 -0
  104. package/skills/diagram-design/assets/example-tree.html +173 -0
  105. package/skills/diagram-design/assets/example-venn-dark.html +132 -0
  106. package/skills/diagram-design/assets/example-venn-full.html +135 -0
  107. package/skills/diagram-design/assets/example-venn.html +110 -0
  108. package/skills/diagram-design/assets/icons.html +230 -0
  109. package/skills/diagram-design/assets/index.html +369 -0
  110. package/skills/diagram-design/assets/template-dark.html +85 -0
  111. package/skills/diagram-design/assets/template-full.html +413 -0
  112. package/skills/diagram-design/assets/template-motion.html +434 -0
  113. package/skills/diagram-design/assets/template-terminal.html +173 -0
  114. package/skills/diagram-design/assets/template.html +86 -0
  115. package/skills/diagram-design/references/animation.md +141 -0
  116. package/skills/diagram-design/references/export.md +136 -0
  117. package/skills/diagram-design/references/import-drawio.md +171 -0
  118. package/skills/diagram-design/references/import-mermaid.md +126 -0
  119. package/skills/diagram-design/references/onboarding.md +297 -0
  120. package/skills/diagram-design/references/output-spec.md +181 -0
  121. package/skills/diagram-design/references/primitive-annotation.md +36 -0
  122. package/skills/diagram-design/references/primitive-icons.md +827 -0
  123. package/skills/diagram-design/references/primitive-sketchy.md +43 -0
  124. package/skills/diagram-design/references/primitive-terminal.md +76 -0
  125. package/skills/diagram-design/references/semantic-patterns.md +122 -0
  126. package/skills/diagram-design/references/style-guide.md +139 -0
  127. package/skills/diagram-design/references/type-architecture.md +78 -0
  128. package/skills/diagram-design/references/type-bar.md +48 -0
  129. package/skills/diagram-design/references/type-data-flow.md +374 -0
  130. package/skills/diagram-design/references/type-dp-integration.md +410 -0
  131. package/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  132. package/skills/diagram-design/references/type-er.md +23 -0
  133. package/skills/diagram-design/references/type-flowchart.md +23 -0
  134. package/skills/diagram-design/references/type-gantt.md +45 -0
  135. package/skills/diagram-design/references/type-high-level.md +458 -0
  136. package/skills/diagram-design/references/type-it-state.md +470 -0
  137. package/skills/diagram-design/references/type-layers.md +26 -0
  138. package/skills/diagram-design/references/type-line.md +44 -0
  139. package/skills/diagram-design/references/type-loop.md +223 -0
  140. package/skills/diagram-design/references/type-medallion.md +356 -0
  141. package/skills/diagram-design/references/type-nested.md +22 -0
  142. package/skills/diagram-design/references/type-org-chart.md +44 -0
  143. package/skills/diagram-design/references/type-process.md +495 -0
  144. package/skills/diagram-design/references/type-pyramid.md +33 -0
  145. package/skills/diagram-design/references/type-quadrant.md +81 -0
  146. package/skills/diagram-design/references/type-radar.md +80 -0
  147. package/skills/diagram-design/references/type-scatter.md +39 -0
  148. package/skills/diagram-design/references/type-sequence.md +130 -0
  149. package/skills/diagram-design/references/type-state.md +21 -0
  150. package/skills/diagram-design/references/type-swimlane.md +20 -0
  151. package/skills/diagram-design/references/type-timeline.md +20 -0
  152. package/skills/diagram-design/references/type-tree.md +24 -0
  153. package/skills/diagram-design/references/type-venn.md +26 -0
  154. package/skills/diagram-design/scripts/drawio_extract.py +856 -0
  155. package/skills/diagram-design/scripts/mermaid_extract.py +1285 -0
  156. package/skills/diagram-design/scripts/self_check.py +389 -0
  157. package/skills/document/SKILL.md +63 -75
  158. package/skills/document/bin/deck-build.cjs +51 -1
  159. package/skills/document/bin/deck-qa.cjs +18745 -279
  160. package/skills/document/bin/doc-convert.cjs +9280 -76489
  161. package/skills/document/bin/doc-fill.cjs +0 -0
  162. package/skills/document/bin/doc-gen.cjs +3043 -46825
  163. package/skills/document/bin/doc-run.cjs +65095 -1967
  164. package/skills/document/bin/doc-scan.cjs +0 -0
  165. package/skills/document/bin/doc-text.cjs +0 -0
  166. package/skills/document/bin/doc-validate.cjs +18067 -226
  167. package/skills/document/bin/doc-xml.cjs +1 -1
  168. package/skills/document/bin/docx-annotate.cjs +0 -0
  169. package/skills/document/bin/html2pptx.cjs +32498 -145280
  170. package/skills/document/bin/ocr-worker.cjs +0 -0
  171. package/skills/document/bin/ocr.cjs +0 -0
  172. package/skills/document/bin/pdf-form.cjs +0 -0
  173. package/skills/document/bin/pdf-images.cjs +0 -0
  174. package/skills/document/bin/pdf-ops.cjs +0 -0
  175. package/skills/document/bin/pdf-render.cjs +11 -9
  176. package/skills/document/bin/pdf-tables.cjs +0 -0
  177. package/skills/document/bin/pptx-clone.cjs +21 -25
  178. package/skills/document/bin/pptx-embed-fonts.cjs +8 -6
  179. package/skills/document/bin/pptx-set-image.cjs +0 -0
  180. package/skills/document/bin/pptx-slide.cjs +22 -32
  181. package/skills/document/bin/pptx-theme.cjs +1 -20
  182. package/skills/document/bin/pptx-tokenize.cjs +1 -1
  183. package/skills/document/bin/xlsx-query.cjs +0 -0
  184. package/skills/document/bin/xlsx-recalc.cjs +0 -0
  185. package/skills/document/bin-reference.md +35 -0
  186. package/skills/document/content-pipeline.md +19 -18
  187. package/skills/document/deck-design.md +110 -211
  188. package/skills/document/layouts/README.md +4 -33
  189. package/skills/document/motion/README.md +4 -2
  190. package/skills/document/office.md +5 -1
  191. package/skills/document/rewrite.md +43 -99
  192. package/skills/document/styles/README.md +0 -7
  193. package/skills/document/theme-system.md +1 -0
  194. package/skills/document/themes/README.md +5 -5
  195. package/skills/document/themes/anthropic-clay.json +1 -7
  196. package/skills/document/themes/apple-keynote.json +1 -7
  197. package/skills/document/themes/black-gold.json +1 -2
  198. package/skills/document/themes/cinereel.json +1 -2
  199. package/skills/document/themes/cool-tech.json +1 -2
  200. package/skills/document/themes/hand-drawn.json +1 -2
  201. package/skills/document/themes/ivory-gold.json +1 -2
  202. package/skills/document/themes/magazine-ink.json +1 -2
  203. package/skills/document/themes/mckinsey-consulting.json +1 -7
  204. package/skills/document/themes/mono.json +1 -2
  205. package/skills/document/themes/swiss-grid.json +1 -2
  206. package/skills/document/themes/warm-editorial.json +1 -2
  207. package/skills/image-layout/SKILL.md +1 -1
  208. package/skills/image-layout/bin/html2img.cjs +0 -0
package/skills/diagram-design/assets/example-medallion.html ADDED
@@ -0,0 +1,159 @@
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>E-commerce analytics · Medallion</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; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
18
+ .frame { width: 100%; max-width: 1200px; }
19
+ .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
20
+ 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; }
21
+ svg { display: block; width: 100%; min-width: 1040px; }
22
+ .tier-title { fill: var(--ink); font: 600 13px var(--sans); text-anchor: middle; }
23
+ .bucket, .field-value, .example-value { fill: var(--muted); font: 400 9px var(--mono); }
24
+ .bucket { text-anchor: middle; }
25
+ .field-value { color: var(--muted); }
26
+ .focal-text { fill: var(--accent); }
27
+ .field-label { fill: var(--ink); font: 600 11px var(--sans); }
28
+ .example-label, .arc-label, .path-tag { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
29
+ .example-label { fill: var(--soft); font-size: 8px; }
30
+ .arc-label { font-size: 10px; text-anchor: middle; }
31
+ .path-title { fill: var(--ink); font: 600 11px var(--sans); }
32
+ .path-sub { fill: var(--muted); font: 400 9px var(--mono); }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <main class="frame">
37
+ <p class="eyebrow">Medallion · Diagram Design</p>
38
+ <h1>Five-tier e-commerce analytics storage</h1>
39
+
40
+ <svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-title medallion-desc">
41
+ <title id="medallion-title">Five-tier e-commerce analytics medallion</title>
42
+ <desc id="medallion-desc">Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving.</desc>
43
+ <defs>
44
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></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="#eb6c36"/></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="#2e5aa8"/></marker>
47
+ <clipPath id="clip-raw"><rect x="16" y="80" width="172" height="380" rx="6"/></clipPath>
48
+ <clipPath id="clip-anon"><rect x="204" y="80" width="172" height="380" rx="6"/></clipPath>
49
+ <clipPath id="clip-stage"><rect x="392" y="80" width="172" height="380" rx="6"/></clipPath>
50
+ <clipPath id="clip-aggregate"><rect x="580" y="80" width="172" height="380" rx="6"/></clipPath>
51
+ <clipPath id="clip-archive"><rect x="768" y="80" width="172" height="380" rx="6"/></clipPath>
52
+ </defs>
53
+ <rect width="1040" height="548" fill="#f5f5f5"/>
54
+
55
+ <!-- Promotion arcs are the medallion type's required connector grammar. -->
56
+ <path d="M102 80 C102 0 290 0 290 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
57
+ <path d="M290 80 C290 0 478 0 478 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
58
+ <path d="M478 80 C478 0 666 0 666 80" fill="none" stroke="#eb6c36" stroke-width="1.6" marker-end="url(#arrow-accent)"/>
59
+ <path d="M666 80 C666 0 854 0 854 80" fill="none" stroke="#4f5d75" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
60
+ <text x="196" y="50" class="arc-label" fill="#4f5d75">MASK IDS</text>
61
+ <text x="384" y="50" class="arc-label" fill="#4f5d75">CLEAN + JOIN</text>
62
+ <text x="572" y="50" class="arc-label" fill="#eb6c36">AGGREGATE</text>
63
+ <text x="760" y="50" class="arc-label" fill="#4f5d75">LIFECYCLE</text>
64
+
65
+ <!-- Raw -->
66
+ <rect x="16" y="80" width="172" height="380" rx="6" fill="#fff"/>
67
+ <rect x="16" y="80" width="172" height="50" fill="rgba(79,93,117,0.10)" clip-path="url(#clip-raw)"/>
68
+ <rect x="16" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75"/>
69
+ <text x="102" y="106" class="tier-title">Raw</text>
70
+ <text x="102" y="144" class="bucket">raw-commerce</text>
71
+ <text x="32" y="180" class="field-label">Tool</text>
72
+ <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>
73
+ <text x="32" y="220" class="field-label">Format</text>
74
+ <foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>
75
+ <text x="32" y="260" class="field-label">Writer</text>
76
+ <foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
77
+ <text x="32" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
78
+ <text x="32" y="374" class="example-value">clickstream events</text>
79
+ <text x="32" y="388" class="example-value">order records</text>
80
+
81
+ <!-- Anonymized -->
82
+ <rect x="204" y="80" width="172" height="380" rx="6" fill="#fff"/>
83
+ <rect x="204" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-anon)"/>
84
+ <rect x="204" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
85
+ <text x="290" y="106" class="tier-title">Anonymized</text>
86
+ <text x="290" y="144" class="bucket">anon-commerce</text>
87
+ <text x="220" y="180" class="field-label">Tool</text>
88
+ <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>
89
+ <text x="220" y="220" class="field-label">Format</text>
90
+ <foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreignObject>
91
+ <text x="220" y="260" class="field-label">Writer</text>
92
+ <foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
93
+ <text x="220" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
94
+ <text x="220" y="374" class="example-value">session pseudonyms</text>
95
+ <text x="220" y="388" class="example-value">masked customer IDs</text>
96
+
97
+ <!-- Staging -->
98
+ <rect x="392" y="80" width="172" height="380" rx="6" fill="#fff"/>
99
+ <rect x="392" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-stage)"/>
100
+ <rect x="392" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
101
+ <text x="478" y="106" class="tier-title">Staging</text>
102
+ <text x="478" y="144" class="bucket">staging-commerce</text>
103
+ <text x="408" y="180" class="field-label">Tool</text>
104
+ <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject>
105
+ <text x="408" y="220" class="field-label">Format</text>
106
+ <foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObject>
107
+ <text x="408" y="260" class="field-label">Writer</text>
108
+ <foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>
109
+ <text x="408" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
110
+ <text x="408" y="374" class="example-value">joined order facts</text>
111
+ <text x="408" y="388" class="example-value">validated event rows</text>
112
+
113
+ <!-- Aggregated focal tier -->
114
+ <rect x="580" y="80" width="172" height="380" rx="6" fill="rgba(235,108,54,0.07)"/>
115
+ <rect x="580" y="80" width="172" height="50" fill="rgba(235,108,54,0.14)" clip-path="url(#clip-aggregate)"/>
116
+ <rect x="580" y="80" width="172" height="380" rx="6" fill="none" stroke="#eb6c36" stroke-width="1.6"/>
117
+ <text x="666" y="106" class="tier-title">Aggregated</text>
118
+ <text x="666" y="144" class="bucket focal-text">analytics-marts</text>
119
+ <text x="596" y="180" class="field-label">Tool</text>
120
+ <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>
121
+ <text x="596" y="220" class="field-label">Format</text>
122
+ <foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObject>
123
+ <text x="596" y="260" class="field-label">Writer</text>
124
+ <foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>
125
+ <text x="596" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
126
+ <text x="596" y="374" class="example-value focal-text">daily conversion rate</text>
127
+ <text x="596" y="388" class="example-value focal-text">revenue by channel</text>
128
+
129
+ <!-- Archive -->
130
+ <rect x="768" y="80" width="172" height="380" rx="6" fill="#ececec"/>
131
+ <rect x="768" y="80" width="172" height="50" fill="rgba(79,93,117,0.18)" clip-path="url(#clip-archive)"/>
132
+ <rect x="768" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75" stroke-dasharray="5,3"/>
133
+ <text x="854" y="106" class="tier-title">Archive</text>
134
+ <text x="854" y="144" class="bucket">archive-commerce</text>
135
+ <text x="784" y="180" class="field-label">Tool</text>
136
+ <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreignObject>
137
+ <text x="784" y="220" class="field-label">Format</text>
138
+ <foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreignObject>
139
+ <text x="784" y="260" class="field-label">Writer</text>
140
+ <foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
141
+ <text x="784" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
142
+ <text x="784" y="374" class="example-value">retained clickstream</text>
143
+ <text x="784" y="388" class="example-value">closed order snapshots</text>
144
+
145
+ <!-- Write-method paths -->
146
+ <rect x="16" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
147
+ <rect x="24" y="482" width="64" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
148
+ <text x="56" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">SQL PATH</text>
149
+ <text x="96" y="506" class="path-title">Trino INSERT INTO … SELECT</text>
150
+ <text x="96" y="522" class="path-sub">filter · join · aggregate — repeatable transforms</text>
151
+ <rect x="492" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
152
+ <rect x="500" y="482" width="96" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
153
+ <text x="548" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">NOTEBOOK PATH</text>
154
+ <text x="604" y="506" class="path-title">Python notebooks on object storage</text>
155
+ <text x="604" y="522" class="path-sub">explore · validate · model — interactive analysis</text>
156
+ </svg>
157
+ </main>
158
+ </body>
159
+ </html>
package/skills/diagram-design/assets/example-nested-dark.html ADDED
@@ -0,0 +1,132 @@
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 CLAUDE.md Hierarchy</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">Nested · Diagram Design</p>
59
+ <h1>The CLAUDE.md Hierarchy</h1>
60
+
61
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-dark-title nested-dark-desc">
62
+ <title id="nested-dark-title">The CLAUDE.md Hierarchy</title>
63
+ <desc id="nested-dark-desc">Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels.</desc>
64
+ <defs>
65
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
66
+ <circle cx="1" cy="1" r="0.9" fill="rgba(245,245,245,0.10)"/>
67
+ </pattern>
68
+ </defs>
69
+
70
+ <rect width="100%" height="100%" fill="#2d3142"/>
71
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
72
+
73
+ <!-- Level 1: ~/.claude/ (global) — outermost -->
74
+ <rect x="40" y="60" width="920" height="380" rx="8" fill="rgba(245,245,245,0.015)" stroke="rgba(245,245,245,0.30)" stroke-width="1"/>
75
+ <!-- Level 2: ~/vault/ -->
76
+ <rect x="72" y="96" width="856" height="308" rx="8" fill="rgba(245,245,245,0.02)" stroke="rgba(245,245,245,0.35)" stroke-width="1"/>
77
+ <!-- Level 3: /business -->
78
+ <rect x="104" y="132" width="792" height="236" rx="8" fill="rgba(245,245,245,0.025)" stroke="rgba(245,245,245,0.45)" stroke-width="1"/>
79
+ <!-- Level 4: /marketing -->
80
+ <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(245,245,245,0.03)" stroke="#bfc0c0" stroke-width="1"/>
81
+ <!-- Level 5: /project — innermost, coral focal -->
82
+ <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(240,138,89,0.08)" stroke="#f08a59" stroke-width="1"/>
83
+
84
+ <!-- Level labels on paper-colored masks -->
85
+ <rect x="56" y="52" width="188" height="16" fill="#2d3142"/>
86
+ <text x="64" y="64" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/.claude/ (global)</text>
87
+
88
+ <rect x="88" y="88" width="148" height="16" fill="#2d3142"/>
89
+ <text x="96" y="100" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/vault/ (notes)</text>
90
+
91
+ <rect x="120" y="124" width="96" height="16" fill="#2d3142"/>
92
+ <text x="128" y="136" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
93
+
94
+ <rect x="152" y="160" width="108" height="16" fill="#2d3142"/>
95
+ <text x="160" y="172" fill="#f5f5f5" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
96
+
97
+ <rect x="184" y="196" width="88" height="16" fill="#2d3142"/>
98
+ <text x="192" y="208" fill="#f08a59" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em" font-weight="600">/project</text>
99
+
100
+ <!-- File-icon glyphs (simple rect with folded corner) inside each level -->
101
+ <g transform="translate(908, 408)">
102
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#2d3142" stroke="rgba(245,245,245,0.35)" stroke-width="1"/>
103
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.35)" stroke-width="1"/>
104
+ </g>
105
+ <g transform="translate(876, 372)">
106
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#2d3142" stroke="rgba(245,245,245,0.40)" stroke-width="1"/>
107
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.40)" stroke-width="1"/>
108
+ </g>
109
+ <g transform="translate(844, 336)">
110
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#2d3142" stroke="rgba(245,245,245,0.50)" stroke-width="1"/>
111
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.50)" stroke-width="1"/>
112
+ </g>
113
+ <g transform="translate(812, 300)">
114
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#2d3142" stroke="#bfc0c0" stroke-width="1"/>
115
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="#bfc0c0" stroke-width="1"/>
116
+ </g>
117
+
118
+ <!-- Innermost label — human readable -->
119
+ <text x="500" y="248" fill="#f5f5f5" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
120
+ <text x="500" y="272" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">inherits every level above</text>
121
+
122
+ <!-- Annotation top-right: italic callout with curved arrow -->
123
+ <text x="904" y="36" fill="#f5f5f5" font-size="14" font-style="italic" font-family="'Instrument Serif', serif" text-anchor="end">no imports, no configuration</text>
124
+ <path d="M 820 44 Q 700 84 520 216" fill="none" stroke="rgba(245,245,245,0.40)" stroke-width="1" stroke-dasharray="4,3"/>
125
+ <circle cx="520" cy="216" r="2" fill="#f5f5f5"/>
126
+
127
+ <!-- Annotation bottom-left: italic callout -->
128
+ <text x="40" y="484" fill="#bfc0c0" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
129
+ </svg>
130
+ </div>
131
+ </body>
132
+ </html>
package/skills/diagram-design/assets/example-nested-full.html ADDED
@@ -0,0 +1,135 @@
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 CLAUDE.md Hierarchy</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; --color-link:#2e5aa8; --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: 900px; display: block; }
19
+ .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
20
+ @media (max-width: 820px) { .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.ink { background: var(--color-ink); } .card-dot.muted { background: var(--color-muted); } .card-dot.coral { background: var(--color-accent); }
26
+ .card h3 { font-size: 0.875rem; font-weight: 600; }
27
+ .card p, .card ul { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; list-style: none; }
28
+ .card li { margin-bottom: 0.3rem; padding-left: 0.875rem; position: relative; }
29
+ .card li::before { content: '—'; position: absolute; left: 0; color: rgba(45,49,66,0.25); font-size: 0.75rem; }
30
+ .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; }
31
+ </style>
32
+ </head>
33
+ <body>
34
+ <div class="container">
35
+ <div class="header">
36
+ <p class="header-eyebrow">Nested · Diagram Design</p>
37
+ <h1>The CLAUDE.md Hierarchy</h1>
38
+ <p class="subtitle">How Claude Code composes context from every folder level above. Each outer ring is a broader scope; the innermost box is where the work happens — inheriting every instruction above it without a single import statement.</p>
39
+ </div>
40
+
41
+ <div class="diagram-container">
42
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-full-title nested-full-desc">
43
+ <title id="nested-full-title">The CLAUDE.md Hierarchy</title>
44
+ <desc id="nested-full-desc">Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels.</desc>
45
+ <defs>
46
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
47
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
48
+ </pattern>
49
+ </defs>
50
+
51
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
52
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
53
+
54
+ <!-- Level 1: ~/.claude/ (global) — outermost -->
55
+ <rect x="40" y="60" width="920" height="380" rx="8" fill="rgba(45,49,66,0.015)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
56
+ <!-- Level 2: ~/vault/ -->
57
+ <rect x="72" y="96" width="856" height="308" rx="8" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
58
+ <!-- Level 3: /business -->
59
+ <rect x="104" y="132" width="792" height="236" rx="8" fill="rgba(45,49,66,0.025)" stroke="rgba(45,49,66,0.45)" stroke-width="1"/>
60
+ <!-- Level 4: /marketing -->
61
+ <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(45,49,66,0.03)" stroke="#4f5d75" stroke-width="1"/>
62
+ <!-- Level 5: /project — innermost, coral focal -->
63
+ <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1"/>
64
+
65
+ <!-- Level labels on paper-2-colored masks (match diagram-container bg) -->
66
+ <rect x="56" y="52" width="188" height="16" fill="#ececec"/>
67
+ <text x="64" y="64" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/.claude/ (global)</text>
68
+
69
+ <rect x="88" y="88" width="148" height="16" fill="#ececec"/>
70
+ <text x="96" y="100" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/vault/ (notes)</text>
71
+
72
+ <rect x="120" y="124" width="96" height="16" fill="#ececec"/>
73
+ <text x="128" y="136" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
74
+
75
+ <rect x="152" y="160" width="108" height="16" fill="#ececec"/>
76
+ <text x="160" y="172" fill="#2d3142" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
77
+
78
+ <rect x="184" y="196" width="88" height="16" fill="#ececec"/>
79
+ <text x="192" y="208" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em" font-weight="600">/project</text>
80
+
81
+ <!-- File-icon glyphs inside each level -->
82
+ <g transform="translate(908, 408)">
83
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#ececec" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
84
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
85
+ </g>
86
+ <g transform="translate(876, 372)">
87
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#ececec" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
88
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
89
+ </g>
90
+ <g transform="translate(844, 336)">
91
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#ececec" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
92
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
93
+ </g>
94
+ <g transform="translate(812, 300)">
95
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#ececec" stroke="#4f5d75" stroke-width="1"/>
96
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="#4f5d75" stroke-width="1"/>
97
+ </g>
98
+
99
+ <!-- Innermost label — human readable -->
100
+ <text x="500" y="248" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
101
+ <text x="500" y="272" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">inherits every level above</text>
102
+
103
+ <!-- Annotation top-right: italic callout with curved arrow -->
104
+ <text x="904" y="36" fill="#2d3142" font-size="14" font-style="italic" font-family="'Instrument Serif', serif" text-anchor="end">no imports, no configuration</text>
105
+ <path d="M 820 44 Q 700 84 520 216" fill="none" stroke="rgba(45,49,66,0.40)" stroke-width="1" stroke-dasharray="4,3"/>
106
+ <circle cx="520" cy="216" r="2" fill="#2d3142"/>
107
+
108
+ <!-- Annotation bottom-left: italic callout -->
109
+ <text x="40" y="484" fill="#4f5d75" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
110
+ </svg>
111
+ </div>
112
+
113
+ <div class="cards">
114
+ <div class="card">
115
+ <p class="eyebrow">THE HEADLINE</p>
116
+ <div class="card-header"><span class="card-dot coral"></span><h3>Containment is the config</h3></div>
117
+ <p>Every CLAUDE.md inside a parent folder implicitly wraps the one below. No manifest, no import graph — the file tree itself declares scope, so renaming a folder is the only migration you'll ever run.</p>
118
+ </div>
119
+ <div class="card">
120
+ <div class="card-header"><span class="card-dot ink"></span><h3>Reads outside-in</h3></div>
121
+ <ul><li>Global rules load first</li><li>Each parent narrows context</li><li>Innermost file gets the last word</li><li>Conflicts resolve by specificity</li></ul>
122
+ </div>
123
+ <div class="card">
124
+ <div class="card-header"><span class="card-dot muted"></span><h3>Five levels is the ceiling</h3></div>
125
+ <p>Past five rings the diagram stops teaching — and so does the filesystem. If you need six levels of instruction, you probably need two projects instead.</p>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="footer">
130
+ <span>the claude.md hierarchy · nested containment</span>
131
+ <span>example · schematic skill</span>
132
+ </div>
133
+ </div>
134
+ </body>
135
+ </html>
package/skills/diagram-design/assets/example-nested.html ADDED
@@ -0,0 +1,136 @@
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 CLAUDE.md Hierarchy</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: #eb6c36;
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">Nested · Diagram Design</p>
59
+ <h1>The CLAUDE.md Hierarchy</h1>
60
+
61
+ <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-title nested-desc">
62
+ <title id="nested-title">The CLAUDE.md Hierarchy</title>
63
+ <desc id="nested-desc">Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels.</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
+ </defs>
69
+
70
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
71
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
72
+
73
+ <!-- Level 1: ~/.claude/ (global) — outermost -->
74
+ <rect x="40" y="60" width="920" height="380" rx="8" fill="rgba(45,49,66,0.015)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
75
+ <!-- Level 2: ~/vault/ -->
76
+ <rect x="72" y="96" width="856" height="308" rx="8" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
77
+ <!-- Level 3: /business -->
78
+ <rect x="104" y="132" width="792" height="236" rx="8" fill="rgba(45,49,66,0.025)" stroke="rgba(45,49,66,0.45)" stroke-width="1"/>
79
+ <!-- Level 4: /marketing -->
80
+ <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(45,49,66,0.03)" stroke="#4f5d75" stroke-width="1"/>
81
+ <!-- Level 5: /project — innermost, coral focal -->
82
+ <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1"/>
83
+
84
+ <!-- Level labels on paper-colored masks -->
85
+ <rect x="56" y="52" width="188" height="16" fill="#f5f5f5"/>
86
+ <text x="64" y="64" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/.claude/ (global)</text>
87
+
88
+ <rect x="88" y="88" width="148" height="16" fill="#f5f5f5"/>
89
+ <text x="96" y="100" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/vault/ (notes)</text>
90
+
91
+ <rect x="120" y="124" width="96" height="16" fill="#f5f5f5"/>
92
+ <text x="128" y="136" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
93
+
94
+ <rect x="152" y="160" width="108" height="16" fill="#f5f5f5"/>
95
+ <text x="160" y="172" fill="#2d3142" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
96
+
97
+ <rect x="184" y="196" width="88" height="16" fill="#f5f5f5"/>
98
+ <text x="192" y="208" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em" font-weight="600">/project</text>
99
+
100
+ <!-- File-icon glyphs (simple rect with folded corner) inside each level -->
101
+ <!-- Glyph in level 1 (bottom-right area of outer ring) -->
102
+ <g transform="translate(908, 408)">
103
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#f5f5f5" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
104
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
105
+ </g>
106
+ <!-- Glyph in level 2 ring -->
107
+ <g transform="translate(876, 372)">
108
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#f5f5f5" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
109
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
110
+ </g>
111
+ <!-- Glyph in level 3 ring -->
112
+ <g transform="translate(844, 336)">
113
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#f5f5f5" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
114
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
115
+ </g>
116
+ <!-- Glyph in level 4 ring -->
117
+ <g transform="translate(812, 300)">
118
+ <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#f5f5f5" stroke="#4f5d75" stroke-width="1"/>
119
+ <path d="M16 0 L16 4 L20 4" fill="none" stroke="#4f5d75" stroke-width="1"/>
120
+ </g>
121
+
122
+ <!-- Innermost label — human readable -->
123
+ <text x="500" y="248" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
124
+ <text x="500" y="272" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">inherits every level above</text>
125
+
126
+ <!-- Annotation top-right: italic callout with curved arrow -->
127
+ <text x="904" y="36" fill="#2d3142" font-size="14" font-style="italic" font-family="'Instrument Serif', serif" text-anchor="end">no imports, no configuration</text>
128
+ <path d="M 820 44 Q 700 84 520 216" fill="none" stroke="rgba(45,49,66,0.40)" stroke-width="1" stroke-dasharray="4,3"/>
129
+ <circle cx="520" cy="216" r="2" fill="#2d3142"/>
130
+
131
+ <!-- Annotation bottom-left: italic callout -->
132
+ <text x="40" y="484" fill="#4f5d75" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
133
+ </svg>
134
+ </div>
135
+ </body>
136
+ </html>