npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/eng-runbook/example.html ADDED Viewed

@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Auth Service · Runbook</title>
+<style>
+  :root {
+    --bg: #0c0e14;
+    --paper: #14171f;
+    --paper-2: #1c2030;
+    --ink: #eaecf3;
+    --muted: #8b94ad;
+    --line: #262b3b;
+    --accent: #6ee7b7;
+    --accent-soft: rgba(110,231,183,0.1);
+    --warn: #fbbf24;
+    --danger: #f87171;
+    --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
+    --mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.6; }
+  .page { max-width: 1100px; margin: 0 auto; padding: 32px 28px 64px; }
+  /* Header */
+  .head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
+  .head-left { display: flex; flex-direction: column; gap: 6px; }
+  .crumb { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+  h1 { font-family: var(--display); font-size: 36px; margin: 4px 0; font-weight: 700; letter-spacing: -0.02em; }
+  .head-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
+  .head-meta span { color: var(--accent); }
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
+    font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
+  }
+  .pill.tier { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(110,231,183,0.3); }
+  .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+  section { margin-top: 40px; }
+  h2 { font-family: var(--display); font-size: 22px; margin: 0 0 14px; letter-spacing: -0.005em; font-weight: 700; }
+  h2 .index { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-right: 12px; vertical-align: middle; }
+  /* Summary */
+  .summary { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
+  .panel { padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+  .panel p { margin: 0 0 12px; }
+  .panel p:last-child { margin: 0; }
+  .deps h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 500; }
+  .deps ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
+  .deps li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--paper-2); border-radius: 6px; }
+  .deps li .ok { color: var(--accent); }
+  .deps li .warn { color: var(--warn); }
+  /* Tables */
+  table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+  th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
+  th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--paper-2); }
+  tr:last-child td { border-bottom: none; }
+  td.code, .panel code { font-family: var(--mono); }
+  .sev { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
+  .sev-1 { background: rgba(248,113,113,0.15); color: var(--danger); }
+  .sev-2 { background: rgba(251,191,36,0.15); color: var(--warn); }
+  .sev-3 { background: rgba(110,231,183,0.15); color: var(--accent); }
+  /* Procedure cards */
+  .procs { display: flex; flex-direction: column; gap: 14px; }
+  .proc { padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+  .proc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+  .proc-head h3 { margin: 0; font-family: var(--display); font-size: 17px; }
+  .proc-head .when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+  pre { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #cdd6f4; margin: 8px 0 0; }
+  pre .cmt { color: var(--muted); }
+  pre .var { color: var(--warn); }
+  pre .ok { color: var(--accent); }
+  /* On-call */
+  .rota { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+  /* Checklist */
+  .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .step { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 16px; align-items: flex-start; }
+  .step-num { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--display); font-size: 16px; }
+  .step h4 { margin: 0 0 6px; font-family: var(--display); font-size: 15px; }
+  .step p { margin: 0; color: var(--muted); font-size: 13px; }
+  .step code { font-family: var(--mono); background: var(--paper-2); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }
+  footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
+  @media (max-width: 880px) {
+    .summary, .checklist { grid-template-columns: 1fr; }
+    h1 { font-size: 26px; }
+  }
+</style>
+</head>
+<body>
+<div class="page">
+  <header class="head">
+    <div class="head-left">
+      <div class="crumb">Northwind / Identity / Auth</div>
+      <h1>auth-service</h1>
+      <div class="head-meta">Owned by <span>@identity-platform</span> · v4.7.2 · Last reviewed 14 Oct 2025</div>
+    </div>
+    <span class="pill tier"><span class="dot"></span>Tier 0 · production-critical</span>
+  </header>
+  <section>
+    <h2><span class="index">01</span>Service summary</h2>
+    <div class="summary">
+      <div class="panel">
+        <p><strong>auth-service</strong> issues, validates, and revokes session tokens for every Northwind product surface — web, mobile, and the public API. It owns the password store, the TOTP/WebAuthn enrollments, and the audit-log writer for all auth events.</p>
+        <p>If <code>auth-service</code> is down, customers cannot log in or refresh sessions. Existing valid sessions continue to work for their TTL (15 minutes) but no new auth happens.</p>
+      </div>
+      <div class="panel deps">
+        <h3>Dependencies</h3>
+        <ul>
+          <li><span>Postgres · auth-db</span><span class="ok">healthy</span></li>
+          <li><span>Redis · session-cache</span><span class="ok">healthy</span></li>
+          <li><span>KMS · auth-keyring</span><span class="ok">healthy</span></li>
+          <li><span>SES · transactional</span><span class="warn">degraded</span></li>
+          <li><span>Pager · oncall.northwind</span><span class="ok">healthy</span></li>
+        </ul>
+      </div>
+    </div>
+  </section>
+  <section>
+    <h2><span class="index">02</span>Alerts you might wake up to</h2>
+    <table>
+      <thead><tr><th>Alert</th><th>Severity</th><th>What it means</th><th>First response</th></tr></thead>
+      <tbody>
+        <tr>
+          <td class="code">auth.login_5xx_rate &gt; 1%</td>
+          <td><span class="sev sev-1">SEV-1</span></td>
+          <td>Login endpoint returning errors. Customers are locked out.</td>
+          <td>Check Postgres + Redis dashboards. Roll back last deploy if &lt; 30 min old.</td>
+        </tr>
+        <tr>
+          <td class="code">auth.token_refresh_lag_p95 &gt; 800ms</td>
+          <td><span class="sev sev-2">SEV-2</span></td>
+          <td>Refresh path is slow. Web app starts to feel sluggish.</td>
+          <td>Inspect Redis CPU + connection count. Scale read replicas if needed.</td>
+        </tr>
+        <tr>
+          <td class="code">auth.signup_failure &gt; 10/min</td>
+          <td><span class="sev sev-2">SEV-2</span></td>
+          <td>New signups are failing. Often SES bounces or SMTP auth.</td>
+          <td>Check SES bounce rate. Failover transactional queue to backup region.</td>
+        </tr>
+        <tr>
+          <td class="code">auth.kms_signing_errors &gt; 0</td>
+          <td><span class="sev sev-1">SEV-1</span></td>
+          <td>KMS can't sign session tokens. New logins fail; existing sessions OK.</td>
+          <td>Page the security team. Do not roll keys without a security engineer.</td>
+        </tr>
+        <tr>
+          <td class="code">auth.audit_writer_backlog &gt; 5k</td>
+          <td><span class="sev sev-3">SEV-3</span></td>
+          <td>Audit log writer is falling behind. Compliance impact.</td>
+          <td>Drain manually. Open a ticket; not a wake-up.</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h2><span class="index">03</span>Common procedures</h2>
+    <div class="procs">
+      <div class="proc">
+        <div class="proc-head"><h3>Deploy a new version</h3><span class="when">Use during business hours</span></div>
+        <p>Deploys are blue/green. The script waits for two consecutive healthchecks before promoting traffic.</p>
+<pre><span class="cmt"># Deploy auth-service v4.7.3 to production</span>
+$ nw deploy auth-service --tag <span class="var">v4.7.3</span> --env production
+<span class="cmt"># Wait for two consecutive healthchecks (~90 s), then promote.</span>
+$ nw deploy promote auth-service --env production
+<span class="ok">→ traffic shifted: 10% / 50% / 100%</span></pre>
+      </div>
+      <div class="proc">
+        <div class="proc-head"><h3>Roll back to last known good</h3><span class="when">Use when error rate &gt; 1% post-deploy</span></div>
+<pre><span class="cmt"># Rolls back to the previously promoted version, no rebuild.</span>
+$ nw deploy rollback auth-service --env production
+<span class="ok">→ rolled back to v4.7.2 in 38 s</span></pre>
+      </div>
+      <div class="proc">
+        <div class="proc-head"><h3>Rotate signing keys</h3><span class="when">Schedule with security; never solo</span></div>
+<pre><span class="cmt"># 1. Generate the new signing key in KMS</span>
+$ nw kms create-key --alias auth-signing-<span class="var">$(date +%Y%m%d)</span>
+<span class="cmt"># 2. Mark the new key as the primary; old key remains valid for 24h</span>
+$ nw kms set-primary auth-signing --key <span class="var">&lt;arn&gt;</span>
+<span class="cmt"># 3. After 24h, schedule deletion of the previous key</span>
+$ nw kms schedule-deletion auth-signing --key <span class="var">&lt;old-arn&gt;</span> --days 30</pre>
+      </div>
+      <div class="proc">
+        <div class="proc-head"><h3>Drain audit-log backlog</h3><span class="when">Use when audit_writer_backlog alert fires</span></div>
+<pre>$ nw exec auth-service -- bin/audit-drain --batch <span class="var">5000</span>
+<span class="ok">→ drained 4,812 entries in 12 s; backlog now 0</span></pre>
+      </div>
+    </div>
+  </section>
+  <section>
+    <h2><span class="index">04</span>On-call rotation · this month</h2>
+    <table class="rota">
+      <thead><tr><th>Week</th><th>Primary</th><th>Secondary</th><th>Backup (escalation)</th></tr></thead>
+      <tbody>
+        <tr><td>Oct 27 – Nov 02</td><td>Devon Park</td><td>Priya Banerjee</td><td>Sasha Lin</td></tr>
+        <tr><td>Nov 03 – Nov 09</td><td>Caleb Renner</td><td>Devon Park</td><td>Sasha Lin</td></tr>
+        <tr><td>Nov 10 – Nov 16</td><td>Priya Banerjee</td><td>Caleb Renner</td><td>Mira Reddy</td></tr>
+        <tr><td>Nov 17 – Nov 23</td><td>Sasha Lin</td><td>Priya Banerjee</td><td>Mira Reddy</td></tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h2><span class="index">05</span>Incident response — first 30 minutes</h2>
+    <div class="checklist">
+      <div class="step">
+        <div class="step-num">1</div>
+        <div><h4>Acknowledge the page within 5 min.</h4><p>Type <code>/ack</code> in <code>#incidents-auth</code>. The bot stops re-paging and tags the on-call.</p></div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div><h4>Open the incident channel.</h4><p>Run <code>/incident open auth-service "&lt;short title&gt;"</code>. Slack bot creates a dedicated channel and pages the secondary.</p></div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div><h4>Post a status snapshot.</h4><p>Customer-impact in one line, what you know, what you're checking next. Re-post every 10 minutes.</p></div>
+      </div>
+      <div class="step">
+        <div class="step-num">4</div>
+        <div><h4>Mitigate before you diagnose.</h4><p>If a recent deploy is suspect, roll back. If KMS is degraded, fail open is <em>never</em> the answer for auth — escalate to security.</p></div>
+      </div>
+      <div class="step">
+        <div class="step-num">5</div>
+        <div><h4>Hand off or stand down.</h4><p>If you can't resolve in 30 min, hand to the secondary. When healthy, close with <code>/incident close</code>; postmortem is owed within 5 business days.</p></div>
+      </div>
+    </div>
+  </section>
+  <footer>
+    <span>Northwind Identity Platform · runbook v3.2</span>
+    <span>Source: ops-docs/auth-service.md</span>
+  </footer>
+</div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/finance-report/SKILL.md ADDED Viewed

@@ -0,0 +1,62 @@
+---
+name: finance-report
+description: |
+  Quarterly / monthly financial report — masthead with KPIs, revenue and
+  burn charts, P&L summary table, top-line highlights, and an outlook
+  paragraph. Use when the brief mentions "financial report", "Q3 report",
+  "MRR review", "P&L", or "财报".
+triggers:
+  - "financial report"
+  - "finance report"
+  - "quarterly report"
+  - "p&l"
+  - "mrr review"
+  - "财报"
+  - "财务报告"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: finance
+  featured: 10
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [rtl-and-bidi]
+  example_prompt: "Build me a Q3 financial report for an early-stage SaaS — MRR, burn, gross margin, top accounts."
+---
+# Finance Report Skill
+Produce a single-screen financial report in one self-contained HTML file.
+## Workflow
+1. **Read the active DESIGN.md.** Tables, KPI cards, and chart strokes use
+   palette tokens — never invent new ones.
+2. **Classify** the period (monthly / quarterly / yearly) and entity
+   (startup, division, project) from the brief. If unspecified, assume a
+   quarterly SaaS report and pick believable numbers.
+3. **Layout** the page in this order:
+   - Masthead: company / period / "Confidential — Finance" badge.
+   - Headline KPI strip (4 cards): Revenue, Net new MRR, Gross margin, Cash runway.
+   - Revenue trend chart (inline SVG line + area).
+   - Cost breakdown chart (inline SVG bar) with a 2–3 bullet caption.
+   - P&L summary table (Revenue / Gross profit / Opex / Net) with current vs prior period.
+   - Top accounts table with logo placeholders, plan, ARR, status badge.
+   - Outlook paragraph + footer with author + signature line.
+4. **Write** one self-contained HTML doc (CSS in one inline `<style>` block).
+5. **Self-check**: every number ties to a labelled chart or table; deltas
+   show direction and percentage; accent colour used at most twice.
+## Output contract
+```
+<artifact identifier="finance-report-q3" type="text/html" title="Q3 Finance Report">
+<!doctype html>
+<html>...</html>
+</artifact>
+```

package/dist/__w3kits/assets/design-templates/finance-report/example.html ADDED Viewed

@@ -0,0 +1,242 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Northwind — Q3 Financial Report</title>
+<style>
+  :root {
+    --bg: #f7f6f2;
+    --paper: #ffffff;
+    --ink: #11141a;
+    --muted: #5f6573;
+    --line: #e6e3dd;
+    --line-strong: #c8c2b6;
+    --accent: #1f6e8c;
+    --accent-soft: #e7f0f4;
+    --positive: #1f8c5c;
+    --negative: #b13b3b;
+    --display: 'Iowan Old Style', 'Charter', 'Iowan', Georgia, serif;
+    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
+    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--ink);
+    font-family: var(--body);
+    font-size: 14px;
+    line-height: 1.55;
+  }
+  .page {
+    max-width: 980px;
+    margin: 32px auto;
+    padding: 56px 64px;
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    box-shadow: 0 24px 60px rgba(28,27,26,0.06);
+  }
+  header.masthead { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
+  .mast-left { display: flex; flex-direction: column; gap: 6px; }
+  .mast-co { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; font-weight: 700; }
+  .mast-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
+  .mast-badge {
+    font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 4px;
+    border: 1px solid var(--ink); color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em;
+  }
+  h2 { font-family: var(--display); font-size: 19px; margin: 36px 0 14px; letter-spacing: -0.005em; font-weight: 700; }
+  h2 .accent { color: var(--accent); }
+  .lede { color: var(--muted); max-width: 64ch; }
+  /* KPI strip */
+  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 28px; }
+  .kpi { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
+  .kpi .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+  .kpi .value { font-family: var(--display); font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1; letter-spacing: -0.01em; }
+  .kpi .delta { font-family: var(--mono); font-size: 11.5px; margin-top: 6px; }
+  .delta.up { color: var(--positive); }
+  .delta.down { color: var(--negative); }
+  .delta.flat { color: var(--muted); }
+  /* Charts */
+  .chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
+  .card { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
+  .card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
+  .card .sub { font-size: 12px; color: var(--muted); }
+  .chart svg { width: 100%; height: 200px; display: block; margin-top: 8px; }
+  .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
+  .legend .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
+  .legend .a { background: var(--accent); }
+  .legend .b { background: var(--ink); opacity: 0.6; }
+  /* Bars */
+  .bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+  .bar-row { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; font-size: 12.5px; }
+  .bar-row .label { color: var(--muted); }
+  .bar-track { background: var(--accent-soft); border-radius: 4px; height: 10px; position: relative; overflow: hidden; }
+  .bar-fill { background: var(--accent); height: 100%; border-radius: 4px; }
+  .bar-value { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--ink); }
+  /* Tables */
+  table { width: 100%; border-collapse: collapse; margin-top: 6px; }
+  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
+  th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
+  td.num, th.num { text-align: right; font-family: var(--mono); }
+  tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; padding-top: 14px; }
+  .badge { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 999px; font-weight: 500; }
+  .badge.green { background: #e7f4ee; color: var(--positive); }
+  .badge.amber { background: #fbf0d6; color: #8a6912; }
+  .badge.red { background: #f7e1e1; color: var(--negative); }
+  .logo { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #2c98c5); margin-right: 10px; vertical-align: middle; }
+  /* Outlook */
+  .outlook { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
+  .outlook .quote { padding: 18px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; font-family: var(--display); font-size: 16px; line-height: 1.5; }
+  .outlook .signoff { font-size: 13px; color: var(--muted); }
+  .outlook .signoff strong { color: var(--ink); display: block; font-family: var(--display); font-size: 16px; margin-bottom: 2px; }
+  footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+  @media (max-width: 760px) {
+    .page { padding: 32px 24px; margin: 0; border-radius: 0; }
+    .kpis { grid-template-columns: 1fr 1fr; }
+    .chart-row { grid-template-columns: 1fr; }
+    .outlook { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<div class="page">
+  <header class="masthead">
+    <div class="mast-left">
+      <div class="mast-meta">Northwind Trading · Q3 FY25</div>
+      <div class="mast-co">Quarterly Financial Report</div>
+      <div class="mast-meta">Prepared by Finance · Issued 14 October 2025</div>
+    </div>
+    <div class="mast-badge">Confidential</div>
+  </header>
+  <p class="lede">Q3 closed ahead of plan on revenue and gross margin, with cash runway extending to 27 months on the back of a leaner cost base. Mid-market and enterprise both expanded; SMB churn remains the watch item heading into Q4.</p>
+  <h2>Headline KPIs</h2>
+  <div class="kpis">
+    <div class="kpi">
+      <div class="label">Revenue</div>
+      <div class="value">$8.42M</div>
+      <div class="delta up">▲ 14.6% QoQ</div>
+    </div>
+    <div class="kpi">
+      <div class="label">Net new MRR</div>
+      <div class="value">$184k</div>
+      <div class="delta up">▲ 22.0% QoQ</div>
+    </div>
+    <div class="kpi">
+      <div class="label">Gross margin</div>
+      <div class="value">82%</div>
+      <div class="delta up">▲ 3 pp YoY</div>
+    </div>
+    <div class="kpi">
+      <div class="label">Cash runway</div>
+      <div class="value">27 mo</div>
+      <div class="delta up">▲ 4 mo QoQ</div>
+    </div>
+  </div>
+  <h2>Revenue & costs</h2>
+  <div class="chart-row">
+    <div class="card">
+      <h3>Revenue · trailing 12 months</h3>
+      <div class="sub">USD millions, monthly</div>
+      <div class="chart">
+        <svg viewBox="0 0 720 200" preserveAspectRatio="none">
+          <defs>
+            <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.32"/>
+              <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
+            </linearGradient>
+          </defs>
+          <polygon fill="url(#lg)" points="20,180 20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40 700,40 700,180" />
+          <polyline fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
+            points="20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40" />
+          <polyline fill="none" stroke="#11141a" stroke-opacity="0.45" stroke-width="1.5" stroke-dasharray="3 3"
+            points="20,165 80,158 140,150 200,142 260,134 320,128 380,122 440,116 500,108 560,102 620,96 680,90" />
+          <circle cx="680" cy="40" r="3.5" fill="var(--accent)"/>
+        </svg>
+        <div class="legend">
+          <span><span class="swatch a"></span>Revenue</span>
+          <span><span class="swatch b"></span>Plan</span>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Operating costs</h3>
+      <div class="sub">USD thousands, Q3</div>
+      <div class="bars">
+        <div class="bar-row"><span class="label">R&amp;D</span><div class="bar-track"><div class="bar-fill" style="width: 78%"></div></div><span class="bar-value">$1.42M</span></div>
+        <div class="bar-row"><span class="label">Sales & GTM</span><div class="bar-track"><div class="bar-fill" style="width: 60%"></div></div><span class="bar-value">$1.10M</span></div>
+        <div class="bar-row"><span class="label">G&amp;A</span><div class="bar-track"><div class="bar-fill" style="width: 36%"></div></div><span class="bar-value">$660k</span></div>
+        <div class="bar-row"><span class="label">Marketing</span><div class="bar-track"><div class="bar-fill" style="width: 28%"></div></div><span class="bar-value">$510k</span></div>
+        <div class="bar-row"><span class="label">Infrastructure</span><div class="bar-track"><div class="bar-fill" style="width: 18%"></div></div><span class="bar-value">$330k</span></div>
+      </div>
+    </div>
+  </div>
+  <h2>P&amp;L summary</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Line item</th>
+        <th class="num">Q3 FY25</th>
+        <th class="num">Q2 FY25</th>
+        <th class="num">Δ QoQ</th>
+        <th class="num">Q3 FY24</th>
+        <th class="num">Δ YoY</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Revenue</td><td class="num">$8.42M</td><td class="num">$7.34M</td><td class="num" style="color: var(--positive);">+14.6%</td><td class="num">$5.92M</td><td class="num" style="color: var(--positive);">+42.2%</td></tr>
+      <tr><td>Cost of revenue</td><td class="num">($1.51M)</td><td class="num">($1.46M)</td><td class="num" style="color: var(--negative);">+3.4%</td><td class="num">($1.18M)</td><td class="num" style="color: var(--negative);">+28.0%</td></tr>
+      <tr><td>Gross profit</td><td class="num">$6.91M</td><td class="num">$5.88M</td><td class="num" style="color: var(--positive);">+17.5%</td><td class="num">$4.74M</td><td class="num" style="color: var(--positive);">+45.8%</td></tr>
+      <tr><td>Operating expenses</td><td class="num">($4.02M)</td><td class="num">($4.18M)</td><td class="num" style="color: var(--positive);">−3.8%</td><td class="num">($3.66M)</td><td class="num" style="color: var(--negative);">+9.8%</td></tr>
+      <tr class="total"><td>Operating income</td><td class="num">$2.89M</td><td class="num">$1.70M</td><td class="num" style="color: var(--positive);">+70.0%</td><td class="num">$1.08M</td><td class="num" style="color: var(--positive);">+167.5%</td></tr>
+    </tbody>
+  </table>
+  <h2>Top accounts</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Customer</th>
+        <th>Plan</th>
+        <th>Region</th>
+        <th class="num">ARR</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td><span class="logo"></span>Pioneer Robotics</td><td>Enterprise</td><td>EMEA</td><td class="num">$612k</td><td><span class="badge green">Renewed</span></td></tr>
+      <tr><td><span class="logo"></span>Atlas Cooperative</td><td>Enterprise</td><td>APAC</td><td class="num">$486k</td><td><span class="badge green">Expanded</span></td></tr>
+      <tr><td><span class="logo"></span>Foundry Group</td><td>Team Plus</td><td>NA</td><td class="num">$320k</td><td><span class="badge amber">In renewal</span></td></tr>
+      <tr><td><span class="logo"></span>Voltage Co.</td><td>Enterprise</td><td>NA</td><td class="num">$298k</td><td><span class="badge green">Renewed</span></td></tr>
+      <tr><td><span class="logo"></span>Lattice Health</td><td>Team Plus</td><td>EMEA</td><td class="num">$214k</td><td><span class="badge red">At risk</span></td></tr>
+    </tbody>
+  </table>
+  <h2>Outlook · Q4</h2>
+  <div class="outlook">
+    <div class="quote">"We're entering Q4 with the strongest pipeline coverage of the year — 3.4× plan — and the operating leverage to convert it without expanding the cost base."</div>
+    <div class="signoff">
+      <strong>Mira Okafor, CFO</strong>
+      We expect revenue of $9.1–9.4M, net new MRR of $200–220k, and gross margin holding above 80%. The two open items are SMB churn (we'll publish a recovery plan with the November update) and the EMEA infra migration, which moves to GA in mid-November.
+    </div>
+  </div>
+  <footer>
+    <span>Northwind Trading · Q3 FY25 · Internal use only</span>
+    <span>Page 1 of 1</span>
+  </footer>
+</div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/flowai-live-dashboard-template/SKILL.md ADDED Viewed

@@ -0,0 +1,87 @@
+---
+name: flowai-live-dashboard-template
+description: |
+  Team-management dashboard skill in the FlowAI aesthetic — three tabs
+  (Team Members, Team Details, Activity Log), KPI stat row, member table,
+  role distribution bar chart, online presence and activity sparklines,
+  and a top-contributors panel, all in a single self-contained HTML file
+  with light/dark theming, hoverable chart tooltips, click-to-zoom panels,
+  and CSV export. Use when the brief asks for a team / workspace admin
+  dashboard, an interactive admin dashboard with charts, or names FlowAI.
+triggers:
+  - "flowai dashboard"
+  - "team dashboard"
+  - "team management dashboard"
+  - "interactive admin dashboard"
+  - "workspace admin dashboard"
+  - "团队管理后台"
+  - "可交互后台"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: operations
+  preview:
+    type: html
+    entry: index.html
+    reload: debounce-100
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [state-coverage, accessibility-baseline]
+  example_prompt: "Create a FlowAI-style team management dashboard with Team Members, Team Details and Activity Log tabs, KPI cards, a member table with status badges, a role-distribution bar chart, an online-presence sparkline, top contributors, light/dark mode, and CSV export."
+---
+# FlowAI Dashboard Skill
+Produce a single-screen, multi-tab team management dashboard inspired by the
+FlowAI aesthetic. The output is a self-contained HTML file (no external runtime
+dependencies) with built-in interactions: tab switching, an animated bar chart,
+hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV
+export of the visible team table.
+## Resource map
+```
+flowai-live-dashboard-template/
+├── SKILL.md
+├── assets/
+│   └── template.html          # reference seed used as the starting structure
+├── references/
+│   └── checklist.md           # P0/P1/P2 quality gates
+└── example.html               # complete hand-built sample (gallery preview)
+```
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Map color, typography,
+   spacing, and component styling tokens to the CSS variables used by
+   `assets/template.html`. Do not invent new tokens.
+2. Start from `assets/template.html`; never generate the shell from blank.
+3. Keep three tabs: `Team Members`, `Team Details`, `Activity Log`. Tabs must
+   actually switch and only one view is visible at a time.
+4. Generate plausible, specific sample data (real-looking names, IDs, roles,
+   departments, dates, percentages). No `Member A / Metric B` placeholders.
+5. Required interactions:
+   - tab switching with hash sync (`#members | #details | #activity`)
+   - role bar chart animates with easing on first reveal of the details tab
+   - chart hover tooltips with precise label + value
+   - click any panel/card to zoom; click again or press Esc to restore
+   - dark mode toggle that re-derives chart colors from CSS variables
+   - "Export CSV" button that exports every row currently in the team table,
+     including the `Workflow` column
+6. Run through `references/checklist.md` before final output.
+## Output contract
+Emit one short orientation sentence, then the artifact:
+```xml
+<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+The artifact must render correctly when opened directly from disk with no
+build step and no network access.