diff --git a/CLAUDE.md b/CLAUDE.md
index 74f31a7..568b205 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -514,6 +514,43 @@ mirror its content into `src/patterns.ts`'s `PATTERNS` array (with a
 No DB migration, no schema change, no new endpoint — the existing
 `/.well-known/patterns/:filename` route picks it up automatically.
 
+**Prescriptive patterns (structure fixed, not a menu).** Most patterns
+offer 3–5 layout directions and let the agent pick. `session-explainer`
+does not: it mandates one structure, because these pages are only worth
+comparing to each other if they share a shape. Two mechanics support that:
+
+- **A reference skeleton** at `patterns/<name>.template.html`, mirrored
+  into `src/patterns.ts` as a second string constant and referenced from
+  the pattern's front matter (`template: <name>.template.html`). Served
+  by the same route via `getPatternAsset()`, which returns body +
+  content-type so `.md` goes out as `text/markdown` and `.template.html`
+  as `text/html`. `buildPatternIndex()` adds `template_url` for any
+  pattern that declares one, so agents discover it from the index.
+  The template's CSS is split by a marked comment: a **BRAND TOKENS**
+  block the agent adapts, and a **STRUCTURE** block it must not touch.
+- **`brand_scope: colors-only`** alongside `brand_sensing: true` — adapt
+  palette and type, leave the structure alone. A prescriptive pattern and
+  full brand sensing contradict each other; pick one per pattern.
+  **Why a second key rather than `brand_sensing: colors-only`:** the
+  CLI's validator (`src/patterns/schema.ts` in the CLI repo) requires
+  `brand_sensing` to be a boolean and throws otherwise. Since `init`
+  loops every pattern inside one `try`, a throw drops the whole run into
+  the offline fallback — an older CLI would silently install 3 patterns
+  and report `offline: true`. Unknown front-matter keys are ignored, so
+  `brand_scope` and `template` are forward-compatible with published
+  CLI versions. Keep new pattern metadata additive for that reason.
+
+Enforcement tops out there on purpose. The server does **not** validate
+published HTML (that would break "HTML uploads exactly as posted"), and
+`./.htmlbin/patterns/` still overrides the official catalog. The pattern
+carries a conformance checklist for the agent to self-check instead.
+
+The CLI's offline bundle globs `patterns/*.md` only, so templates are
+**not** vendored — an offline `patterns init` gets the pattern's prose
+fallback ("build the same structure from the requirements below"). If
+that becomes a real gap, teaching `scripts/build-bundled-patterns.mjs`
+and the CLI's install path about a second file per pattern is the fix.
+
 **The CLI's `patterns` subcommand**
 ([utsengar/htmlbin-cli](https://github.com/utsengar/htmlbin-cli))
 offers `list / init / add` for managing local installs. The skill's
@@ -822,6 +859,8 @@ patterns/           ─ human-browsable canonical pattern markdown — source of
   pr-explainer.md       ─ "explain this PR / summarize this diff"
   summary-roundup.md    ─ discussion summaries, weekly status, incident timelines
   plan-spec-explainer.md─ plan.md / spec.md publishing
+  session-explainer.md  ─ agent session writeups — problem, approach, dead ends
+  session-explainer.template.html ─ required skeleton for the above (prescriptive)
   # Mirrored byte-for-byte into src/patterns.ts (wrangler .md-import gotcha).
 
 .github/workflows/
diff --git a/patterns/session-explainer.md b/patterns/session-explainer.md
new file mode 100644
index 0000000..21df999
--- /dev/null
+++ b/patterns/session-explainer.md
@@ -0,0 +1,118 @@
+---
+name: session-explainer
+description: Explain an agent session — the problem, the approach, the dead ends, and what the thinking actually was.
+triggers:
+  - publish this session
+  - share this trace
+  - share my claude code session
+  - make a page from this transcript
+  - publish my agent session
+  - show my thinking on this
+brand_sensing: true
+brand_scope: colors-only
+template: session-explainer.template.html
+---
+
+# Session explainer
+
+## When to use
+
+When the source is an agent session — a transcript of work with a coding agent. The drop's job is to explain **how the author thought about a problem**, not to replay the conversation. The reader wants the reasoning; the transcript is raw material, not the deliverable.
+
+**When not to use.** If the audience needs unedited proof that the work happened — a grant or accelerator application, an interview artifact, an audit — this pattern is the wrong tool and so is a drop. Those readers want the original file precisely because nobody curated it, and curation is this pattern's whole point. Say so and hand them the raw transcript instead.
+
+Sessions worth publishing also tend to be the long ones, and a long transcript does not fit in a drop. Distilling isn't a stylistic preference here; it's the only thing that fits.
+
+## Start from the template, don't invent a layout
+
+This pattern is **prescriptive**. Unlike the other official patterns it does not offer layout choices, because the structure is what makes these pages comparable to each other.
+
+    curl -s https://htmlbin.dev/.well-known/patterns/session-explainer.template.html
+
+Fill every `SLOT_*` placeholder and each `<!-- SLOT: ... -->` region. The template's CSS is split by a marked line: adapt the **BRAND TOKENS** block, treat everything under **STRUCTURE** as fixed.
+
+If you cannot fetch the template, build the same structure from the requirements below. Do not substitute a different one.
+
+## Required structure
+
+All five are mandatory. A page missing any of them is not this pattern.
+
+1. **A sticky left rail** (`.rail`) holding the session's numbers and context. It stays on screen while the content column scrolls, so the reader keeps the session's identity while reading any one part.
+2. **Two tabs** — `Highlights` (`#p1`, default) and `Dead ends` (`#p2`). Driven by `:target` and `:has()`, never JavaScript.
+3. **A compressed timeline** in Highlights. One line per step. This is the index to the whole session.
+4. **One card per dead end** in the second tab, `id="dead-N"`.
+5. **Deep links from timeline to cards.** A timeline row that has a card is an `<a href="#dead-N">` whose gutter reads `dead-N →`. Clicking it switches tab, scrolls to the card, and rings it. Rows without a card stay a `<div>` and get a plain gutter label.
+
+## Numbers must be measured
+
+Every value in the rail comes from the transcript. Count it; never estimate, never round for effect. **Omit a tile rather than guess** — a wrong number is worse than a missing one. Mark at most one tile `.hot`, and only when it carries the page's central constraint.
+
+Required in the context block: `agent`, `model`. Add `window`, `repo`, `outcome` when known.
+
+## Hard limits
+
+| Thing | Limit |
+|---|---|
+| Insights | 2–4 items, **150 words total** |
+| Timeline rows | 8–16, one line each |
+| Dead-end cards | 2–6 |
+| Lede | 2 sentences |
+| `<script>` tags | **0** |
+| Page weight | under 500 KB |
+
+## Insights carry the page
+
+The block under "what this session taught" is the reason someone reads this. It holds **transferable lessons** — what the next person should do differently.
+
+A fact about the artifact is not a lesson. "The transcript is 4 MB", "two PRs were unplanned", "the suite has 136 checks" are trivia; they belong in the rail or nowhere. A lesson generalizes past this session.
+
+Write them as plain sentences. No bold lead-in labels, no em dashes, no aphorisms ("X is not a Y", "X is the Y of Z") — state the concrete claim instead.
+
+## Dead ends are the content
+
+Most of the value is in what didn't work. For each: what was tried, what killed it, what it cost. Include the moment a conclusion flipped, and be specific about the wrong version — a reader learns from the reasoning error, not from the tidy ending.
+
+Do not sanitize the author's voice, including the parts where they were wrong.
+
+## Redaction floor
+
+Session transcripts are the most credential-dense artifact on a developer's machine. Live API keys have been found in published session logs more than once. Every excerpt has to clear this list:
+
+- **Scan for secrets.** API keys, bearer tokens, `.env` contents, database URLs, connection strings, signed URLs, private hostnames. High-entropy strings are guilty until proven innocent.
+- **Strip absolute home paths.** `/Users/<name>/…` and `/home/<name>/…` leak identity and local layout. Rewrite as repo-relative.
+- **Never publish an excerpt the human hasn't seen.** Sessions routinely contain customer names, unshipped work, internal URLs, and third-party code.
+- **Default to a passcode for anything team-internal** (`POST /api/drops/:slug/passcode`). Be honest that it's a share gate, not encryption — the HTML is stored unencrypted.
+- **If the session touched credentials at all, say so** and tell the human to rotate them, whether or not the value reached the drop.
+
+## Brand sensing is colors only
+
+`brand_scope: colors-only` — narrower than other patterns. Apply the user's palette and type to the BRAND TOKENS block. Keep **one** accent; failures and the active tab are the only elements that wear it. Do not add a second hue to color-code phases: the phase label carries the meaning, and a multi-hue badge set needs a validated categorical palette.
+
+Structure does not adapt to brand. A session explainer should be recognizable as one.
+
+## Conformance check
+
+Before publishing, verify each of these against the rendered page. Every one is checkable, so check it rather than assuming.
+
+**One tab is always hidden, and a hidden panel hides its own defects.** Elements inside `display: none` report zero width and height, so an overflow or a small tap target in the inactive tab measures as passing. Run the layout checks twice, once per tab, or skip zero-size elements explicitly. A check that silently measures nothing is worse than no check.
+
+- `.rail` exists and is `position: sticky` above 760px
+- Both `#p1` and `#p2` exist; `#p1` shows by default
+- `document.querySelectorAll('script').length === 0`
+- Every `a.row[href^="#dead-"]` resolves to a card with that `id`
+- Every `.card[id]` is reachable from a timeline row
+- Clicking a timeline link switches tab, scrolls to the card, and rings it
+- Insight text is 150 words or fewer
+- At 360px, **with each tab shown in turn**: no horizontal scroll, and no element wider than the viewport outside an `overflow-x` container
+- Every visible `summary` and `.tabnav a` is at least 44px tall
+- No `/Users/` or `/home/` string anywhere in the document
+- Dark mode is defined with chosen steps, not an inversion
+
+## Don't
+
+- Dump the raw transcript. It won't fit, and a wall of turns isn't a thing anyone reads.
+- Include latency, token counts, or cost per step. Those are pipeline-debugging numbers borrowed from observability tools; this reader is here for the thinking.
+- Render a span tree or a nested waterfall. A coding session is essentially linear.
+- Label the second tab "Full trace". It holds curated cards, not the trace. Promising a trace and showing four cards is a broken promise.
+- Claim the page is complete, unedited, or tamper-evident. It's a curated account. If that distinction matters to the reader, point them at the source file.
+- Quote a teammate, a customer, or a third party from the transcript without the human's explicit OK.
diff --git a/patterns/session-explainer.template.html b/patterns/session-explainer.template.html
new file mode 100644
index 0000000..b1d4928
--- /dev/null
+++ b/patterns/session-explainer.template.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SLOT_TITLE - SLOT_SLUG - htmlbin.dev</title>
+<!--
+  session-explainer reference skeleton.
+
+  Fill every SLOT_* placeholder and the <!-- SLOT: ... --> regions.
+  Adapt the BRAND TOKENS block below to the user's project.
+  Do not restructure anything under STRUCTURE: the rail, the two tabs,
+  the timeline, and the cards are required by the pattern.
+
+  Fetch the pattern itself for the rules and limits:
+  https://htmlbin.dev/.well-known/patterns/session-explainer.md
+-->
+<style>
+/* ══════════════════════════════════════════════════════════════════
+   BRAND TOKENS — adapt these. Apply brand sensing here and nowhere else.
+   Keep ONE accent. Failures and the active tab are the only things
+   allowed to wear it.
+   ══════════════════════════════════════════════════════════════════ */
+:root{
+  --bg:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F5F5F5;
+  --ink:#0A0A0A; --ink-2:#171717; --ink-soft:#737373; --ink-softer:#A3A3A3;
+  --rule:#E5E5E5; --rule-soft:#F0F0F0;
+  --accent:#D93025; --accent-bg:#FCE8E6; --accent-stroke:#F4C7C3;
+  --ok:#1F8F4A;
+  --code-bg:#0A0A0A; --code-fg:#E8E8E8; --code-dim:#6E7681;
+  --t-key:#FF7B72; --t-str:#A5D6FF; --t-num:#79C0FF; --t-fn:#D2A8FF; --t-ok:#7EE787;
+  --sans:system-ui,-apple-system,sans-serif;
+  --mono:ui-monospace,"SF Mono",Menlo,monospace;
+  --rail:264px;
+}
+@media (prefers-color-scheme:dark){
+  /* Pick dark steps deliberately. Do not auto-invert. */
+  :root{
+    --bg:#0A0A0A; --bg-2:#121212; --bg-3:#1A1A1A;
+    --ink:#F5F5F5; --ink-2:#E0E0E0; --ink-soft:#9A9A9A; --ink-softer:#6E6E6E;
+    --rule:#242424; --rule-soft:#1A1A1A;
+    --accent:#FF6470; --accent-bg:#2A1113; --accent-stroke:#4A1D21;
+    --ok:#3FB950; --code-bg:#111111;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   STRUCTURE — fixed. Do not edit below this line.
+   ══════════════════════════════════════════════════════════════════ */
+*{box-sizing:border-box}
+html,body{max-width:100vw;overflow-x:clip}
+body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
+  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
+p{overflow-wrap:anywhere;margin:0 0 12px}
+code{font-family:var(--mono);font-size:.87em;overflow-wrap:anywhere;
+  background:var(--bg-3);padding:1px 5px;border-radius:3px}
+a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-stroke)}
+a:hover{border-bottom-color:var(--accent)}
+
+.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);max-width:1240px;margin:0 auto}
+.rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
+  border-right:1px solid var(--rule);background:var(--bg-2);
+  padding:20px 18px;display:flex;flex-direction:column;gap:18px}
+.main{min-width:0;padding:30px 34px 40px}
+
+.brand{font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.9}
+.brand b{color:var(--ink);font-weight:600;display:block;font-size:13px}
+.brand .crumb{color:var(--ink-softer);font-size:11px}
+.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
+  border:1px solid var(--rule);border-radius:3px;padding:3px 8px;
+  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:8px}
+.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
+.rlab{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
+  color:var(--ink-softer);padding-bottom:7px;border-bottom:1px solid var(--rule);margin-bottom:2px}
+
+.nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
+  border:1px solid var(--rule);border-radius:5px;overflow:hidden}
+.nums .t{background:var(--bg);padding:9px 10px}
+.nums .v{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em;
+  line-height:1.15;color:var(--ink)}
+.nums .v small{font-size:11px;color:var(--ink-soft);font-weight:400}
+.nums .l{font-family:var(--mono);font-size:9px;text-transform:uppercase;
+  letter-spacing:.06em;color:var(--ink-softer);margin-top:3px}
+.nums .t.hot .v{color:var(--accent)}
+
+.mrows{font-family:var(--mono);font-size:11px}
+.mrows div{padding:6px 0;border-bottom:1px solid var(--rule-soft)}
+.mrows div:last-child{border-bottom:0}
+.mrows k{display:block;color:var(--ink-softer);font-size:9px;text-transform:uppercase;
+  letter-spacing:.07em;margin-bottom:2px}
+.mrows v{color:var(--ink-2);overflow-wrap:anywhere}
+.rfoot{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--ink-softer);
+  border-top:1px solid var(--rule);padding-top:12px;line-height:1.6}
+
+h1{font-size:clamp(27px,3.4vw,37px);line-height:1.13;letter-spacing:-.028em;
+  margin:0 0 10px;font-weight:600}
+.sub{font-size:17px;color:var(--ink-soft);margin:0 0 24px;max-width:64ch}
+.sub b{color:var(--ink);font-weight:500}
+.klab{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
+  color:var(--ink-softer);margin:0 0 9px}
+.keys{border-left:2px solid var(--accent);padding:2px 0 2px 15px;margin:0 0 6px}
+.keys ul{margin:0;padding-left:17px}
+.keys li{margin:12px 0;font-size:15px;line-height:1.6}
+.keys li:first-child{margin-top:2px}
+h2{font-size:16px;margin:34px 0 12px;font-weight:600;letter-spacing:-.01em;
+  padding-bottom:6px;border-bottom:1px solid var(--rule-soft)}
+h3{font-size:15px;margin:0;font-weight:600}
+
+/* tabs: :target-driven so a highlight row can switch tab AND scroll. No JS. */
+.tabs{margin:28px 0 0}
+.tabnav{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:20px;flex-wrap:wrap}
+.tabnav a{font-family:var(--mono);font-size:12px;padding:9px 13px;cursor:pointer;
+  color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;
+  display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:none}
+.tabnav a:hover{color:var(--ink)}
+.tabnav a .n{background:var(--bg-3);border-radius:9px;padding:1px 6px;font-size:10.5px;
+  color:var(--ink-softer)}
+.panel{display:none}
+#p1{display:block}
+.panels:has(#p2:target) #p1{display:none}
+.panels:has(#p2:target) #p2{display:block}
+.panels:has(.card:target) #p1{display:none}
+.panels:has(.card:target) #p2{display:block}
+.panels:has(#p1:target) #p1{display:block}
+.panels:has(#p1:target) #p2{display:none}
+.tabs:not(:has(#p2:target)):not(:has(.card:target)) .tabnav a.h,
+.tabs:has(#p1:target) .tabnav a.h,
+.tabs:has(#p2:target) .tabnav a.d,
+.tabs:has(.card:target) .tabnav a.d{
+  color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
+.tabs:not(:has(#p2:target)):not(:has(.card:target)) .tabnav a.h .n,
+.tabs:has(#p1:target) .tabnav a.h .n,
+.tabs:has(#p2:target) .tabnav a.d .n,
+.tabs:has(.card:target) .tabnav a.d .n{background:var(--accent-bg);color:var(--accent)}
+.tabs:has(#p1:target) .tabnav a.d,
+.tabs:has(.card:target) .tabnav a.h,
+.tabs:has(#p2:target) .tabnav a.h{
+  color:var(--ink-soft);border-bottom-color:transparent;font-weight:400}
+
+.tl{border:1px solid var(--rule);border-radius:5px;overflow:hidden}
+.row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:baseline;
+  padding:9px 13px;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
+.row:last-child{border-bottom:0}
+.row:hover{background:var(--bg-2)}
+.ph{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
+  color:var(--ink-soft);border:1px solid var(--rule);border-radius:3px;padding:2px 0;
+  text-align:center;background:var(--bg-2)}
+.ph.kill{color:var(--accent);border-color:var(--accent-stroke);background:var(--accent-bg)}
+.row .t{color:var(--ink-2)}
+.row .g{font-family:var(--mono);font-size:11px;color:var(--ink-softer);white-space:nowrap}
+a.row{text-decoration:none;color:inherit;border:0}
+a.row .g{color:var(--accent)}
+a.row:hover{background:var(--bg-2)}
+a.row:hover .t{color:var(--ink)}
+
+figure{margin:24px 0}
+figcaption{font-family:var(--mono);font-size:10.5px;color:var(--ink-softer);
+  text-transform:uppercase;letter-spacing:.07em;margin:0 0 8px}
+.brow{display:grid;grid-template-columns:128px minmax(0,1fr) 44px;gap:10px;align-items:center;
+  padding:3px 0;font-family:var(--mono);font-size:12px}
+.brow .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.track{display:block;background:var(--bg-3);border-radius:3px;height:9px;overflow:hidden}
+.fill{display:block;height:9px;background:var(--accent);border-radius:0 3px 3px 0;min-width:2px}
+.brow .vv{text-align:right;color:var(--ink-soft)}
+
+.card{border:1px solid var(--rule);border-radius:5px;margin:14px 0;overflow:hidden;
+  scroll-margin-top:16px}
+.card>.hd{padding:11px 14px;background:var(--bg-2);border-bottom:1px solid var(--rule);
+  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.card>.bd{padding:13px 14px}
+.card .bd>p:last-child{margin-bottom:0}
+.card:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
+.tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
+  color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-stroke);
+  border-radius:3px;padding:1px 6px;white-space:nowrap}
+.anch{font-family:var(--mono);font-size:10.5px;color:var(--ink-softer);border:0;margin-left:auto}
+.anch:hover{color:var(--accent)}
+
+pre{background:var(--code-bg);color:var(--code-fg);font-family:var(--mono);font-size:12.5px;
+  line-height:1.7;padding:13px 15px;border-radius:5px;overflow-x:auto;margin:12px 0;
+  border:1px solid var(--rule)}
+.c{color:var(--code-dim)} .k{color:var(--t-key)} .s{color:var(--t-str)}
+.n{color:var(--t-num)} .f{color:var(--t-fn)} .ok{color:var(--t-ok)}
+.bad{color:var(--t-key);font-weight:600}
+
+details.ex{border:1px solid var(--rule);border-radius:5px;margin:12px 0;background:var(--bg-2)}
+details.ex>summary{cursor:pointer;list-style:none;padding:8px 13px;font-family:var(--mono);
+  font-size:11.5px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:10px;
+  align-items:center;min-height:44px}
+details.ex>summary::-webkit-details-marker{display:none}
+details.ex>summary::after{content:"+";color:var(--ink-softer)}
+details.ex[open]>summary::after{content:"\2212"}
+details.ex[open]>summary{border-bottom:1px solid var(--rule)}
+details.ex .bd{padding:2px 13px 12px}
+details.ex .bd pre{margin:10px 0 0}
+
+.scroll{overflow-x:auto}
+table{border-collapse:collapse;width:100%;font-size:13px;margin:0}
+th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--rule-soft)}
+th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
+  color:var(--ink-softer);font-weight:500;border-bottom:1px solid var(--rule)}
+td.num{font-family:var(--mono);white-space:nowrap}
+tr.hot td{color:var(--accent);font-weight:500}
+
+@media (max-width:900px){
+  :root{--rail:216px}
+  .main{padding:24px 22px 36px}
+  .brow{grid-template-columns:104px minmax(0,1fr) 40px}
+}
+@media (max-width:760px){
+  .shell{grid-template-columns:1fr}
+  .rail{position:static;height:auto;overflow:visible;border-right:0;
+    border-bottom:1px solid var(--rule);padding:16px 20px;gap:14px}
+  .nums{grid-template-columns:repeat(3,1fr)}
+  .nums .t{padding:7px 9px}
+  .nums .v{font-size:17px}
+  .mrows{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
+  .mrows div{padding:5px 0}
+  .rfoot{margin-top:4px;padding-top:9px}
+  .brand .crumb{font-size:10.5px}
+  .main{padding:22px 20px 34px}
+  .row{grid-template-columns:minmax(0,1fr) auto;gap:4px 9px;padding:10px 12px}
+  .ph{grid-row:1;grid-column:1;justify-self:start;padding:2px 7px}
+  .row .g{grid-row:1;grid-column:2;align-self:center;font-size:10.5px}
+  .row .t{grid-row:2;grid-column:1/-1}
+  .tabnav a{padding:9px 9px;font-size:11.5px;gap:5px}
+  .brow{grid-template-columns:88px minmax(0,1fr) 34px;font-size:11px;gap:8px}
+}
+@media (max-width:420px){
+  .nums .v{font-size:16px}
+  .nums .l{font-size:8.5px;letter-spacing:.04em}
+  .mrows{gap:0 10px}
+}
+</style>
+</head>
+<body>
+<div class="shell">
+
+  <aside class="rail">
+    <div class="brand">
+      <b>SLOT_PROJECT</b>
+      <span class="crumb">SLOT_CRUMB</span>
+    </div>
+
+    <div>
+      <div class="rlab">session</div>
+      <!-- SLOT: 4-6 measured numbers. Every one from the transcript, never estimated.
+           Omit a tile rather than guess. Mark at most one .hot. -->
+      <div class="nums">
+        <div class="t"><div class="v">SLOT_N</div><div class="l">messages</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">tool calls</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">thinking</div></div>
+        <div class="t"><div class="v">SLOT_N<small>h</small></div><div class="l">elapsed</div></div>
+        <div class="t hot"><div class="v">SLOT_N<small>MB</small></div><div class="l">transcript</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">SLOT_LABEL</div></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="rlab">context</div>
+      <!-- SLOT: agent and model are required. Add window/repo/outcome when known. -->
+      <div class="mrows">
+        <div><k>agent</k><v>SLOT_AGENT</v></div>
+        <div><k>model</k><v>SLOT_MODEL</v></div>
+        <div><k>window</k><v>SLOT_WINDOW</v></div>
+        <div><k>repo</k><v>SLOT_REPO</v></div>
+      </div>
+    </div>
+
+    <div class="rfoot">
+      pattern: session-explainer<br>
+      published via htmlbin.dev
+    </div>
+  </aside>
+
+  <main class="main">
+
+    <h1>SLOT_TITLE</h1>
+    <!-- SLOT: lede. One or two sentences. State the outcome, not the journey. -->
+    <p class="sub">SLOT_LEDE</p>
+
+    <div class="klab">what this session taught</div>
+    <!-- SLOT: 2-4 transferable lessons, 150 words total across all of them.
+         Each is a plain sentence. No bold lead-in labels. No em dashes.
+         A fact about the artifact (file size, PR count) is not a lesson. -->
+    <div class="keys"><ul>
+      <li>SLOT_INSIGHT</li>
+      <li>SLOT_INSIGHT</li>
+      <li>SLOT_INSIGHT</li>
+    </ul></div>
+
+    <div class="tabs">
+      <div class="tabnav">
+        <a class="h" href="#p1">Highlights <span class="n">SLOT_N</span></a>
+        <a class="d" href="#p2">Dead ends <span class="n">SLOT_N</span></a>
+      </div>
+
+      <div class="panels">
+        <div class="panel" id="p1">
+          <!-- SLOT: timeline. One line per step, 8-16 rows.
+               Phase words: research / measure / decide / build / verify / ship
+               Failure words (.kill): killed / blocked / caught
+               A row with a matching card MUST be <a class="row" href="#dead-N">
+               and its gutter MUST read "dead-N →". Rows without a card stay <div>. -->
+          <div class="tl">
+            <div class="row"><span class="ph">research</span><span class="t">SLOT_STEP</span><span class="g">SLOT_GUTTER</span></div>
+            <a class="row" href="#dead-1"><span class="ph kill">killed</span><span class="t">SLOT_STEP</span><span class="g">dead-1 &rarr;</span></a>
+            <div class="row"><span class="ph">ship</span><span class="t">SLOT_STEP</span><span class="g">SLOT_GUTTER</span></div>
+          </div>
+
+          <!-- SLOT (optional): one measured distribution. Single hue, direct labels,
+               title= on each row. Omit entirely if you have nothing measured. -->
+          <figure>
+            <figcaption>SLOT_CAPTION</figcaption>
+            <div class="bars">
+              <div class="brow" title="SLOT_TOOLTIP"><span class="nm">SLOT_NAME</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="vv">SLOT_N</span></div>
+            </div>
+          </figure>
+        </div>
+
+        <div class="panel" id="p2">
+          <!-- SLOT: one .card per dead end, id="dead-N" matching the timeline hrefs.
+               Tag words: killed / blocked / caught in review.
+               Say what was tried, what killed it, what it cost. Raw excerpts go in
+               details.ex, redacted per the pattern's redaction floor. -->
+          <div class="card" id="dead-1">
+            <div class="hd"><span class="tag">killed</span><h3>SLOT_DEAD_END_TITLE</h3><a class="anch" href="#dead-1">#dead-1</a></div>
+            <div class="bd">
+              <p>SLOT_WHAT_HAPPENED</p>
+              <details class="ex"><summary><span>SLOT_EXCERPT_LABEL</span></summary><div class="bd">
+<pre><span class="c"># SLOT: redacted excerpt. Repo-relative paths only.</span>
+SLOT_EXCERPT</pre>
+              </div></details>
+            </div>
+          </div>
+
+          <h2>What I'd do differently</h2>
+          <!-- SLOT: 2-4 lesson rows, each pointing back at the card that earned it. -->
+          <div class="tl">
+            <div class="row"><span class="ph">lesson</span><span class="t">SLOT_LESSON</span><span class="g">#dead-1</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</div>
+</body>
+</html>
diff --git a/scripts/agent-e2e.sh b/scripts/agent-e2e.sh
index e0bb275..666a7a0 100755
--- a/scripts/agent-e2e.sh
+++ b/scripts/agent-e2e.sh
@@ -79,12 +79,12 @@ curl -s "$BASE/.well-known/patterns/index.json" -o "$TMP/patterns.json"
 jq -e . < "$TMP/patterns.json" > /dev/null \
   && ok "patterns/index.json is valid JSON" \
   || fail "patterns/index.json valid" "parse error"
-assert_json "$TMP/patterns.json" '.patterns | length' '3' "manifest lists three starter patterns"
+assert_json "$TMP/patterns.json" '.patterns | length' '4' "manifest lists four starter patterns"
 
 CT_PJ=$(curl -s -o /dev/null -w "%{content_type}" "$BASE/.well-known/patterns/index.json")
 assert_contains "$CT_PJ" "application/json" "patterns/index.json served as application/json"
 
-for name in pr-explainer summary-roundup plan-spec-explainer; do
+for name in pr-explainer summary-roundup plan-spec-explainer session-explainer; do
   assert_json "$TMP/patterns.json" \
     "[.patterns[] | select(.name==\"$name\")] | length" '1' \
     "manifest includes $name"
@@ -106,6 +106,33 @@ for name in pr-explainer summary-roundup plan-spec-explainer; do
     || fail "$name.md name" "missing"
 done
 
+# Prescriptive patterns ship a reference skeleton beside the .md. The index must
+# advertise it, and the structure the pattern mandates must actually be in it —
+# an agent that copies a skeleton drifts far less than one authoring from prose.
+assert_json "$TMP/patterns.json" \
+  '.patterns[] | select(.name=="session-explainer") | (.template_url | endswith("/.well-known/patterns/session-explainer.template.html"))' \
+  'true' "session-explainer advertises a template_url"
+
+TPL_URL="$BASE/.well-known/patterns/session-explainer.template.html"
+CT_TPL=$(curl -s -o /dev/null -w "%{content_type}" "$TPL_URL")
+assert_contains "$CT_TPL" "text/html" "template served as text/html"
+curl -s "$TPL_URL" -o "$TMP/session-template.html"
+for landmark in 'class="rail"' 'id="p1"' 'id="p2"' 'id="dead-1"' 'BRAND TOKENS' 'STRUCTURE'; do
+  grep -q "$landmark" "$TMP/session-template.html" \
+    && ok "template contains $landmark" \
+    || fail "template $landmark" "missing"
+done
+# The pattern forbids JS; the skeleton must not smuggle any in.
+if grep -q "<script" "$TMP/session-template.html"; then
+  fail "template script tags" "found <script>"
+else
+  ok "template ships zero script tags"
+fi
+
+# A template filename that belongs to no pattern is still a canonical 404
+NF_TPL=$(curl -s -o /dev/null -w "%{http_code}" "$BASE/.well-known/patterns/nope.template.html")
+assert_eq "$NF_TPL" "404" "unknown template → 404"
+
 # Unknown pattern → canonical 404 error shape, not an HTML 404
 NF_PC=$(curl -s -o /dev/null -w "%{http_code}" "$BASE/.well-known/patterns/does-not-exist.md")
 assert_eq "$NF_PC" "404" "unknown pattern → 404"
@@ -123,6 +150,16 @@ grep -q "\\./\\.htmlbin/patterns/" "$TMP/skill.md" \
 grep -q "~/.config/htmlbin/patterns/" "$TMP/skill.md" \
   && ok "SKILL.md documents the machine-global patterns path" \
   || fail "skill global path" "missing"
+
+# Every catalog pattern must be named in SKILL.md. The skill teaches the
+# convention, but an agent that skims it without fetching index.json still
+# needs to know what's on offer — a new pattern that lands in the catalog
+# and never reaches the skill is invisible to those agents.
+for name in $(jq -r '.patterns[].name' < "$TMP/patterns.json"); do
+  grep -q "\`$name\`" "$TMP/skill.md" \
+    && ok "SKILL.md names $name" \
+    || fail "skill names $name" "not in SKILL.md"
+done
 grep -q "^## Quality floor" "$TMP/skill.md" \
   && ok "SKILL.md documents the quality floor" \
   || fail "skill quality floor" "missing"
diff --git a/skills/htmlbin/SKILL.md b/skills/htmlbin/SKILL.md
index 5d00e99..8314246 100644
--- a/skills/htmlbin/SKILL.md
+++ b/skills/htmlbin/SKILL.md
@@ -525,7 +525,7 @@ Drops should look like they belong to the human publishing them, not like a gene
 
 ## Patterns — local first, official as fallback
 
-Common drop kinds (PR explainers, summary roundups, plan/spec writeups, …) ship as small markdown files anyone can author. Each pattern names triggers, a content checklist, layout directions, and a "don't" list. Read patterns to decide *structure*; use brand sensing (above) to decide *look*.
+Common drop kinds (PR explainers, summary roundups, plan/spec writeups, session explainers, …) ship as small markdown files anyone can author. Each pattern names triggers, a content checklist, layout directions, and a "don't" list. Read patterns to decide *structure*; use brand sensing (above) to decide *look*.
 
 **Where patterns live.** Resolve in this order — first match wins per pattern name:
 
@@ -534,6 +534,8 @@ Common drop kinds (PR explainers, summary roundups, plan/spec writeups, …) shi
 3. **Official catalog** — fetch from `https://htmlbin.dev/.well-known/patterns/index.json` for the list, or `https://htmlbin.dev/.well-known/patterns/<name>.md` for a specific one. Cache once per session.
 4. **No pattern at all** — freestyle within the quality floor. Always valid; patterns are starting floors, not requirements.
 
+**The official catalog today** — `pr-explainer` (a pull request, merge, or diff), `summary-roundup` (discussion threads, weekly status, incident timelines), `plan-spec-explainer` (a plan, spec, or design document), `session-explainer` (an agent session — the problem, the approach, the dead ends). Treat `index.json` as authoritative rather than this list: the catalog can grow between skill revisions.
+
 **Pattern file schema.** YAML front matter + markdown body. Authors write these in any text editor; no tooling required.
 
 ```markdown
@@ -557,6 +559,8 @@ brand_sensing: true
 
 **Picking a pattern.** Match the human's request against each installed pattern's `triggers` (case-insensitive substring or near-paraphrase). On multiple matches: project-local beats machine-global beats official; more-specific trigger beats less-specific. On no match: freestyle.
 
+**Prescriptive patterns.** Most patterns offer layout choices. A few fix the structure instead, because comparability across drops matters more than variety — those carry `template: <name>.template.html` in their front matter, and the catalog index exposes a `template_url` beside the usual `url`. Fetch that skeleton and fill its `SLOT_*` placeholders rather than authoring a layout: it is the pattern's structure expressed as working HTML. Such a pattern may also narrow `brand_sensing` (e.g. `brand_scope: colors-only`), meaning adapt the palette and type but leave the structure alone. `session-explainer` is the current example.
+
 **Authoring your own.** Drop a markdown file in `./.htmlbin/patterns/` (project-local) or `~/.config/htmlbin/patterns/` (machine-global). Share by pushing to a gist or repo; another agent installs with `curl <url> > .htmlbin/patterns/<name>.md`.
 
 **Why this shape.** Patterns are guidance the *agent* reads and applies — not server-rendered templates the platform serves. htmlbin's server stays thin; the long tail of drop kinds lives in user-space, where it belongs.
diff --git a/src/index.ts b/src/index.ts
index 8995741..7a780f9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,7 +12,7 @@ import { FAVICON_SVG } from "./views/favicon";
 import { OG_SVG, dropOgSvg } from "./views/og-image";
 import { renderDropOgPng, renderLandingOgPng } from "./views/og-png";
 import { agentSkillsIndex, getSkillContent } from "./skill";
-import { buildPatternIndex, getPatternMd } from "./patterns";
+import { buildPatternIndex, getPatternAsset } from "./patterns";
 import {
   agentCard,
   linkHeader,
@@ -486,11 +486,13 @@ app.on(["GET", "HEAD"], "/.well-known/patterns/index.json", (c) => {
 });
 app.on(["GET", "HEAD"], "/.well-known/patterns/:filename", (c) => {
   const filename = c.req.param("filename");
-  const md = getPatternMd(filename);
-  if (!md) return apiError(c, "not_found", "Pattern not found.", 404);
-  return new Response(md, {
+  // Serves both the pattern markdown and, for prescriptive patterns, the
+  // reference skeleton (<name>.template.html).
+  const asset = getPatternAsset(filename);
+  if (!asset) return apiError(c, "not_found", "Pattern not found.", 404);
+  return new Response(asset.body, {
     headers: {
-      "Content-Type": "text/markdown; charset=utf-8",
+      "Content-Type": asset.contentType,
       "Cache-Control": "public, max-age=300, s-maxage=3600",
     },
   });
diff --git a/src/patterns.ts b/src/patterns.ts
index a78916c..e41cd8d 100644
--- a/src/patterns.ts
+++ b/src/patterns.ts
@@ -205,13 +205,486 @@ Length + structural shape of the source:
 - Include rationale that references internal incidents, customers, or people without the human's explicit OK. Plans often have sensitive context — ask before publishing it.
 `;
 
+const SESSION_EXPLAINER_MD = `---
+name: session-explainer
+description: Explain an agent session — the problem, the approach, the dead ends, and what the thinking actually was.
+triggers:
+  - publish this session
+  - share this trace
+  - share my claude code session
+  - make a page from this transcript
+  - publish my agent session
+  - show my thinking on this
+brand_sensing: true
+brand_scope: colors-only
+template: session-explainer.template.html
+---
+
+# Session explainer
+
+## When to use
+
+When the source is an agent session — a transcript of work with a coding agent. The drop's job is to explain **how the author thought about a problem**, not to replay the conversation. The reader wants the reasoning; the transcript is raw material, not the deliverable.
+
+**When not to use.** If the audience needs unedited proof that the work happened — a grant or accelerator application, an interview artifact, an audit — this pattern is the wrong tool and so is a drop. Those readers want the original file precisely because nobody curated it, and curation is this pattern's whole point. Say so and hand them the raw transcript instead.
+
+Sessions worth publishing also tend to be the long ones, and a long transcript does not fit in a drop. Distilling isn't a stylistic preference here; it's the only thing that fits.
+
+## Start from the template, don't invent a layout
+
+This pattern is **prescriptive**. Unlike the other official patterns it does not offer layout choices, because the structure is what makes these pages comparable to each other.
+
+    curl -s https://htmlbin.dev/.well-known/patterns/session-explainer.template.html
+
+Fill every \`SLOT_*\` placeholder and each \`<!-- SLOT: ... -->\` region. The template's CSS is split by a marked line: adapt the **BRAND TOKENS** block, treat everything under **STRUCTURE** as fixed.
+
+If you cannot fetch the template, build the same structure from the requirements below. Do not substitute a different one.
+
+## Required structure
+
+All five are mandatory. A page missing any of them is not this pattern.
+
+1. **A sticky left rail** (\`.rail\`) holding the session's numbers and context. It stays on screen while the content column scrolls, so the reader keeps the session's identity while reading any one part.
+2. **Two tabs** — \`Highlights\` (\`#p1\`, default) and \`Dead ends\` (\`#p2\`). Driven by \`:target\` and \`:has()\`, never JavaScript.
+3. **A compressed timeline** in Highlights. One line per step. This is the index to the whole session.
+4. **One card per dead end** in the second tab, \`id="dead-N"\`.
+5. **Deep links from timeline to cards.** A timeline row that has a card is an \`<a href="#dead-N">\` whose gutter reads \`dead-N →\`. Clicking it switches tab, scrolls to the card, and rings it. Rows without a card stay a \`<div>\` and get a plain gutter label.
+
+## Numbers must be measured
+
+Every value in the rail comes from the transcript. Count it; never estimate, never round for effect. **Omit a tile rather than guess** — a wrong number is worse than a missing one. Mark at most one tile \`.hot\`, and only when it carries the page's central constraint.
+
+Required in the context block: \`agent\`, \`model\`. Add \`window\`, \`repo\`, \`outcome\` when known.
+
+## Hard limits
+
+| Thing | Limit |
+|---|---|
+| Insights | 2–4 items, **150 words total** |
+| Timeline rows | 8–16, one line each |
+| Dead-end cards | 2–6 |
+| Lede | 2 sentences |
+| \`<script>\` tags | **0** |
+| Page weight | under 500 KB |
+
+## Insights carry the page
+
+The block under "what this session taught" is the reason someone reads this. It holds **transferable lessons** — what the next person should do differently.
+
+A fact about the artifact is not a lesson. "The transcript is 4 MB", "two PRs were unplanned", "the suite has 136 checks" are trivia; they belong in the rail or nowhere. A lesson generalizes past this session.
+
+Write them as plain sentences. No bold lead-in labels, no em dashes, no aphorisms ("X is not a Y", "X is the Y of Z") — state the concrete claim instead.
+
+## Dead ends are the content
+
+Most of the value is in what didn't work. For each: what was tried, what killed it, what it cost. Include the moment a conclusion flipped, and be specific about the wrong version — a reader learns from the reasoning error, not from the tidy ending.
+
+Do not sanitize the author's voice, including the parts where they were wrong.
+
+## Redaction floor
+
+Session transcripts are the most credential-dense artifact on a developer's machine. Live API keys have been found in published session logs more than once. Every excerpt has to clear this list:
+
+- **Scan for secrets.** API keys, bearer tokens, \`.env\` contents, database URLs, connection strings, signed URLs, private hostnames. High-entropy strings are guilty until proven innocent.
+- **Strip absolute home paths.** \`/Users/<name>/…\` and \`/home/<name>/…\` leak identity and local layout. Rewrite as repo-relative.
+- **Never publish an excerpt the human hasn't seen.** Sessions routinely contain customer names, unshipped work, internal URLs, and third-party code.
+- **Default to a passcode for anything team-internal** (\`POST /api/drops/:slug/passcode\`). Be honest that it's a share gate, not encryption — the HTML is stored unencrypted.
+- **If the session touched credentials at all, say so** and tell the human to rotate them, whether or not the value reached the drop.
+
+## Brand sensing is colors only
+
+\`brand_scope: colors-only\` — narrower than other patterns. Apply the user's palette and type to the BRAND TOKENS block. Keep **one** accent; failures and the active tab are the only elements that wear it. Do not add a second hue to color-code phases: the phase label carries the meaning, and a multi-hue badge set needs a validated categorical palette.
+
+Structure does not adapt to brand. A session explainer should be recognizable as one.
+
+## Conformance check
+
+Before publishing, verify each of these against the rendered page. Every one is checkable, so check it rather than assuming.
+
+**One tab is always hidden, and a hidden panel hides its own defects.** Elements inside \`display: none\` report zero width and height, so an overflow or a small tap target in the inactive tab measures as passing. Run the layout checks twice, once per tab, or skip zero-size elements explicitly. A check that silently measures nothing is worse than no check.
+
+- \`.rail\` exists and is \`position: sticky\` above 760px
+- Both \`#p1\` and \`#p2\` exist; \`#p1\` shows by default
+- \`document.querySelectorAll('script').length === 0\`
+- Every \`a.row[href^="#dead-"]\` resolves to a card with that \`id\`
+- Every \`.card[id]\` is reachable from a timeline row
+- Clicking a timeline link switches tab, scrolls to the card, and rings it
+- Insight text is 150 words or fewer
+- At 360px, **with each tab shown in turn**: no horizontal scroll, and no element wider than the viewport outside an \`overflow-x\` container
+- Every visible \`summary\` and \`.tabnav a\` is at least 44px tall
+- No \`/Users/\` or \`/home/\` string anywhere in the document
+- Dark mode is defined with chosen steps, not an inversion
+
+## Don't
+
+- Dump the raw transcript. It won't fit, and a wall of turns isn't a thing anyone reads.
+- Include latency, token counts, or cost per step. Those are pipeline-debugging numbers borrowed from observability tools; this reader is here for the thinking.
+- Render a span tree or a nested waterfall. A coding session is essentially linear.
+- Label the second tab "Full trace". It holds curated cards, not the trace. Promising a trace and showing four cards is a broken promise.
+- Claim the page is complete, unedited, or tamper-evident. It's a curated account. If that distinction matters to the reader, point them at the source file.
+- Quote a teammate, a customer, or a third party from the transcript without the human's explicit OK.
+`;
+
+const SESSION_EXPLAINER_TEMPLATE = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SLOT_TITLE - SLOT_SLUG - htmlbin.dev</title>
+<!--
+  session-explainer reference skeleton.
+
+  Fill every SLOT_* placeholder and the <!-- SLOT: ... --> regions.
+  Adapt the BRAND TOKENS block below to the user's project.
+  Do not restructure anything under STRUCTURE: the rail, the two tabs,
+  the timeline, and the cards are required by the pattern.
+
+  Fetch the pattern itself for the rules and limits:
+  https://htmlbin.dev/.well-known/patterns/session-explainer.md
+-->
+<style>
+/* ══════════════════════════════════════════════════════════════════
+   BRAND TOKENS — adapt these. Apply brand sensing here and nowhere else.
+   Keep ONE accent. Failures and the active tab are the only things
+   allowed to wear it.
+   ══════════════════════════════════════════════════════════════════ */
+:root{
+  --bg:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F5F5F5;
+  --ink:#0A0A0A; --ink-2:#171717; --ink-soft:#737373; --ink-softer:#A3A3A3;
+  --rule:#E5E5E5; --rule-soft:#F0F0F0;
+  --accent:#D93025; --accent-bg:#FCE8E6; --accent-stroke:#F4C7C3;
+  --ok:#1F8F4A;
+  --code-bg:#0A0A0A; --code-fg:#E8E8E8; --code-dim:#6E7681;
+  --t-key:#FF7B72; --t-str:#A5D6FF; --t-num:#79C0FF; --t-fn:#D2A8FF; --t-ok:#7EE787;
+  --sans:system-ui,-apple-system,sans-serif;
+  --mono:ui-monospace,"SF Mono",Menlo,monospace;
+  --rail:264px;
+}
+@media (prefers-color-scheme:dark){
+  /* Pick dark steps deliberately. Do not auto-invert. */
+  :root{
+    --bg:#0A0A0A; --bg-2:#121212; --bg-3:#1A1A1A;
+    --ink:#F5F5F5; --ink-2:#E0E0E0; --ink-soft:#9A9A9A; --ink-softer:#6E6E6E;
+    --rule:#242424; --rule-soft:#1A1A1A;
+    --accent:#FF6470; --accent-bg:#2A1113; --accent-stroke:#4A1D21;
+    --ok:#3FB950; --code-bg:#111111;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   STRUCTURE — fixed. Do not edit below this line.
+   ══════════════════════════════════════════════════════════════════ */
+*{box-sizing:border-box}
+html,body{max-width:100vw;overflow-x:clip}
+body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
+  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
+p{overflow-wrap:anywhere;margin:0 0 12px}
+code{font-family:var(--mono);font-size:.87em;overflow-wrap:anywhere;
+  background:var(--bg-3);padding:1px 5px;border-radius:3px}
+a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-stroke)}
+a:hover{border-bottom-color:var(--accent)}
+
+.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);max-width:1240px;margin:0 auto}
+.rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
+  border-right:1px solid var(--rule);background:var(--bg-2);
+  padding:20px 18px;display:flex;flex-direction:column;gap:18px}
+.main{min-width:0;padding:30px 34px 40px}
+
+.brand{font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.9}
+.brand b{color:var(--ink);font-weight:600;display:block;font-size:13px}
+.brand .crumb{color:var(--ink-softer);font-size:11px}
+.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
+  border:1px solid var(--rule);border-radius:3px;padding:3px 8px;
+  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:8px}
+.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
+.rlab{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
+  color:var(--ink-softer);padding-bottom:7px;border-bottom:1px solid var(--rule);margin-bottom:2px}
+
+.nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
+  border:1px solid var(--rule);border-radius:5px;overflow:hidden}
+.nums .t{background:var(--bg);padding:9px 10px}
+.nums .v{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em;
+  line-height:1.15;color:var(--ink)}
+.nums .v small{font-size:11px;color:var(--ink-soft);font-weight:400}
+.nums .l{font-family:var(--mono);font-size:9px;text-transform:uppercase;
+  letter-spacing:.06em;color:var(--ink-softer);margin-top:3px}
+.nums .t.hot .v{color:var(--accent)}
+
+.mrows{font-family:var(--mono);font-size:11px}
+.mrows div{padding:6px 0;border-bottom:1px solid var(--rule-soft)}
+.mrows div:last-child{border-bottom:0}
+.mrows k{display:block;color:var(--ink-softer);font-size:9px;text-transform:uppercase;
+  letter-spacing:.07em;margin-bottom:2px}
+.mrows v{color:var(--ink-2);overflow-wrap:anywhere}
+.rfoot{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--ink-softer);
+  border-top:1px solid var(--rule);padding-top:12px;line-height:1.6}
+
+h1{font-size:clamp(27px,3.4vw,37px);line-height:1.13;letter-spacing:-.028em;
+  margin:0 0 10px;font-weight:600}
+.sub{font-size:17px;color:var(--ink-soft);margin:0 0 24px;max-width:64ch}
+.sub b{color:var(--ink);font-weight:500}
+.klab{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
+  color:var(--ink-softer);margin:0 0 9px}
+.keys{border-left:2px solid var(--accent);padding:2px 0 2px 15px;margin:0 0 6px}
+.keys ul{margin:0;padding-left:17px}
+.keys li{margin:12px 0;font-size:15px;line-height:1.6}
+.keys li:first-child{margin-top:2px}
+h2{font-size:16px;margin:34px 0 12px;font-weight:600;letter-spacing:-.01em;
+  padding-bottom:6px;border-bottom:1px solid var(--rule-soft)}
+h3{font-size:15px;margin:0;font-weight:600}
+
+/* tabs: :target-driven so a highlight row can switch tab AND scroll. No JS. */
+.tabs{margin:28px 0 0}
+.tabnav{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:20px;flex-wrap:wrap}
+.tabnav a{font-family:var(--mono);font-size:12px;padding:9px 13px;cursor:pointer;
+  color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;
+  display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:none}
+.tabnav a:hover{color:var(--ink)}
+.tabnav a .n{background:var(--bg-3);border-radius:9px;padding:1px 6px;font-size:10.5px;
+  color:var(--ink-softer)}
+.panel{display:none}
+#p1{display:block}
+.panels:has(#p2:target) #p1{display:none}
+.panels:has(#p2:target) #p2{display:block}
+.panels:has(.card:target) #p1{display:none}
+.panels:has(.card:target) #p2{display:block}
+.panels:has(#p1:target) #p1{display:block}
+.panels:has(#p1:target) #p2{display:none}
+.tabs:not(:has(#p2:target)):not(:has(.card:target)) .tabnav a.h,
+.tabs:has(#p1:target) .tabnav a.h,
+.tabs:has(#p2:target) .tabnav a.d,
+.tabs:has(.card:target) .tabnav a.d{
+  color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
+.tabs:not(:has(#p2:target)):not(:has(.card:target)) .tabnav a.h .n,
+.tabs:has(#p1:target) .tabnav a.h .n,
+.tabs:has(#p2:target) .tabnav a.d .n,
+.tabs:has(.card:target) .tabnav a.d .n{background:var(--accent-bg);color:var(--accent)}
+.tabs:has(#p1:target) .tabnav a.d,
+.tabs:has(.card:target) .tabnav a.h,
+.tabs:has(#p2:target) .tabnav a.h{
+  color:var(--ink-soft);border-bottom-color:transparent;font-weight:400}
+
+.tl{border:1px solid var(--rule);border-radius:5px;overflow:hidden}
+.row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:baseline;
+  padding:9px 13px;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
+.row:last-child{border-bottom:0}
+.row:hover{background:var(--bg-2)}
+.ph{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
+  color:var(--ink-soft);border:1px solid var(--rule);border-radius:3px;padding:2px 0;
+  text-align:center;background:var(--bg-2)}
+.ph.kill{color:var(--accent);border-color:var(--accent-stroke);background:var(--accent-bg)}
+.row .t{color:var(--ink-2)}
+.row .g{font-family:var(--mono);font-size:11px;color:var(--ink-softer);white-space:nowrap}
+a.row{text-decoration:none;color:inherit;border:0}
+a.row .g{color:var(--accent)}
+a.row:hover{background:var(--bg-2)}
+a.row:hover .t{color:var(--ink)}
+
+figure{margin:24px 0}
+figcaption{font-family:var(--mono);font-size:10.5px;color:var(--ink-softer);
+  text-transform:uppercase;letter-spacing:.07em;margin:0 0 8px}
+.brow{display:grid;grid-template-columns:128px minmax(0,1fr) 44px;gap:10px;align-items:center;
+  padding:3px 0;font-family:var(--mono);font-size:12px}
+.brow .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.track{display:block;background:var(--bg-3);border-radius:3px;height:9px;overflow:hidden}
+.fill{display:block;height:9px;background:var(--accent);border-radius:0 3px 3px 0;min-width:2px}
+.brow .vv{text-align:right;color:var(--ink-soft)}
+
+.card{border:1px solid var(--rule);border-radius:5px;margin:14px 0;overflow:hidden;
+  scroll-margin-top:16px}
+.card>.hd{padding:11px 14px;background:var(--bg-2);border-bottom:1px solid var(--rule);
+  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.card>.bd{padding:13px 14px}
+.card .bd>p:last-child{margin-bottom:0}
+.card:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
+.tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
+  color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-stroke);
+  border-radius:3px;padding:1px 6px;white-space:nowrap}
+.anch{font-family:var(--mono);font-size:10.5px;color:var(--ink-softer);border:0;margin-left:auto}
+.anch:hover{color:var(--accent)}
+
+pre{background:var(--code-bg);color:var(--code-fg);font-family:var(--mono);font-size:12.5px;
+  line-height:1.7;padding:13px 15px;border-radius:5px;overflow-x:auto;margin:12px 0;
+  border:1px solid var(--rule)}
+.c{color:var(--code-dim)} .k{color:var(--t-key)} .s{color:var(--t-str)}
+.n{color:var(--t-num)} .f{color:var(--t-fn)} .ok{color:var(--t-ok)}
+.bad{color:var(--t-key);font-weight:600}
+
+details.ex{border:1px solid var(--rule);border-radius:5px;margin:12px 0;background:var(--bg-2)}
+details.ex>summary{cursor:pointer;list-style:none;padding:8px 13px;font-family:var(--mono);
+  font-size:11.5px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:10px;
+  align-items:center;min-height:44px}
+details.ex>summary::-webkit-details-marker{display:none}
+details.ex>summary::after{content:"+";color:var(--ink-softer)}
+details.ex[open]>summary::after{content:"\\2212"}
+details.ex[open]>summary{border-bottom:1px solid var(--rule)}
+details.ex .bd{padding:2px 13px 12px}
+details.ex .bd pre{margin:10px 0 0}
+
+.scroll{overflow-x:auto}
+table{border-collapse:collapse;width:100%;font-size:13px;margin:0}
+th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--rule-soft)}
+th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
+  color:var(--ink-softer);font-weight:500;border-bottom:1px solid var(--rule)}
+td.num{font-family:var(--mono);white-space:nowrap}
+tr.hot td{color:var(--accent);font-weight:500}
+
+@media (max-width:900px){
+  :root{--rail:216px}
+  .main{padding:24px 22px 36px}
+  .brow{grid-template-columns:104px minmax(0,1fr) 40px}
+}
+@media (max-width:760px){
+  .shell{grid-template-columns:1fr}
+  .rail{position:static;height:auto;overflow:visible;border-right:0;
+    border-bottom:1px solid var(--rule);padding:16px 20px;gap:14px}
+  .nums{grid-template-columns:repeat(3,1fr)}
+  .nums .t{padding:7px 9px}
+  .nums .v{font-size:17px}
+  .mrows{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
+  .mrows div{padding:5px 0}
+  .rfoot{margin-top:4px;padding-top:9px}
+  .brand .crumb{font-size:10.5px}
+  .main{padding:22px 20px 34px}
+  .row{grid-template-columns:minmax(0,1fr) auto;gap:4px 9px;padding:10px 12px}
+  .ph{grid-row:1;grid-column:1;justify-self:start;padding:2px 7px}
+  .row .g{grid-row:1;grid-column:2;align-self:center;font-size:10.5px}
+  .row .t{grid-row:2;grid-column:1/-1}
+  .tabnav a{padding:9px 9px;font-size:11.5px;gap:5px}
+  .brow{grid-template-columns:88px minmax(0,1fr) 34px;font-size:11px;gap:8px}
+}
+@media (max-width:420px){
+  .nums .v{font-size:16px}
+  .nums .l{font-size:8.5px;letter-spacing:.04em}
+  .mrows{gap:0 10px}
+}
+</style>
+</head>
+<body>
+<div class="shell">
+
+  <aside class="rail">
+    <div class="brand">
+      <b>SLOT_PROJECT</b>
+      <span class="crumb">SLOT_CRUMB</span>
+    </div>
+
+    <div>
+      <div class="rlab">session</div>
+      <!-- SLOT: 4-6 measured numbers. Every one from the transcript, never estimated.
+           Omit a tile rather than guess. Mark at most one .hot. -->
+      <div class="nums">
+        <div class="t"><div class="v">SLOT_N</div><div class="l">messages</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">tool calls</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">thinking</div></div>
+        <div class="t"><div class="v">SLOT_N<small>h</small></div><div class="l">elapsed</div></div>
+        <div class="t hot"><div class="v">SLOT_N<small>MB</small></div><div class="l">transcript</div></div>
+        <div class="t"><div class="v">SLOT_N</div><div class="l">SLOT_LABEL</div></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="rlab">context</div>
+      <!-- SLOT: agent and model are required. Add window/repo/outcome when known. -->
+      <div class="mrows">
+        <div><k>agent</k><v>SLOT_AGENT</v></div>
+        <div><k>model</k><v>SLOT_MODEL</v></div>
+        <div><k>window</k><v>SLOT_WINDOW</v></div>
+        <div><k>repo</k><v>SLOT_REPO</v></div>
+      </div>
+    </div>
+
+    <div class="rfoot">
+      pattern: session-explainer<br>
+      published via htmlbin.dev
+    </div>
+  </aside>
+
+  <main class="main">
+
+    <h1>SLOT_TITLE</h1>
+    <!-- SLOT: lede. One or two sentences. State the outcome, not the journey. -->
+    <p class="sub">SLOT_LEDE</p>
+
+    <div class="klab">what this session taught</div>
+    <!-- SLOT: 2-4 transferable lessons, 150 words total across all of them.
+         Each is a plain sentence. No bold lead-in labels. No em dashes.
+         A fact about the artifact (file size, PR count) is not a lesson. -->
+    <div class="keys"><ul>
+      <li>SLOT_INSIGHT</li>
+      <li>SLOT_INSIGHT</li>
+      <li>SLOT_INSIGHT</li>
+    </ul></div>
+
+    <div class="tabs">
+      <div class="tabnav">
+        <a class="h" href="#p1">Highlights <span class="n">SLOT_N</span></a>
+        <a class="d" href="#p2">Dead ends <span class="n">SLOT_N</span></a>
+      </div>
+
+      <div class="panels">
+        <div class="panel" id="p1">
+          <!-- SLOT: timeline. One line per step, 8-16 rows.
+               Phase words: research / measure / decide / build / verify / ship
+               Failure words (.kill): killed / blocked / caught
+               A row with a matching card MUST be <a class="row" href="#dead-N">
+               and its gutter MUST read "dead-N →". Rows without a card stay <div>. -->
+          <div class="tl">
+            <div class="row"><span class="ph">research</span><span class="t">SLOT_STEP</span><span class="g">SLOT_GUTTER</span></div>
+            <a class="row" href="#dead-1"><span class="ph kill">killed</span><span class="t">SLOT_STEP</span><span class="g">dead-1 &rarr;</span></a>
+            <div class="row"><span class="ph">ship</span><span class="t">SLOT_STEP</span><span class="g">SLOT_GUTTER</span></div>
+          </div>
+
+          <!-- SLOT (optional): one measured distribution. Single hue, direct labels,
+               title= on each row. Omit entirely if you have nothing measured. -->
+          <figure>
+            <figcaption>SLOT_CAPTION</figcaption>
+            <div class="bars">
+              <div class="brow" title="SLOT_TOOLTIP"><span class="nm">SLOT_NAME</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="vv">SLOT_N</span></div>
+            </div>
+          </figure>
+        </div>
+
+        <div class="panel" id="p2">
+          <!-- SLOT: one .card per dead end, id="dead-N" matching the timeline hrefs.
+               Tag words: killed / blocked / caught in review.
+               Say what was tried, what killed it, what it cost. Raw excerpts go in
+               details.ex, redacted per the pattern's redaction floor. -->
+          <div class="card" id="dead-1">
+            <div class="hd"><span class="tag">killed</span><h3>SLOT_DEAD_END_TITLE</h3><a class="anch" href="#dead-1">#dead-1</a></div>
+            <div class="bd">
+              <p>SLOT_WHAT_HAPPENED</p>
+              <details class="ex"><summary><span>SLOT_EXCERPT_LABEL</span></summary><div class="bd">
+<pre><span class="c"># SLOT: redacted excerpt. Repo-relative paths only.</span>
+SLOT_EXCERPT</pre>
+              </div></details>
+            </div>
+          </div>
+
+          <h2>What I'd do differently</h2>
+          <!-- SLOT: 2-4 lesson rows, each pointing back at the card that earned it. -->
+          <div class="tl">
+            <div class="row"><span class="ph">lesson</span><span class="t">SLOT_LESSON</span><span class="g">#dead-1</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</div>
+</body>
+</html>
+`;
+
 type PatternMeta = {
   name: string;
   description: string;
   triggers: readonly string[];
+  /** Filename of an optional reference skeleton served beside the .md. */
+  template?: string;
 };
 
-const PATTERNS: ReadonlyArray<{ meta: PatternMeta; md: string }> = [
+const PATTERNS: ReadonlyArray<{ meta: PatternMeta; md: string; template?: string }> = [
   {
     meta: {
       name: "pr-explainer",
@@ -259,6 +732,24 @@ const PATTERNS: ReadonlyArray<{ meta: PatternMeta; md: string }> = [
     },
     md: PLAN_SPEC_EXPLAINER_MD,
   },
+  {
+    meta: {
+      name: "session-explainer",
+      description:
+        "Explain an agent session — the problem, the approach, the dead ends, and what the thinking actually was.",
+      triggers: [
+        "publish this session",
+        "share this trace",
+        "share my claude code session",
+        "make a page from this transcript",
+        "publish my agent session",
+        "show my thinking on this",
+      ],
+      template: "session-explainer.template.html",
+    },
+    md: SESSION_EXPLAINER_MD,
+    template: SESSION_EXPLAINER_TEMPLATE,
+  },
 ];
 
 export type PatternIndex = {
@@ -268,6 +759,8 @@ export type PatternIndex = {
     description: string;
     triggers: readonly string[];
     url: string;
+    /** Present only for prescriptive patterns that ship a reference skeleton. */
+    template_url?: string;
   }>;
 };
 
@@ -282,6 +775,9 @@ export function buildPatternIndex(publicUrl: string): PatternIndex {
       description: p.meta.description,
       triggers: p.meta.triggers,
       url: `${host}/.well-known/patterns/${p.meta.name}.md`,
+      ...(p.meta.template
+        ? { template_url: `${host}/.well-known/patterns/${p.meta.template}` }
+        : {}),
     })),
   };
 }
@@ -296,6 +792,24 @@ export function getPatternMd(filename: string): string | null {
   return match ? match.md : null;
 }
 
+// Resolves any file served under /.well-known/patterns/ — the pattern markdown
+// and, for prescriptive patterns, a reference skeleton (`<name>.template.html`).
+// Returns the body plus the content type so the route doesn't have to guess.
+// Null for anything unknown, which the caller turns into a canonical 404.
+export function getPatternAsset(
+  filename: string,
+): { body: string; contentType: string } | null {
+  const md = getPatternMd(filename);
+  if (md) return { body: md, contentType: "text/markdown; charset=utf-8" };
+
+  const match = PATTERNS.find(
+    (p) => p.template && p.meta.template === filename,
+  );
+  return match?.template
+    ? { body: match.template, contentType: "text/html; charset=utf-8" }
+    : null;
+}
+
 // Names only — useful for the e2e test and the future CLI patterns subcommand.
 export function listPatternNames(): string[] {
   return PATTERNS.map((p) => p.meta.name);
diff --git a/src/skill.ts b/src/skill.ts
index e201355..f7e0910 100644
--- a/src/skill.ts
+++ b/src/skill.ts
@@ -524,7 +524,7 @@ Drops should look like they belong to the human publishing them, not like a gene
 
 ## Patterns — local first, official as fallback
 
-Common drop kinds (PR explainers, summary roundups, plan/spec writeups, …) ship as small markdown files anyone can author. Each pattern names triggers, a content checklist, layout directions, and a "don't" list. Read patterns to decide *structure*; use brand sensing (above) to decide *look*.
+Common drop kinds (PR explainers, summary roundups, plan/spec writeups, session explainers, …) ship as small markdown files anyone can author. Each pattern names triggers, a content checklist, layout directions, and a "don't" list. Read patterns to decide *structure*; use brand sensing (above) to decide *look*.
 
 **Where patterns live.** Resolve in this order — first match wins per pattern name:
 
@@ -533,6 +533,8 @@ Common drop kinds (PR explainers, summary roundups, plan/spec writeups, …) shi
 3. **Official catalog** — fetch from \`https://htmlbin.dev/.well-known/patterns/index.json\` for the list, or \`https://htmlbin.dev/.well-known/patterns/<name>.md\` for a specific one. Cache once per session.
 4. **No pattern at all** — freestyle within the quality floor. Always valid; patterns are starting floors, not requirements.
 
+**The official catalog today** — \`pr-explainer\` (a pull request, merge, or diff), \`summary-roundup\` (discussion threads, weekly status, incident timelines), \`plan-spec-explainer\` (a plan, spec, or design document), \`session-explainer\` (an agent session — the problem, the approach, the dead ends). Treat \`index.json\` as authoritative rather than this list: the catalog can grow between skill revisions.
+
 **Pattern file schema.** YAML front matter + markdown body. Authors write these in any text editor; no tooling required.
 
 \`\`\`markdown
@@ -556,6 +558,8 @@ brand_sensing: true
 
 **Picking a pattern.** Match the human's request against each installed pattern's \`triggers\` (case-insensitive substring or near-paraphrase). On multiple matches: project-local beats machine-global beats official; more-specific trigger beats less-specific. On no match: freestyle.
 
+**Prescriptive patterns.** Most patterns offer layout choices. A few fix the structure instead, because comparability across drops matters more than variety — those carry \`template: <name>.template.html\` in their front matter, and the catalog index exposes a \`template_url\` beside the usual \`url\`. Fetch that skeleton and fill its \`SLOT_*\` placeholders rather than authoring a layout: it is the pattern's structure expressed as working HTML. Such a pattern may also narrow \`brand_sensing\` (e.g. \`brand_scope: colors-only\`), meaning adapt the palette and type but leave the structure alone. \`session-explainer\` is the current example.
+
 **Authoring your own.** Drop a markdown file in \`./.htmlbin/patterns/\` (project-local) or \`~/.config/htmlbin/patterns/\` (machine-global). Share by pushing to a gist or repo; another agent installs with \`curl <url> > .htmlbin/patterns/<name>.md\`.
 
 **Why this shape.** Patterns are guidance the *agent* reads and applies — not server-rendered templates the platform serves. htmlbin's server stays thin; the long tail of drop kinds lives in user-space, where it belongs.