Add Typst path for blog-post skill thumbnails

.claude/skills/blog-post/SKILL.md

@@ -59,7 +59,9 @@ Guest authors use structured form with `name:` and optional `url:`.
 `Tip`, `Extensions`, `Tables`, `Teaching`, `Jupyter`.
 
 **image / image-alt**: `thumbnail.png` preferred. `image-alt` is mandatory.
-See `references/thumbnail-guide.md` for dimensions, visual style, and design patterns.
+See `references/thumbnail-guide.md` for the decision between the two production
+paths (Typst, or HTML+SVG) and the HTML+SVG flow. For the Typst path, see
+`references/typst-thumbnail.md`.
 
 **Optional**: `lightbox: true` (many screenshots), `draft: true` (while developing).
 Do not use `subtitle:` (phased out after 2023).
@@ -139,7 +141,16 @@ Use sparingly: `.callout-tip` for post origin context, `.callout-warning` for ca
 4. **Draft body** following type-specific structure
 5. **Add images** with `fig-alt=` on every one
 6. **Link to docs** for every feature mentioned
-7. **Create thumbnail** (or note one is needed)
+7. **Create thumbnail**:
+   1. Read `references/thumbnail-guide.md` § Choosing your path
+   2. **Always present both options as a question to the user**, even if one
+      path is the obvious recommendation. State the recommendation with
+      reasoning (logos? programmatic diagram? text-only? release post?), then
+      explicitly ask the user to confirm or override before proceeding. Never
+      silently pick.
+   3. Read the chosen path's reference and execute
+      (`references/typst-thumbnail.md` for Typst, rest of `thumbnail-guide.md`
+      for HTML+SVG)
 8. **Review**: direct opener? code blocks fenced with language? all images alt-texted?
    docs links present? closing matches type convention? categories correct?
 

.claude/skills/blog-post/assets/thumbnail-diagram.typ

@@ -0,0 +1,56 @@
+#import "@preview/cetz:0.3.4"
+
+#set page(
+  width: 1200pt,
+  height: 630pt,
+  margin: 50pt,
+  fill: rgb("#447099"),
+)
+
+#set text(
+  fill: white,
+  font: ("Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", "DejaVu Sans"),
+)
+
+#align(center)[
+  #stack(
+    dir: ltr,
+    spacing: 16pt,
+    align(horizon)[#image("quarto-logo-trademark-light.svg", height: 90pt)],
+    align(horizon)[#text(baseline: -8pt, size: 90pt, weight: "bold")[2]],
+  )
+
+  #v(10pt)
+  #text(size: 56pt, weight: "bold")[Replace this title]
+
+  #v(10pt)
+
+  #cetz.canvas(length: 45pt, {
+    import cetz.draw: *
+
+    // Ellipse node — white fill, dark blue label.
+    let node(pos, label, name) = {
+      let (x, y) = pos
+      circle(
+        (x, y),
+        radius: (1.4, 0.55),
+        fill: white,
+        stroke: white,
+        name: name,
+      )
+      content((x, y), text(fill: rgb("#1f3a52"), weight: "bold", size: 20pt)[#label])
+    }
+
+    // Edge — white line connecting two named nodes.
+    let edge(a, b) = {
+      line(a, b, stroke: (paint: white, thickness: 1.5pt))
+    }
+
+    // Replace the placeholder graph below with your own nodes + edges.
+    node((4, 2), "Root", "root")
+    node((1, 0), "A", "a")
+    node((7, 0), "B", "b")
+    edge("root", "a")
+    edge("root", "b")
+  })
+]

.claude/skills/blog-post/assets/thumbnail-text.typ

@@ -0,0 +1,26 @@
+#set page(
+  width: 1200pt,
+  height: 630pt,
+  margin: 50pt,
+  fill: rgb("#447099"),
+)
+
+#set text(
+  fill: white,
+  font: ("Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", "DejaVu Sans"),
+)
+
+#align(center + horizon)[
+  #stack(
+    dir: ltr,
+    spacing: 16pt,
+    align(horizon)[#image("quarto-logo-trademark-light.svg", height: 90pt)],
+    align(horizon)[#text(baseline: -8pt, size: 90pt, weight: "bold")[2]],
+  )
+
+  #v(20pt)
+  #text(size: 56pt, weight: "bold")[Replace this title]
+
+  #v(10pt)
+  #text(size: 32pt)[Replace this subtitle (optional)]
+]

.claude/skills/blog-post/references/thumbnail-guide.md

@@ -2,6 +2,25 @@
 
 Design conventions for blog post listing card images, derived from 40 existing posts.
 
+## Choosing your path
+
+Two production paths exist for thumbnails. Pick before you start designing.
+
+| Path | Use when | Avoid when |
+|------|----------|------------|
+| **Typst** ([`typst-thumbnail.md`](typst-thumbnail.md)) | Text-only thumbnails, programmatic diagrams (trees, graphs, flow), version/title cards | Design uses 3rd-party logos/icons with their own colors |
+| **HTML+SVG** (rest of this guide) | Icon compositions with 3rd-party SVGs, photographic content, complex CSS-only layouts | Pure text or programmatic diagrams (Typst is faster) |
+
+> **Release posts default to HTML+SVG.** The release thumbnail template (steel
+> blue + Quarto logo + version + small thematic emoji) is established convention
+> from 1.4 through current. Switching to Typst for a release is a stylistic
+> choice — confirm with the team before deviating. New release posts that match
+> the template should reuse the existing HTML+SVG flow so all release thumbnails
+> stay visually consistent.
+
+For Typst, see [`typst-thumbnail.md`](typst-thumbnail.md). The rest of this
+guide covers the HTML+SVG path.
+
 ## Dimensions and Format
 
 - **Size**: 1200x630 px (Open Graph / social card standard)
@@ -72,7 +91,7 @@ Use Posit conference brand templates rather than the Quarto steel blue:
 Use the partner's own logo on a white or neutral background (e.g., Hugging Face logo,
 Confluence logo). No Quarto branding needed — the partner identity is the visual.
 
-## Creating Thumbnails
+## Creating Thumbnails (HTML+SVG path)
 
 ### Prerequisites