npm - @mohammadhprp/system-prompt - Versions diffs - 0.10.1 - Mend

@mohammadhprp/system-prompt 0.10.1

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 (347) hide show

package/framework/skills/diagram-design/assets/example-medallion-full.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>E-commerce analytics · Medallion · Full</title>
+  <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">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --paper: #f5f5f5; --paper-2: #ececec; --ink: #2d3142; --muted: #4f5d75;
+      --soft: #7a8399; --rule: rgba(45,49,66,0.12); --accent: #eb6c36;
+      --accent-tint: rgba(235,108,54,0.08); --link: #2e5aa8;
+      --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
+      --mono: 'Geist Mono', ui-monospace, monospace;
+    }
+    body { min-height: 100vh; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
+    .container { width: 100%; max-width: 1200px; margin: 0 auto; }
+    .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    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; }
+    svg { display: block; width: 100%; min-width: 1040px; }
+    .tier-title { fill: var(--ink); font: 600 13px var(--sans); text-anchor: middle; }
+    .bucket, .field-value, .example-value { fill: var(--muted); font: 400 9px var(--mono); }
+    .bucket { text-anchor: middle; }
+    .field-value { color: var(--muted); }
+    .focal-text { fill: var(--accent); }
+    .field-label { fill: var(--ink); font: 600 11px var(--sans); }
+    .example-label, .arc-label, .path-tag { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
+    .example-label { fill: var(--soft); font-size: 8px; }
+    .arc-label { font-size: 10px; text-anchor: middle; }
+    .path-title { fill: var(--ink); font: 600 11px var(--sans); }
+    .path-sub { fill: var(--muted); font: 400 9px var(--mono); }
+    .header { margin-bottom: 2.5rem; }
+    .header h1 { margin-bottom: 0.5rem; }
+    .subtitle { max-width: 62ch; color: var(--muted); font-size: 1rem; line-height: 1.55; }
+    .diagram-container { overflow-x: auto; padding: 1.5rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; }
+    .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
+    .card { padding: 1.25rem; background: #fff; border: 1px solid var(--rule); border-radius: 6px; }
+    .card .card-eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.5rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    .card-header { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.875rem; padding-bottom: 0.875rem; border-bottom: 1px solid rgba(45,49,66,0.08); }
+    .card-dot { width: 7px; height: 7px; border-radius: 50%; }
+    .card-dot.coral { background: var(--accent); } .card-dot.ink { background: var(--ink); } .card-dot.muted { background: var(--muted); }
+    .card h2 { font-size: 0.875rem; font-weight: 600; }
+    .card p, .card ul { color: var(--muted); font-size: 0.8125rem; line-height: 1.55; list-style: none; }
+    .card li { position: relative; margin-bottom: 0.3rem; padding-left: 0.875rem; }
+    .card li::before { position: absolute; left: 0; color: rgba(45,49,66,0.25); content: '—'; }
+    .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; }
+    @media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
+  </style>
+</head>
+<body>
+  <main class="container">
+    <header class="header">
+      <p class="eyebrow">Medallion · Diagram Design</p>
+      <h1>Five-tier e-commerce analytics storage</h1>
+      <p class="subtitle">A quality ladder for clickstream events and order records, from immutable landing data to dashboard-ready metrics and cold retention.</p>
+    </header>
+    <div class="diagram-container">
+    <svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-title medallion-desc">
+      <title id="medallion-title">Five-tier e-commerce analytics medallion</title>
+      <desc id="medallion-desc">Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving.</desc>
+      <defs>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
+        <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>
+        <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>
+        <clipPath id="clip-raw"><rect x="16" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-anon"><rect x="204" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-stage"><rect x="392" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-aggregate"><rect x="580" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-archive"><rect x="768" y="80" width="172" height="380" rx="6"/></clipPath>
+      </defs>
+      <rect width="1040" height="548" fill="#f5f5f5"/>
+      <!-- Promotion arcs are the medallion type's required connector grammar. -->
+      <path d="M102 80 C102 0 290 0 290 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M290 80 C290 0 478 0 478 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M478 80 C478 0 666 0 666 80" fill="none" stroke="#eb6c36" stroke-width="1.6" marker-end="url(#arrow-accent)"/>
+      <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)"/>
+      <text x="196" y="50" class="arc-label" fill="#4f5d75">MASK IDS</text>
+      <text x="384" y="50" class="arc-label" fill="#4f5d75">CLEAN + JOIN</text>
+      <text x="572" y="50" class="arc-label" fill="#eb6c36">AGGREGATE</text>
+      <text x="760" y="50" class="arc-label" fill="#4f5d75">LIFECYCLE</text>
+      <!-- Raw -->
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="16" y="80" width="172" height="50" fill="rgba(79,93,117,0.10)" clip-path="url(#clip-raw)"/>
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75"/>
+      <text x="102" y="106" class="tier-title">Raw</text>
+      <text x="102" y="144" class="bucket">raw-commerce</text>
+      <text x="32" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="32" y="220" class="field-label">Format</text>
+      <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>
+      <text x="32" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="32" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="32" y="374" class="example-value">clickstream events</text>
+      <text x="32" y="388" class="example-value">order records</text>
+      <!-- Anonymized -->
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="204" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-anon)"/>
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
+      <text x="290" y="106" class="tier-title">Anonymized</text>
+      <text x="290" y="144" class="bucket">anon-commerce</text>
+      <text x="220" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="220" y="220" class="field-label">Format</text>
+      <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>
+      <text x="220" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="220" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="220" y="374" class="example-value">session pseudonyms</text>
+      <text x="220" y="388" class="example-value">masked customer IDs</text>
+      <!-- Staging -->
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="392" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-stage)"/>
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
+      <text x="478" y="106" class="tier-title">Staging</text>
+      <text x="478" y="144" class="bucket">staging-commerce</text>
+      <text x="408" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="408" y="220" class="field-label">Format</text>
+      <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>
+      <text x="408" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="408" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="408" y="374" class="example-value">joined order facts</text>
+      <text x="408" y="388" class="example-value">validated event rows</text>
+      <!-- Aggregated focal tier -->
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="rgba(235,108,54,0.07)"/>
+      <rect x="580" y="80" width="172" height="50" fill="rgba(235,108,54,0.14)" clip-path="url(#clip-aggregate)"/>
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="none" stroke="#eb6c36" stroke-width="1.6"/>
+      <text x="666" y="106" class="tier-title">Aggregated</text>
+      <text x="666" y="144" class="bucket focal-text">analytics-marts</text>
+      <text x="596" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="596" y="220" class="field-label">Format</text>
+      <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>
+      <text x="596" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="596" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="596" y="374" class="example-value focal-text">daily conversion rate</text>
+      <text x="596" y="388" class="example-value focal-text">revenue by channel</text>
+      <!-- Archive -->
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="#ececec"/>
+      <rect x="768" y="80" width="172" height="50" fill="rgba(79,93,117,0.18)" clip-path="url(#clip-archive)"/>
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75" stroke-dasharray="5,3"/>
+      <text x="854" y="106" class="tier-title">Archive</text>
+      <text x="854" y="144" class="bucket">archive-commerce</text>
+      <text x="784" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="784" y="220" class="field-label">Format</text>
+      <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>
+      <text x="784" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="784" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="784" y="374" class="example-value">retained clickstream</text>
+      <text x="784" y="388" class="example-value">closed order snapshots</text>
+      <!-- Write-method paths -->
+      <rect x="16" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
+      <rect x="24" y="482" width="64" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
+      <text x="56" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">SQL PATH</text>
+      <text x="96" y="506" class="path-title">Trino INSERT INTO … SELECT</text>
+      <text x="96" y="522" class="path-sub">filter · join · aggregate — repeatable transforms</text>
+      <rect x="492" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
+      <rect x="500" y="482" width="96" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
+      <text x="548" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">NOTEBOOK PATH</text>
+      <text x="604" y="506" class="path-title">Python notebooks on object storage</text>
+      <text x="604" y="522" class="path-sub">explore · validate · model — interactive analysis</text>
+    </svg>
+    </div>
+    <section class="cards" aria-label="Diagram summary">
+      <article class="card">
+        <p class="card-eyebrow">THE HEADLINE</p>
+        <div class="card-header"><span class="card-dot coral"></span><h2>Aggregated is the query surface</h2></div>
+        <p>Dashboards read stable metrics instead of recomputing joins across raw commerce records.</p>
+      </article>
+      <article class="card">
+        <div class="card-header"><span class="card-dot ink"></span><h2>Quality rises by tier</h2></div>
+        <ul><li>Identifiers are masked first</li><li>Events and orders are validated</li><li>Metrics are versioned for reuse</li></ul>
+      </article>
+      <article class="card">
+        <div class="card-header"><span class="card-dot muted"></span><h2>Two write modes</h2></div>
+        <p>Trino handles repeatable promotion jobs; notebooks support exploration before logic is operationalized.</p>
+      </article>
+    </section>
+    <footer class="footer">
+      <span>e-commerce analytics · medallion</span>
+      <span>example · schematic skill</span>
+    </footer>
+  </main>
+</body>
+</html>

