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-line-dark.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weekly signups · Line chart · dark</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; margin-bottom: 1.5rem; }
+    svg { width: 100%; min-width: 760px; display: block; }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <p class="eyebrow">Line · Diagram Design</p>
+    <h1>Weekly signups · Organic leads the growth</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="#f5f5f5"/>
+      <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
+      <!-- Y-axis rotated label -->
+      <text transform="rotate(-90 24 230)" x="24" y="230" fill="#bfc0c0" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">SIGNUPS / WEEK</text>
+      <!-- Gridlines -->
+      <line x1="80" y1="357" x2="960" y2="357" stroke="rgba(245,245,245,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="293" x2="960" y2="293" stroke="rgba(245,245,245,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="230" x2="960" y2="230" stroke="rgba(245,245,245,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="167" x2="960" y2="167" stroke="rgba(245,245,245,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="103" x2="960" y2="103" stroke="rgba(245,245,245,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="40"  x2="960" y2="40"  stroke="rgba(245,245,245,0.06)" stroke-width="0.8"/>
+      <!-- Axes -->
+      <line x1="80" y1="40" x2="80" y2="420" stroke="rgba(245,245,245,0.20)" stroke-width="1"/>
+      <line x1="80" y1="420" x2="960" y2="420" stroke="rgba(245,245,245,0.20)" stroke-width="1"/>
+      <!-- Y-axis labels -->
+      <text x="72" y="361" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">40</text>
+      <text x="72" y="297" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">80</text>
+      <text x="72" y="234" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">120</text>
+      <text x="72" y="171" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">160</text>
+      <text x="72" y="107" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">200</text>
+      <text x="72" y="44"  fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">240</text>
+      <!-- ─── SERIES (non-focal drawn first) ─── -->
+      <!-- Referral: [45,52,48,60,55,68,62,75] series-2 dusty-blue -->
+      <polyline points="80,349 200,338 320,344 440,325 560,333 680,312 800,322 920,301"
+                fill="none" stroke="#82a0c0" stroke-width="1.2" stroke-linejoin="round"/>
+      <!-- Direct: [80,82,88,90,86,92,95,98] series-1 sage -->
+      <polyline points="80,293 200,290 320,281 440,278 560,284 680,274 800,270 920,265"
+                fill="none" stroke="#9caf8f" stroke-width="1.2" stroke-linejoin="round"/>
+      <!-- Organic FOCAL area fill (subtle) -->
+      <polygon points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88 920,420 80,420"
+               fill="rgba(240,138,89,0.08)"/>
+      <!-- Organic FOCAL line: [120,135,148,162,155,178,195,210] accent -->
+      <polyline points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88"
+                fill="none" stroke="#f08a59" stroke-width="1.8" stroke-linejoin="round"/>
+      <!-- Focal vertex dots -->
+      <circle cx="80"  cy="230" r="4" fill="#f08a59"/>
+      <circle cx="200" cy="206" r="4" fill="#f08a59"/>
+      <circle cx="320" cy="186" r="4" fill="#f08a59"/>
+      <circle cx="440" cy="164" r="4" fill="#f08a59"/>
+      <circle cx="560" cy="175" r="4" fill="#f08a59"/>
+      <circle cx="680" cy="138" r="4" fill="#f08a59"/>
+      <circle cx="800" cy="111" r="4" fill="#f08a59"/>
+      <circle cx="920" cy="88"  r="4" fill="#f08a59"/>
+      <!-- X-axis labels -->
+      <text x="80"  y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W1</text>
+      <text x="200" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W2</text>
+      <text x="320" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W3</text>
+      <text x="440" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W4</text>
+      <text x="560" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W5</text>
+      <text x="680" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W6</text>
+      <text x="800" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W7</text>
+      <text x="920" y="440" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W8</text>
+      <!-- Legend -->
+      <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(245,245,245,0.10)" stroke-width="0.8"/>
+      <text x="40" y="478" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
+      <line x1="40" y1="492" x2="64" y2="492" stroke="#f08a59" stroke-width="1.8"/>
+      <circle cx="52" cy="492" r="4" fill="#f08a59"/>
+      <text x="72" y="496" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Organic · focal</text>
+      <line x1="200" y1="492" x2="224" y2="492" stroke="#9caf8f" stroke-width="1.2"/>
+      <text x="232" y="496" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Direct</text>
+      <line x1="316" y1="492" x2="340" y2="492" stroke="#82a0c0" stroke-width="1.2"/>
+      <text x="348" y="496" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Referral</text>
+    </svg>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weekly signups · Line chart</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; --series-1:#7c8f6f; --series-2:#5e7a9b; --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: 760px; display: block; }
+    .cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
+    @media (max-width: 720px) { .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.coral { background: var(--color-accent); } .card-dot.sage { background: var(--series-1); } .card-dot.dusty { background: var(--series-2); }
+    .card h3 { font-size: 0.875rem; font-weight: 600; }
+    .card p { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; }
+    .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">Line · Diagram Design</p>
+      <h1>Weekly signups · Organic leads the growth</h1>
+      <p class="subtitle">Signup volume by acquisition channel over eight weeks. Organic search is both the largest and fastest-growing channel; Direct is the stable baseline.</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"/>
+        <text transform="rotate(-90 24 230)" x="24" y="230" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">SIGNUPS / WEEK</text>
+        <line x1="80" y1="357" x2="960" y2="357" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+        <line x1="80" y1="293" x2="960" y2="293" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+        <line x1="80" y1="230" x2="960" y2="230" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+        <line x1="80" y1="167" x2="960" y2="167" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+        <line x1="80" y1="103" x2="960" y2="103" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+        <line x1="80" y1="40"  x2="960" y2="40"  stroke="rgba(45,49,66,0.06)" stroke-width="0.8"/>
+        <line x1="80" y1="40" x2="80" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
+        <line x1="80" y1="420" x2="960" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
+        <text x="72" y="361" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">40</text>
+        <text x="72" y="297" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">80</text>
+        <text x="72" y="234" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">120</text>
+        <text x="72" y="171" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">160</text>
+        <text x="72" y="107" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">200</text>
+        <text x="72" y="44"  fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">240</text>
+        <polyline points="80,349 200,338 320,344 440,325 560,333 680,312 800,322 920,301" fill="none" stroke="#5e7a9b" stroke-width="1.2" stroke-linejoin="round"/>
+        <polyline points="80,293 200,290 320,281 440,278 560,284 680,274 800,270 920,265" fill="none" stroke="#7c8f6f" stroke-width="1.2" stroke-linejoin="round"/>
+        <polygon points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88 920,420 80,420" fill="rgba(235,108,54,0.06)"/>
+        <polyline points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88" fill="none" stroke="#eb6c36" stroke-width="1.8" stroke-linejoin="round"/>
+        <circle cx="80" cy="230" r="4" fill="#eb6c36"/><circle cx="200" cy="206" r="4" fill="#eb6c36"/><circle cx="320" cy="186" r="4" fill="#eb6c36"/><circle cx="440" cy="164" r="4" fill="#eb6c36"/>
+        <circle cx="560" cy="175" r="4" fill="#eb6c36"/><circle cx="680" cy="138" r="4" fill="#eb6c36"/><circle cx="800" cy="111" r="4" fill="#eb6c36"/><circle cx="920" cy="88" r="4" fill="#eb6c36"/>
+        <text x="80" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W1</text>
+        <text x="200" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W2</text>
+        <text x="320" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W3</text>
+        <text x="440" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W4</text>
+        <text x="560" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W5</text>
+        <text x="680" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W6</text>
+        <text x="800" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W7</text>
+        <text x="920" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W8</text>
+        <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
+        <text x="40" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
+        <line x1="40" y1="492" x2="64" y2="492" stroke="#eb6c36" stroke-width="1.8"/><circle cx="52" cy="492" r="4" fill="#eb6c36"/>
+        <text x="72" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Organic · focal</text>
+        <line x1="200" y1="492" x2="224" y2="492" stroke="#7c8f6f" stroke-width="1.2"/>
+        <text x="232" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Direct</text>
+        <line x1="316" y1="492" x2="340" y2="492" stroke="#5e7a9b" stroke-width="1.2"/>
+        <text x="348" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Referral</text>
+      </svg>
+    </div>
+    <div class="cards">
+      <div class="card">
+        <p class="eyebrow">FOCAL · ORGANIC</p>
+        <div class="card-header"><span class="card-dot coral"></span><h3>Organic search driving 55% of new signups</h3></div>
+        <p>75% week-over-week growth over 8 weeks — from 120 to 210 signups. Two long-form guides published in W4 account for the step change. The W5 dip is a weekday holiday effect.</p>
+      </div>
+      <div class="card">
+        <div class="card-header"><span class="card-dot sage"></span><h3>Direct: stable core</h3></div>
+        <p>22% growth (80→98) — this is mostly returning users and brand-aware discovery. The near-flat slope is a healthy baseline, not stagnation. It means the product retains its direct audience while organic expands.</p>
+      </div>
+      <div class="card">
+        <div class="card-header"><span class="card-dot dusty"></span><h3>Referral: early signal</h3></div>
+        <p>67% growth (45→75), driven by one integration partner. Volatile week-to-week but directionally positive. Worth a dedicated channel review before investing further in partner programmes.</p>
+      </div>
+    </div>
+    <div class="footer">
+      <span>weekly signups · acquisition channels</span>
+      <span>example · diagram design</span>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weekly signups · Line chart</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; margin-bottom: 1.5rem; }
+    svg { width: 100%; min-width: 760px; display: block; }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <p class="eyebrow">Line · Diagram Design</p>
+    <h1>Weekly signups · Organic leads the growth</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"/>
+      <!-- Y-axis rotated label -->
+      <text transform="rotate(-90 24 230)" x="24" y="230" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">SIGNUPS / WEEK</text>
+      <!-- Gridlines -->
+      <line x1="80" y1="357" x2="960" y2="357" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="293" x2="960" y2="293" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="230" x2="960" y2="230" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="167" x2="960" y2="167" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="103" x2="960" y2="103" stroke="rgba(45,49,66,0.08)" stroke-width="0.8"/>
+      <line x1="80" y1="40"  x2="960" y2="40"  stroke="rgba(45,49,66,0.06)" stroke-width="0.8"/>
+      <!-- Axes -->
+      <line x1="80" y1="40" x2="80" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
+      <line x1="80" y1="420" x2="960" y2="420" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
+      <!-- Y-axis labels -->
+      <text x="72" y="361" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">40</text>
+      <text x="72" y="297" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">80</text>
+      <text x="72" y="234" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">120</text>
+      <text x="72" y="171" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">160</text>
+      <text x="72" y="107" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">200</text>
+      <text x="72" y="44"  fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="end">240</text>
+      <!-- ─── SERIES (non-focal drawn first) ─── -->
+      <!-- Referral: [45,52,48,60,55,68,62,75] series-2 dusty-blue -->
+      <polyline points="80,349 200,338 320,344 440,325 560,333 680,312 800,322 920,301"
+                fill="none" stroke="#5e7a9b" stroke-width="1.2" stroke-linejoin="round"/>
+      <!-- Direct: [80,82,88,90,86,92,95,98] series-1 sage -->
+      <polyline points="80,293 200,290 320,281 440,278 560,284 680,274 800,270 920,265"
+                fill="none" stroke="#7c8f6f" stroke-width="1.2" stroke-linejoin="round"/>
+      <!-- Organic FOCAL area fill (subtle) -->
+      <polygon points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88 920,420 80,420"
+               fill="rgba(235,108,54,0.06)"/>
+      <!-- Organic FOCAL line: [120,135,148,162,155,178,195,210] accent -->
+      <polyline points="80,230 200,206 320,186 440,164 560,175 680,138 800,111 920,88"
+                fill="none" stroke="#eb6c36" stroke-width="1.8" stroke-linejoin="round"/>
+      <!-- Focal vertex dots -->
+      <circle cx="80"  cy="230" r="4" fill="#eb6c36"/>
+      <circle cx="200" cy="206" r="4" fill="#eb6c36"/>
+      <circle cx="320" cy="186" r="4" fill="#eb6c36"/>
+      <circle cx="440" cy="164" r="4" fill="#eb6c36"/>
+      <circle cx="560" cy="175" r="4" fill="#eb6c36"/>
+      <circle cx="680" cy="138" r="4" fill="#eb6c36"/>
+      <circle cx="800" cy="111" r="4" fill="#eb6c36"/>
+      <circle cx="920" cy="88"  r="4" fill="#eb6c36"/>
+      <!-- X-axis labels -->
+      <text x="80"  y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W1</text>
+      <text x="200" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W2</text>
+      <text x="320" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W3</text>
+      <text x="440" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W4</text>
+      <text x="560" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W5</text>
+      <text x="680" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W6</text>
+      <text x="800" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W7</text>
+      <text x="920" y="440" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">W8</text>
+      <!-- Legend -->
+      <line x1="40" y1="462" x2="960" y2="462" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
+      <text x="40" y="478" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
+      <line x1="40" y1="492" x2="64" y2="492" stroke="#eb6c36" stroke-width="1.8"/>
+      <circle cx="52" cy="492" r="4" fill="#eb6c36"/>
+      <text x="72" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Organic · focal</text>
+      <line x1="200" y1="492" x2="224" y2="492" stroke="#7c8f6f" stroke-width="1.2"/>
+      <text x="232" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Direct</text>
+      <line x1="316" y1="492" x2="340" y2="492" stroke="#5e7a9b" stroke-width="1.2"/>
+      <text x="348" y="496" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Referral</text>
+    </svg>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>The self-improving loop · Dark</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: #2d3142; --ink: #f5f5f5; --muted: #bfc0c0; --soft: #8e98ac;
+      --accent: #f08a59; --accent-tint: rgba(240,138,89,0.10); --link: #6a95d8;
+      --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: 900px; }
+    .ring { fill: none; stroke: var(--muted); stroke-width: 1.2; }
+    .spoke { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 5 4; }
+    .station { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
+    .station.focal { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
+    .hub { fill: var(--ink); }
+    .node-name { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
+    .focal-name { fill: var(--accent); }
+    .sublabel { fill: var(--soft); font: 400 8px var(--mono); text-anchor: middle; }
+    .hub-name { fill: var(--paper); font: 600 16px var(--sans); text-anchor: middle; }
+    .hub-sub { fill: var(--paper); opacity: 0.72; font: 400 8px var(--mono); text-anchor: middle; }
+    .arrow-label { fill: var(--soft); font: 400 8px var(--mono); letter-spacing: 0.06em; text-anchor: middle; }
+  </style>
+</head>
+<body>
+  <main class="frame">
+    <p class="eyebrow">Loop · Diagram Design</p>
+    <h1>The self-improving loop</h1>
+    <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-title loop-desc">
+      <title id="loop-title">The self-improving loop</title>
+      <desc id="loop-desc">Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate.</desc>
+      <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>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#f08a59"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/></marker>
+        <marker id="arrow-soft" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#8e98ac"/></marker>
+      </defs>
+      <rect width="1040" height="680" fill="#2d3142"/>
+      <rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
+      <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
+      <path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
+      <path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
+      <path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
+      <path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
+      <path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
+      <path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
+      <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
+      <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M672 252 L616 284" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M672 428 L616 396" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M368 428 L424 396" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M368 252 L424 284" marker-end="url(#arrow-soft)"/>
+      <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
+      <rect x="532" y="200" width="48" height="16" rx="4" fill="#2d3142"/>
+      <text x="556" y="212" class="arrow-label">SIGNALS</text>
+      <rect x="460" y="464" width="52" height="16" rx="4" fill="#2d3142"/>
+      <text x="486" y="476" class="arrow-label">OUTCOMES</text>
+      <!-- Stations -->
+      <rect class="station" x="440" y="68" width="160" height="64" rx="6"/>
+      <text x="520" y="96" class="node-name">Capture</text><text x="520" y="116" class="sublabel">signals in / intake</text>
+      <rect class="station" x="648" y="188" width="160" height="64" rx="6"/>
+      <text x="728" y="216" class="node-name">Research</text><text x="728" y="236" class="sublabel">evidence pulled</text>
+      <rect class="station focal" x="648" y="428" width="160" height="64" rx="6"/>
+      <text x="728" y="456" class="node-name focal-name">Decide</text><text x="728" y="476" class="sublabel">human approves</text>
+      <rect class="station" x="440" y="548" width="160" height="64" rx="6"/>
+      <text x="520" y="576" class="node-name">Act</text><text x="520" y="596" class="sublabel">work ships</text>
+      <rect class="station" x="232" y="428" width="160" height="64" rx="6"/>
+      <text x="312" y="456" class="node-name">Measure</text><text x="312" y="476" class="sublabel">outcomes logged</text>
+      <rect class="station" x="232" y="188" width="160" height="64" rx="6"/>
+      <text x="312" y="216" class="node-name">Learn</text><text x="312" y="236" class="sublabel">playbook updated</text>
+      <!-- The one shared-state hub. -->
+      <rect class="hub" x="420" y="288" width="200" height="104" rx="8"/>
+      <text x="520" y="336" class="hub-name">Shared memory</text>
+      <text x="520" y="360" class="hub-sub">one record, every loop</text>
+    </svg>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>The self-improving loop · 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; }
+    .header { margin-bottom: 2.5rem; }
+    .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    h1 { margin-bottom: 0.5rem; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw + 0.75rem, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; }
+    .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; }
+    svg { display: block; width: 100%; min-width: 1040px; }
+    .ring { fill: none; stroke: var(--muted); stroke-width: 1.2; }
+    .spoke { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 5 4; }
+    .station { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
+    .station.focal { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
+    .hub { fill: var(--ink); }
+    .node-name { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
+    .focal-name { fill: var(--accent); }
+    .sublabel { fill: var(--soft); font: 400 8px var(--mono); text-anchor: middle; }
+    .hub-name { fill: var(--paper); font: 600 16px var(--sans); text-anchor: middle; }
+    .hub-sub { fill: var(--paper); opacity: 0.72; font: 400 8px var(--mono); text-anchor: middle; }
+    .arrow-label { fill: var(--soft); font: 400 8px var(--mono); letter-spacing: 0.06em; text-anchor: middle; }
+    .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-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; 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; flex: 0 0 auto; 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">Loop · Diagram Design</p>
+      <h1>The self-improving loop</h1>
+      <p class="subtitle">A company operating rhythm where work moves clockwise, every pass writes back to one shared record, and a human stays accountable for the decision.</p>
+    </header>
+    <div class="diagram-container">
+      <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-title loop-desc">
+        <title id="loop-title">The self-improving loop</title>
+        <desc id="loop-desc">Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate.</desc>
+        <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>
+          <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>
+          <marker id="arrow-soft" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#7a8399"/></marker>
+        </defs>
+        <rect width="1040" height="680" fill="#f5f5f5"/>
+        <rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
+        <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
+        <path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
+        <path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
+        <path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
+        <path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
+        <path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
+        <path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
+        <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
+        <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
+        <path class="spoke" d="M672 252 L616 284" marker-end="url(#arrow-soft)"/>
+        <path class="spoke" d="M672 428 L616 396" marker-end="url(#arrow-soft)"/>
+        <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)"/>
+        <path class="spoke" d="M368 428 L424 396" marker-end="url(#arrow-soft)"/>
+        <path class="spoke" d="M368 252 L424 284" marker-end="url(#arrow-soft)"/>
+        <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
+        <rect x="532" y="200" width="48" height="16" rx="4" fill="#f5f5f5"/>
+        <text x="556" y="212" class="arrow-label">SIGNALS</text>
+        <rect x="460" y="464" width="52" height="16" rx="4" fill="#f5f5f5"/>
+        <text x="486" y="476" class="arrow-label">OUTCOMES</text>
+        <!-- Stations -->
+        <rect class="station" x="440" y="68" width="160" height="64" rx="6"/>
+        <text x="520" y="96" class="node-name">Capture</text><text x="520" y="116" class="sublabel">signals in / intake</text>
+        <rect class="station" x="648" y="188" width="160" height="64" rx="6"/>
+        <text x="728" y="216" class="node-name">Research</text><text x="728" y="236" class="sublabel">evidence pulled</text>
+        <rect class="station focal" x="648" y="428" width="160" height="64" rx="6"/>
+        <text x="728" y="456" class="node-name focal-name">Decide</text><text x="728" y="476" class="sublabel">human approves</text>
+        <rect class="station" x="440" y="548" width="160" height="64" rx="6"/>
+        <text x="520" y="576" class="node-name">Act</text><text x="520" y="596" class="sublabel">work ships</text>
+        <rect class="station" x="232" y="428" width="160" height="64" rx="6"/>
+        <text x="312" y="456" class="node-name">Measure</text><text x="312" y="476" class="sublabel">outcomes logged</text>
+        <rect class="station" x="232" y="188" width="160" height="64" rx="6"/>
+        <text x="312" y="216" class="node-name">Learn</text><text x="312" y="236" class="sublabel">playbook updated</text>
+        <!-- The one shared-state hub. -->
+        <rect class="hub" x="420" y="288" width="200" height="104" rx="8"/>
+        <text x="520" y="336" class="hub-name">Shared memory</text>
+        <text x="520" y="360" class="hub-sub">one record, every loop</text>
+      </svg>
+    </div>
+    <section class="cards" aria-label="Loop summary">
+      <article class="card">
+        <p class="card-eyebrow">THE LOOP SIGNAL</p>
+        <div class="card-header"><span class="card-dot coral"></span><h2>The dashed lines are the product</h2></div>
+        <p>Shipping work matters once. Writing the result back makes the next pass faster, safer, and better informed.</p>
+      </article>
+      <article class="card">
+        <div class="card-header"><span class="card-dot ink"></span><h2>Memory compounds</h2></div>
+        <ul><li>Evidence survives the handoff</li><li>Outcomes update the playbook</li><li>One record stays shared</li></ul>
+      </article>
+      <article class="card">
+        <div class="card-header"><span class="card-dot muted"></span><h2>One human gate</h2></div>
+        <p>Decide is the only focal station because accountability should remain visible inside an improving system.</p>
+      </article>
+    </section>
+    <footer class="footer">
+      <span>company operations · reinforcing loop</span>
+      <span>example · schematic skill</span>
+    </footer>
+  </main>
+</body>
+</html>