@drunkcoding/agents-and-skills 0.0.45 → 0.0.46

package/plugins/html-effectiveness/templates/09-slide-deck.html.tmpl

@@ -1,535 +0,0 @@
-<!--
-template: 09-slide-deck
-upstream: 09-slide-deck.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<!-- ============================================================
-       Slide 1 — Title
-       ============================================================ -->
-  <section class="slide title-slide" id="s1">
-    <div class="slide-inner">
-      <svg class="ornament" width="56" height="56" viewBox="0 0 56 56" aria-hidden="true">
-        <circle cx="28" cy="28" r="22" fill="none" stroke="#D1CFC5" stroke-width="1.5"/>
-        <path d="M16 28 H40 M28 16 V40" stroke="#D97757" stroke-width="1.5" stroke-linecap="round"/>
-        <circle cx="28" cy="28" r="3" fill="#141413"/>
-      </svg>
-      <h1>{{title}}</h1>
-      <p class="subtitle">
-        What shipped, what's moving, and one decision we need from the
-        room before the Acme 2.4 cut.
-      </p>
-      <div class="byline">
-        <span>Friday demo</span>
-        <span>6 slides</span>
-        <span>~4 min</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide 2 — Shipped
-       ============================================================ -->
-  <section class="slide" id="s2">
-    <div class="slide-inner">
-      <div class="eyebrow">Shipped this week</div>
-      <h2>Three things out the door</h2>
-      <ul class="ship-list">
-        <li class="ship-item">
-          <span class="ship-dot"></span>
-          <div>
-            <div class="ship-title">Bulk task import</div>
-            <div class="ship-desc">
-              CSV and JSON uploads now land straight into a board with
-              column mapping — no more paste-and-pray.
-            </div>
-          </div>
-          <span class="ship-ref">#4211</span>
-        </li>
-        <li class="ship-item">
-          <span class="ship-dot"></span>
-          <div>
-            <div class="ship-title">Webhook retries v2</div>
-            <div class="ship-desc">
-              Exponential backoff with jitter; dead-letter queue surfaces
-              in the workspace admin panel.
-            </div>
-          </div>
-          <span class="ship-ref">#4188 #4203</span>
-        </li>
-        <li class="ship-item">
-          <span class="ship-dot"></span>
-          <div>
-            <div class="ship-title">Postgres 16 migration</div>
-            <div class="ship-desc">
-              All read replicas cut over Tuesday night; zero customer-facing
-              downtime, ~9% faster aggregate queries.
-            </div>
-          </div>
-          <span class="ship-ref">#4179</span>
-        </li>
-      </ul>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide 3 — In progress
-       ============================================================ -->
-  <section class="slide" id="s3">
-    <div class="slide-inner">
-      <div class="eyebrow">In progress</div>
-      <h2>Carrying into next week</h2>
-      <ul class="prog-list">
-        <li class="prog-item">
-          <div class="prog-head">
-            <span class="prog-title">Recurring tasks engine</span>
-            <span class="prog-pct">~70%</span>
-          </div>
-          <div class="prog-track"><div class="prog-fill" style="width:70%"></div></div>
-          <p class="prog-note">
-            Scheduler and RRULE parsing are done; remaining work is the
-            timezone edge cases and the "skip holidays" toggle.
-          </p>
-        </li>
-        <li class="prog-item">
-          <div class="prog-head">
-            <span class="prog-title">Audit log export</span>
-            <span class="prog-pct">~35%</span>
-          </div>
-          <div class="prog-track"><div class="prog-fill" style="width:35%"></div></div>
-          <p class="prog-note">
-            Streaming NDJSON endpoint is up behind a flag; still wiring
-            the S3 destination picker and retention policy UI.
-          </p>
-        </li>
-      </ul>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide 4 — Metrics
-       ============================================================ -->
-  <section class="slide" id="s4">
-    <div class="slide-inner">
-      <div class="eyebrow">Metrics</div>
-      <h2>Numbers we watch</h2>
-
-      <div class="metrics">
-        <div class="metric">
-          <div class="metric-label">API p95 latency</div>
-          <div class="metric-value">184<span style="font-size:28px">ms</span></div>
-          <div class="metric-delta down">↓ 12% wk/wk</div>
-        </div>
-        <div class="metric">
-          <div class="metric-label">Background job error rate</div>
-          <div class="metric-value">0.21<span style="font-size:28px">%</span></div>
-          <div class="metric-delta down">↓ 0.08pp</div>
-        </div>
-      </div>
-
-      <div class="sparkline-wrap">
-        <svg width="100%" height="64" viewBox="0 0 780 64" preserveAspectRatio="none" aria-hidden="true">
-          <polyline
-            points="0,22 110,30 220,18 330,34 440,26 550,40 660,24 780,12"
-            fill="none"
-            stroke="#788C5D"
-            stroke-width="2"
-            stroke-linejoin="round"
-            stroke-linecap="round"/>
-          <circle cx="780" cy="12" r="3.5" fill="#788C5D"/>
-          <line x1="0" y1="63" x2="780" y2="63" stroke="#D1CFC5" stroke-width="1"/>
-        </svg>
-        <div class="sparkline-caption">
-          p95 latency, trailing 8 days — lower is better
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide 5 — Decision needed (inverted)
-       ============================================================ -->
-  <section class="slide invert" id="s5">
-    <div class="slide-inner">
-      <div class="eyebrow">Decision needed</div>
-      <h2>One call to make</h2>
-
-      <div class="decision-card">
-        <p class="decision-q">
-          Do we ship recurring tasks behind a workspace flag in 2.4, or
-          hold one more week for the timezone fixes?
-        </p>
-        <p class="decision-context">
-          Flagged rollout gets it to design partners Friday but means two
-          code paths for ~2 weeks. Holding keeps a single path but slips
-          the partner promise.
-        </p>
-      </div>
-
-      <div class="options">
-        <span class="chip lean">A — Flag it, ship Friday</span>
-        <span class="chip">B — Hold for 2.5</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide 6 — Next week
-       ============================================================ -->
-  <section class="slide" id="s6">
-    <div class="slide-inner">
-      <div class="eyebrow">Next week</div>
-      <h2>On deck</h2>
-      <ul class="next-list">
-        <li>Finish recurring tasks — timezone matrix tests, then dogfood on the internal ops board.</li>
-        <li>Audit log export to private beta — three workspaces lined up.</li>
-        <li>Start scoping rate-limit headers for the public API; RFC draft by Thursday.</li>
-      </ul>
-      <div class="footnote">
-        Questions → drop them in the platform channel or grab anyone after standup.
-      </div>
-    </div>
-  </section>
-
-  <!-- ============================================================
-       Slide counter
-       ============================================================ -->
-  <div id="counter">1 / 6</div>
-
-<style>
-/* ------------------------------------------------------------------
-     Design tokens
-     ------------------------------------------------------------------ */
-  :root {
-    --ivory:   #FAF9F5;
-    --slate:   #141413;
-    --clay:    #D97757;
-    --oat:     #E3DACC;
-    --olive:   #788C5D;
-    --gray-150:#F0EEE6;
-    --gray-300:#D1CFC5;
-    --gray-500:#87867F;
-    --gray-700:#3D3D3A;
-
-    --serif: ui-serif, Georgia, "Times New Roman", serif;
-    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  }
-* { margin: 0; padding: 0; box-sizing: border-box; }
-/* ------------------------------------------------------------------
-     Slide shell
-     ------------------------------------------------------------------ */
-  .slide {
-    width: 100vw;
-    height: 100vh;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8vh 6vw;
-  }
-.slide-inner {
-    width: 100%;
-    max-width: 780px;
-  }
-.slide.invert {
-    background: var(--slate);
-    color: var(--ivory);
-  }
-/* ------------------------------------------------------------------
-     Typography
-     ------------------------------------------------------------------ */
-  .eyebrow {
-    font-family: var(--mono);
-    font-size: 12px;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-    margin-bottom: 28px;
-  }
-.invert .eyebrow { color: var(--gray-300); }
-h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: clamp(40px, 6vw, 64px);
-    line-height: 1.08;
-    letter-spacing: -0.01em;
-    margin-bottom: 20px;
-  }
-h2 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: clamp(30px, 4vw, 42px);
-    line-height: 1.15;
-    letter-spacing: -0.005em;
-    margin-bottom: 44px;
-  }
-.subtitle {
-    font-size: 17px;
-    line-height: 1.6;
-    color: var(--gray-700);
-    max-width: 520px;
-  }
-.mono { font-family: var(--mono); }
-/* ------------------------------------------------------------------
-     Slide 1 — title
-     ------------------------------------------------------------------ */
-  .title-slide .slide-inner { text-align: left; }
-.ornament {
-    display: block;
-    margin: 0 0 40px 0;
-  }
-.byline {
-    margin-top: 56px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-    display: flex;
-    gap: 24px;
-  }
-/* ------------------------------------------------------------------
-     Slide 2 — shipped list
-     ------------------------------------------------------------------ */
-  .ship-list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 28px;
-  }
-.ship-item {
-    display: grid;
-    grid-template-columns: 14px 1fr auto;
-    column-gap: 20px;
-    align-items: baseline;
-    padding-bottom: 24px;
-    border-bottom: 1px solid var(--gray-150);
-  }
-.ship-item:last-child { border-bottom: none; }
-.ship-dot {
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    background: var(--olive);
-    margin-top: 8px;
-    align-self: start;
-  }
-.ship-title {
-    font-family: var(--serif);
-    font-size: 20px;
-    font-weight: 500;
-    margin-bottom: 6px;
-  }
-.ship-desc {
-    font-size: 14px;
-    line-height: 1.55;
-    color: var(--gray-700);
-  }
-.ship-ref {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    white-space: nowrap;
-    padding-top: 4px;
-  }
-/* ------------------------------------------------------------------
-     Slide 3 — in progress
-     ------------------------------------------------------------------ */
-  .prog-list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
-  }
-.prog-item .prog-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 10px;
-  }
-.prog-title {
-    font-family: var(--serif);
-    font-size: 20px;
-    font-weight: 500;
-  }
-.prog-pct {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-  }
-.prog-track {
-    width: 100%;
-    height: 5px;
-    background: var(--gray-150);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-bottom: 10px;
-  }
-.prog-fill {
-    height: 100%;
-    background: var(--clay);
-    border-radius: 3px;
-  }
-.prog-note {
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--gray-700);
-  }
-/* ------------------------------------------------------------------
-     Slide 4 — metrics
-     ------------------------------------------------------------------ */
-  .metrics {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 56px;
-    margin-bottom: 48px;
-  }
-.metric-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-    margin-bottom: 14px;
-  }
-.metric-value {
-    font-family: var(--serif);
-    font-size: 52px;
-    font-weight: 500;
-    line-height: 1;
-    letter-spacing: -0.01em;
-  }
-.metric-delta {
-    font-family: var(--mono);
-    font-size: 13px;
-    margin-top: 12px;
-  }
-.metric-delta.down { color: var(--olive); }
-.metric-delta.up { color: var(--clay); }
-.sparkline-wrap {
-    border-top: 1px solid var(--gray-300);
-    padding-top: 28px;
-  }
-.sparkline-caption {
-    font-size: 12px;
-    color: var(--gray-500);
-    margin-top: 10px;
-  }
-/* ------------------------------------------------------------------
-     Slide 5 — decision (inverted)
-     ------------------------------------------------------------------ */
-  .decision-card {
-    border: 1.5px solid var(--clay);
-    border-radius: 14px;
-    padding: 36px 38px;
-    background: rgba(217, 119, 87, 0.06);
-  }
-.decision-q {
-    font-family: var(--serif);
-    font-size: 24px;
-    line-height: 1.4;
-    margin-bottom: 12px;
-  }
-.decision-context {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--gray-300);
-  }
-.options {
-    display: flex;
-    gap: 14px;
-    margin-top: 32px;
-    flex-wrap: wrap;
-  }
-.chip {
-    font-family: var(--mono);
-    font-size: 12px;
-    padding: 10px 18px;
-    border-radius: 999px;
-    border: 1px solid var(--gray-700);
-    color: var(--ivory);
-    background: transparent;
-  }
-.chip.lean {
-    border-color: var(--clay);
-    color: var(--clay);
-  }
-/* ------------------------------------------------------------------
-     Slide 6 — next week
-     ------------------------------------------------------------------ */
-  .next-list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 22px;
-  }
-.next-list li {
-    font-family: var(--serif);
-    font-size: 21px;
-    line-height: 1.45;
-    padding-left: 36px;
-    position: relative;
-  }
-.next-list li::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0.55em;
-    width: 18px;
-    height: 1.5px;
-    background: var(--clay);
-  }
-.footnote {
-    margin-top: 56px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-  }
-/* ------------------------------------------------------------------
-     Slide counter
-     ------------------------------------------------------------------ */
-  #counter {
-    position: fixed;
-    bottom: 22px;
-    right: 28px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-    user-select: none;
-    z-index: 10;
-  }
-@media (max-width: 640px) {
-    .metrics { grid-template-columns: 1fr; gap: 36px; }
-    .ship-item { grid-template-columns: 14px 1fr; }
-    .ship-ref { grid-column: 2; padding-top: 8px; }
-  }
-</style>
-
-<script>
-(function () {
-    const slides = Array.from(document.querySelectorAll('.slide'));
-    const counter = document.getElementById('counter');
-    let current = 0;
-
-    function go(i) {
-      current = Math.max(0, Math.min(slides.length - 1, i));
-      slides[current].scrollIntoView({ behavior: 'smooth' });
-    }
-
-    document.addEventListener('keydown', function (e) {
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); go(current + 1); }
-      if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')                     { e.preventDefault(); go(current - 1); }
-    });
-
-    const obs = new IntersectionObserver(function (entries) {
-      entries.forEach(function (en) {
-        if (en.isIntersecting) {
-          current = slides.indexOf(en.target);
-          counter.textContent = (current + 1) + ' / ' + slides.length;
-        }
-      });
-    }, { threshold: 0.6 });
-
-    slides.forEach(function (s) { obs.observe(s); });
-  })();
-</script>