package/framework/skills/diagram-design/assets/example-medallion.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>E-commerce analytics · Medallion</title>
+  <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">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --paper: #f5f5f5; --paper-2: #ececec; --ink: #2d3142; --muted: #4f5d75;
+      --soft: #7a8399; --rule: rgba(45,49,66,0.12); --accent: #eb6c36;
+      --accent-tint: rgba(235,108,54,0.08); --link: #2e5aa8;
+      --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
+      --mono: 'Geist Mono', ui-monospace, monospace;
+    }
+    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); }
+    .frame { width: 100%; max-width: 1200px; }
+    .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    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; }
+    svg { display: block; width: 100%; min-width: 1040px; }
+    .tier-title { fill: var(--ink); font: 600 13px var(--sans); text-anchor: middle; }
+    .bucket, .field-value, .example-value { fill: var(--muted); font: 400 9px var(--mono); }
+    .bucket { text-anchor: middle; }
+    .field-value { color: var(--muted); }
+    .focal-text { fill: var(--accent); }
+    .field-label { fill: var(--ink); font: 600 11px var(--sans); }
+    .example-label, .arc-label, .path-tag { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
+    .example-label { fill: var(--soft); font-size: 8px; }
+    .arc-label { font-size: 10px; text-anchor: middle; }
+    .path-title { fill: var(--ink); font: 600 11px var(--sans); }
+    .path-sub { fill: var(--muted); font: 400 9px var(--mono); }
+  </style>
+</head>
+<body>
+  <main class="frame">
+    <p class="eyebrow">Medallion · Diagram Design</p>
+    <h1>Five-tier e-commerce analytics storage</h1>
+    <svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-title medallion-desc">
+      <title id="medallion-title">Five-tier e-commerce analytics medallion</title>
+      <desc id="medallion-desc">Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving.</desc>
+      <defs>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
+        <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>
+        <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>
+        <clipPath id="clip-raw"><rect x="16" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-anon"><rect x="204" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-stage"><rect x="392" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-aggregate"><rect x="580" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-archive"><rect x="768" y="80" width="172" height="380" rx="6"/></clipPath>
+      </defs>
+      <rect width="1040" height="548" fill="#f5f5f5"/>
+      <!-- Promotion arcs are the medallion type's required connector grammar. -->
+      <path d="M102 80 C102 0 290 0 290 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M290 80 C290 0 478 0 478 80" fill="none" stroke="#4f5d75" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M478 80 C478 0 666 0 666 80" fill="none" stroke="#eb6c36" stroke-width="1.6" marker-end="url(#arrow-accent)"/>
+      <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)"/>
+      <text x="196" y="50" class="arc-label" fill="#4f5d75">MASK IDS</text>
+      <text x="384" y="50" class="arc-label" fill="#4f5d75">CLEAN + JOIN</text>
+      <text x="572" y="50" class="arc-label" fill="#eb6c36">AGGREGATE</text>
+      <text x="760" y="50" class="arc-label" fill="#4f5d75">LIFECYCLE</text>
+      <!-- Raw -->
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="16" y="80" width="172" height="50" fill="rgba(79,93,117,0.10)" clip-path="url(#clip-raw)"/>
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75"/>
+      <text x="102" y="106" class="tier-title">Raw</text>
+      <text x="102" y="144" class="bucket">raw-commerce</text>
+      <text x="32" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="32" y="220" class="field-label">Format</text>
+      <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>
+      <text x="32" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="32" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="32" y="374" class="example-value">clickstream events</text>
+      <text x="32" y="388" class="example-value">order records</text>
+      <!-- Anonymized -->
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="204" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-anon)"/>
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
+      <text x="290" y="106" class="tier-title">Anonymized</text>
+      <text x="290" y="144" class="bucket">anon-commerce</text>
+      <text x="220" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="220" y="220" class="field-label">Format</text>
+      <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>
+      <text x="220" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="220" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="220" y="374" class="example-value">session pseudonyms</text>
+      <text x="220" y="388" class="example-value">masked customer IDs</text>
+      <!-- Staging -->
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="#fff"/>
+      <rect x="392" y="80" width="172" height="50" fill="rgba(45,49,66,0.06)" clip-path="url(#clip-stage)"/>
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="none" stroke="#2d3142"/>
+      <text x="478" y="106" class="tier-title">Staging</text>
+      <text x="478" y="144" class="bucket">staging-commerce</text>
+      <text x="408" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="408" y="220" class="field-label">Format</text>
+      <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>
+      <text x="408" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="408" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="408" y="374" class="example-value">joined order facts</text>
+      <text x="408" y="388" class="example-value">validated event rows</text>
+      <!-- Aggregated focal tier -->
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="rgba(235,108,54,0.07)"/>
+      <rect x="580" y="80" width="172" height="50" fill="rgba(235,108,54,0.14)" clip-path="url(#clip-aggregate)"/>
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="none" stroke="#eb6c36" stroke-width="1.6"/>
+      <text x="666" y="106" class="tier-title">Aggregated</text>
+      <text x="666" y="144" class="bucket focal-text">analytics-marts</text>
+      <text x="596" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="596" y="220" class="field-label">Format</text>
+      <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>
+      <text x="596" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="596" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="596" y="374" class="example-value focal-text">daily conversion rate</text>
+      <text x="596" y="388" class="example-value focal-text">revenue by channel</text>
+      <!-- Archive -->
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="#ececec"/>
+      <rect x="768" y="80" width="172" height="50" fill="rgba(79,93,117,0.18)" clip-path="url(#clip-archive)"/>
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="none" stroke="#4f5d75" stroke-dasharray="5,3"/>
+      <text x="854" y="106" class="tier-title">Archive</text>
+      <text x="854" y="144" class="bucket">archive-commerce</text>
+      <text x="784" y="180" class="field-label">Tool</text>
+      <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>
+      <text x="784" y="220" class="field-label">Format</text>
+      <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>
+      <text x="784" y="260" class="field-label">Writer</text>
+      <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>
+      <text x="784" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="784" y="374" class="example-value">retained clickstream</text>
+      <text x="784" y="388" class="example-value">closed order snapshots</text>
+      <!-- Write-method paths -->
+      <rect x="16" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
+      <rect x="24" y="482" width="64" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
+      <text x="56" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">SQL PATH</text>
+      <text x="96" y="506" class="path-title">Trino INSERT INTO … SELECT</text>
+      <text x="96" y="522" class="path-sub">filter · join · aggregate — repeatable transforms</text>
+      <rect x="492" y="476" width="460" height="56" rx="6" fill="#fff" stroke="rgba(45,49,66,0.20)"/>
+      <rect x="500" y="482" width="96" height="12" rx="2" fill="none" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
+      <text x="548" y="491" class="path-tag" fill="#2d3142" font-size="7" text-anchor="middle">NOTEBOOK PATH</text>
+      <text x="604" y="506" class="path-title">Python notebooks on object storage</text>
+      <text x="604" y="522" class="path-sub">explore · validate · model — interactive analysis</text>
+    </svg>
+  </main>
+</body>
+</html>

