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-nested-full.html ADDED Viewed

@@ -0,0 +1,133 @@
+<!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:#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; }
+    body { font-family: var(--font-sans); background: var(--color-paper); min-height: 100vh; padding: 3rem 2rem; color: var(--color-ink); }
+    .container { max-width: 1200px; margin: 0 auto; }
+    .header { margin-bottom: 2.5rem; }
+    .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; }
+    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; }
+    .subtitle { font-size: 1rem; line-height: 1.55; color: var(--color-muted); max-width: 58ch; }
+    .diagram-container { background: var(--color-paper-2); border-radius: 8px; border: 1px solid var(--color-rule); padding: 1.5rem; overflow-x: auto; }
+    svg { width: 100%; min-width: 900px; display: block; }
+    .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
+    @media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
+    .card { background: #fff; border-radius: 6px; border: 1px solid var(--color-rule); padding: 1.25rem; }
+    .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; }
+    .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); }
+    .card-dot { width: 7px; height: 7px; border-radius: 50%; }
+    .card-dot.ink { background: var(--color-ink); } .card-dot.muted { background: var(--color-muted); } .card-dot.coral { background: var(--color-accent); }
+    .card h3 { font-size: 0.875rem; font-weight: 600; }
+    .card p, .card ul { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; list-style: none; }
+    .card li { margin-bottom: 0.3rem; padding-left: 0.875rem; position: relative; }
+    .card li::before { content: '—'; position: absolute; left: 0; color: rgba(45,49,66,0.25); font-size: 0.75rem; }
+    .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; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <p class="header-eyebrow">Nested · Diagram Design</p>
+      <h1>The CLAUDE.md Hierarchy</h1>
+      <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>
+    </div>
+    <div class="diagram-container">
+      <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(45,49,66,0.10)"/>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="#f5f5f5"/>
+        <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(45,49,66,0.015)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
+        <!-- Level 2: ~/vault/ -->
+        <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"/>
+        <!-- Level 3: /business -->
+        <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"/>
+        <!-- Level 4: /marketing -->
+        <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(45,49,66,0.03)" stroke="#4f5d75" stroke-width="1"/>
+        <!-- Level 5: /project — innermost, coral focal -->
+        <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1"/>
+        <!-- Level labels on paper-2-colored masks (match diagram-container bg) -->
+        <rect x="56" y="52" width="188" height="16" fill="#ececec"/>
+        <text x="64" y="64" fill="#4f5d75" 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="#ececec"/>
+        <text x="96" y="100" fill="#4f5d75" 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="#ececec"/>
+        <text x="128" y="136" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
+        <rect x="152" y="160" width="108" height="16" fill="#ececec"/>
+        <text x="160" y="172" fill="#2d3142" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
+        <rect x="184" y="196" width="88" height="16" fill="#ececec"/>
+        <text x="192" y="208" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em" font-weight="600">/project</text>
+        <!-- File-icon glyphs inside each level -->
+        <g transform="translate(908, 408)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,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="#ececec" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,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="#ececec" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,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="#ececec" stroke="#4f5d75" stroke-width="1"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="#4f5d75" stroke-width="1"/>
+        </g>
+        <!-- Innermost label — human readable -->
+        <text x="500" y="248" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
+        <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>
+        <!-- Annotation top-right: italic callout with curved arrow -->
+        <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>
+        <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"/>
+        <circle cx="520" cy="216" r="2" fill="#2d3142"/>
+        <!-- Annotation bottom-left: italic callout -->
+        <text x="40" y="484" fill="#4f5d75" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
+      </svg>
+    </div>
+    <div class="cards">
+      <div class="card">
+        <p class="eyebrow">THE HEADLINE</p>
+        <div class="card-header"><span class="card-dot coral"></span><h3>Containment is the config</h3></div>
+        <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>
+      </div>
+      <div class="card">
+        <div class="card-header"><span class="card-dot ink"></span><h3>Reads outside-in</h3></div>
+        <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>
+      </div>
+      <div class="card">
+        <div class="card-header"><span class="card-dot muted"></span><h3>Five levels is the ceiling</h3></div>
+        <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>
+      </div>
+    </div>
+    <div class="footer">
+      <span>the claude.md hierarchy · nested containment</span>
+      <span>example · schematic skill</span>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,134 @@
+<!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:   #f5f5f5;
+      --color-ink:     #2d3142;
+      --color-muted:   #4f5d75;
+      --color-accent:  #eb6c36;
+      --font-sans:     'Geist', system-ui, sans-serif;
+      --font-serif:    'Instrument Serif', serif;
+      --font-mono:     'Geist Mono', ui-monospace, monospace;
+    }
+    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(45,49,66,0.10)"/>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="#f5f5f5"/>
+        <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(45,49,66,0.015)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
+        <!-- Level 2: ~/vault/ -->
+        <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"/>
+        <!-- Level 3: /business -->
+        <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"/>
+        <!-- Level 4: /marketing -->
+        <rect x="136" y="168" width="728" height="164" rx="8" fill="rgba(45,49,66,0.03)" stroke="#4f5d75" stroke-width="1"/>
+        <!-- Level 5: /project — innermost, coral focal -->
+        <rect x="168" y="204" width="664" height="92" rx="8" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1"/>
+        <!-- Level labels on paper-colored masks -->
+        <rect x="56" y="52" width="188" height="16" fill="#f5f5f5"/>
+        <text x="64" y="64" fill="#4f5d75" 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="#f5f5f5"/>
+        <text x="96" y="100" fill="#4f5d75" 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="#f5f5f5"/>
+        <text x="128" y="136" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/business</text>
+        <rect x="152" y="160" width="108" height="16" fill="#f5f5f5"/>
+        <text x="160" y="172" fill="#2d3142" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">/marketing</text>
+        <rect x="184" y="196" width="88" height="16" fill="#f5f5f5"/>
+        <text x="192" y="208" fill="#eb6c36" 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 -->
+        <!-- Glyph in level 1 (bottom-right area of outer ring) -->
+        <g transform="translate(908, 408)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.35)" stroke-width="1"/>
+        </g>
+        <!-- Glyph in level 2 ring -->
+        <g transform="translate(876, 372)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.40)" stroke-width="1"/>
+        </g>
+        <!-- Glyph in level 3 ring -->
+        <g transform="translate(844, 336)">
+          <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"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="rgba(45,49,66,0.50)" stroke-width="1"/>
+        </g>
+        <!-- Glyph in level 4 ring -->
+        <g transform="translate(812, 300)">
+          <path d="M0 0 L16 0 L20 4 L20 20 L0 20 Z" fill="#f5f5f5" stroke="#4f5d75" stroke-width="1"/>
+          <path d="M16 0 L16 4 L20 4" fill="none" stroke="#4f5d75" stroke-width="1"/>
+        </g>
+        <!-- Innermost label — human readable -->
+        <text x="500" y="248" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CLAUDE.md</text>
+        <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>
+        <!-- Annotation top-right: italic callout with curved arrow -->
+        <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>
+        <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"/>
+        <circle cx="520" cy="216" r="2" fill="#2d3142"/>
+        <!-- Annotation bottom-left: italic callout -->
+        <text x="40" y="484" fill="#4f5d75" font-size="14" font-style="italic" font-family="'Instrument Serif', serif">structure IS the index</text>
+      </svg>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</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{--paper:#2d3142;--paper-2:#393e53;--ink:#f5f5f5;--muted:#bfc0c0;--soft:#8e98ac;--rule:rgba(245,245,245,.12);--accent:#f08a59;--accent-tint:rgba(240,138,89,.10);--link:#6a95d8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
+body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
+</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
+<rect width="1040" height="620" fill="#2d3142"/>
+<defs><marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#bfc0c0"/></marker></defs>
+<text x="40" y="64" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
+<text x="40" y="196" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
+<text x="40" y="348" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
+<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(245,245,245,.14)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(245,245,245,.14)"/>
+<!-- connectors -->
+<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
+<!-- root -->
+<rect x="420" y="72" width="200" height="48" rx="6" fill="#2d3142"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(240,138,89,.10)" stroke="#f08a59"/>
+<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#f08a59" opacity=".55"/><text x="452" y="89" fill="#f08a59" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
+<text x="520" y="104" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
+<!-- tier1 nodes -->
+<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="144" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
+<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="356" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
+<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="572" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
+<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="784" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
+<!-- specialists -->
+<rect x="40" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="108" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
+<rect x="200" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="268" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
+<rect x="360" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="428" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
+<rect x="520" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="588" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
+<rect x="680" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="748" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
+<rect x="840" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="908" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
+<!-- optional gaps -->
+<rect x="72" y="480" width="896" height="48" rx="6" fill="#2d3142"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(245,245,245,.04)" stroke="#8e98ac" stroke-dasharray="4,4"/>
+<text x="96" y="508" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
+<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(245,245,245,.14)"/><text x="40" y="584" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(240,138,89,.10)" stroke="#f08a59"/><text x="156" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#393e53" stroke="#f5f5f5"/><text x="312" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(245,245,245,.04)" stroke="#8e98ac" stroke-dasharray="4,4"/><text x="476" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
+</svg></div></body></html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</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{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
+body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
+</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
+<rect width="1040" height="620" fill="#f5f5f5"/>
+<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></defs>
+<text x="40" y="64" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
+<text x="40" y="196" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
+<text x="40" y="348" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
+<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(45,49,66,.12)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(45,49,66,.12)"/>
+<!-- connectors -->
+<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<!-- root -->
+<rect x="420" y="72" width="200" height="48" rx="6" fill="#f5f5f5"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/>
+<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#eb6c36" opacity=".55"/><text x="452" y="89" fill="#eb6c36" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
+<text x="520" y="104" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
+<!-- tier1 nodes -->
+<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="144" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
+<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="356" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
+<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="572" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
+<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="784" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
+<!-- specialists -->
+<rect x="40" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="108" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
+<rect x="200" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="268" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
+<rect x="360" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="428" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
+<rect x="520" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="588" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
+<rect x="680" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="748" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
+<rect x="840" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="908" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
+<!-- optional gaps -->
+<rect x="72" y="480" width="896" height="48" rx="6" fill="#f5f5f5"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/>
+<text x="96" y="508" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
+<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(45,49,66,.12)"/><text x="40" y="584" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/><text x="156" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="312" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/><text x="476" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
+</svg><div class="cards"><article class="card"><h2>Use when</h2><p>The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.</p></article><article class="card"><h2>Keep nodes short</h2><p>Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.</p></article><article class="card"><h2>Show gaps</h2><p>Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.</p></article></div></div></body></html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</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{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
+body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
+</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
+<rect width="1040" height="620" fill="#f5f5f5"/>
+<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></defs>
+<text x="40" y="64" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
+<text x="40" y="196" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
+<text x="40" y="348" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
+<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(45,49,66,.12)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(45,49,66,.12)"/>
+<!-- connectors -->
+<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
+<!-- root -->
+<rect x="420" y="72" width="200" height="48" rx="6" fill="#f5f5f5"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/>
+<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#eb6c36" opacity=".55"/><text x="452" y="89" fill="#eb6c36" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
+<text x="520" y="104" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
+<!-- tier1 nodes -->
+<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="144" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
+<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="356" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
+<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="572" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
+<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="784" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
+<!-- specialists -->
+<rect x="40" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="108" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
+<rect x="200" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="268" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
+<rect x="360" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="428" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
+<rect x="520" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="588" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
+<rect x="680" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="748" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
+<rect x="840" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="908" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
+<!-- optional gaps -->
+<rect x="72" y="480" width="896" height="48" rx="6" fill="#f5f5f5"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/>
+<text x="96" y="508" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
+<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(45,49,66,.12)"/><text x="40" y="584" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/><text x="156" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="312" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/><text x="476" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
+</svg></div></body></html>