package/framework/skills/diagram-design/assets/example-nested-dark.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The CLAUDE.md Hierarchy</title>
+  <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">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --color-paper:   #2d3142;
+      --color-ink:     #f5f5f5;
+      --color-muted:   #bfc0c0;
+      --color-accent:  #f08a59;
+      --font-sans:     'Geist', system-ui, sans-serif;
+      --font-serif:    'Instrument Serif', serif;
+      --font-mono:     'Geist Mono', ui-monospace, monospace;
+    }
+    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;
+    }
+    .frame { max-width: 1200px; width: 100%; }
+    .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;
+    }
+    h1 {
+      font-family: var(--font-serif);
+      font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
+      font-weight: 400;
+      letter-spacing: -0.02em;
+      line-height: 1.15;
+      color: var(--color-ink);
+      margin-bottom: 1.5rem;
+    }
+    svg { width: 100%; min-width: 900px; display: block; }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <p class="eyebrow">Nested · Diagram Design</p>
+    <h1>The CLAUDE.md Hierarchy</h1>
+    <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <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>
+        </defs>
+        <rect width="100%" height="100%" fill="#2d3142"/>
+        <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
+        <!-- Level 1: ~/.claude/ (global) — outermost -->
+        <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"/>
+        <!-- Level 2: ~/vault/ -->
+        <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"/>
+        <!-- Level 3: /business -->
+        <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"/>
+        <!-- Level 4: /marketing -->
+        <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(245,245,245,0.03)" stroke="#bfc0c0" stroke-width="1"/>
+        <!-- Level 5: /project — innermost, coral focal -->
+        <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(240,138,89,0.08)" stroke="#f08a59" stroke-width="1"/>
+        <!-- Level labels on paper-colored masks -->
+        <rect x="56" y="52" width="188" height="16" fill="#2d3142"/>
+        <text x="64" y="64" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/.claude/ (global)</text>
+        <rect x="88" y="88" width="148" height="16" fill="#2d3142"/>
+        <text x="96" y="100" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">~/vault/ (notes)</text>
+        <rect x="120" y="124" width="96" height="16" fill="#2d3142"/>
+        <text x="128" y="136" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
+        <rect x="152" y="160" width="108" height="16" fill="#2d3142"/>
+        <text x="160" y="172" fill="#f5f5f5" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
+        <rect x="184" y="196" width="88" height="16" fill="#2d3142"/>
+        <text x="192" y="208" fill="#f08a59" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em" font-weight="600">/project</text>
+        <!-- File-icon glyphs (simple rect with folded corner) inside each level -->
+        <g transform="translate(908, 408)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.35)" stroke-width="1"/>
+        </g>
+        <g transform="translate(876, 372)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.40)" stroke-width="1"/>
+        </g>
+        <g transform="translate(844, 336)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(245,245,245,0.50)" stroke-width="1"/>
+        </g>
+        <g transform="translate(812, 300)">
+          <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#2d3142" stroke="#bfc0c0" stroke-width="1"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+        </g>
+        <!-- Innermost label — human readable -->
+        <text x="500" y="248" fill="#f5f5f5" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
+        <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>
+        <!-- Annotation top-right: italic callout with curved arrow -->
+        <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>
+        <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"/>
+        <circle cx="520" cy="216" r="2" fill="#f5f5f5"/>
+        <!-- Annotation bottom-left: italic callout -->
+        <text x="40" y="484" fill="#bfc0c0" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
+      </svg>
+  </div>
+</body>
+</html>