preview_cardlisted

Compose a finished run's social SHARE CARD (the chart background + dark scrim + hero headline) and rasterize it to PNG so it can be eyeballed without opening the report GUI in a browser. Use it to check the thing the GUI's client-side PNG actually ships — most importantly, whether the chart lines survive the translucent scrim (a scrim dark enough for the light headline can crush the dark chart lines below the WCAG 1.4.11 3:1 floor, which renders as a near-blank card). Reads a run's summary.json + charts/tokens_saved.bg.svg; writes charts/share_card.svg (always) and charts/share_card.png (best-effort raster).
zapgun-ai/clawback · ★ 2 · Code & Development · score 63

Install: claude install-skill zapgun-ai/clawback

# clawback share-card preview Run `.skills/scripts/preview_card.sh` from the project root. It composes the exact card the report GUI would let a user download/post for a run, so you can SEE it without driving the browser. ```bash .skills/scripts/preview_card.sh runs/<run> # -> charts/share_card.{svg,png} .skills/scripts/preview_card.sh runs/<run> --out /tmp # write the pair elsewhere ``` ## What it does 1. `benchmark/bin/preview_card.js --in <run>` reads `summary.json` (→ `deriveHeroModel`, the same hero logic the GUI uses) and the bare chart `charts/tokens_saved.bg.svg`, encodes the chart as a `data:` URL exactly as the GUI does, and writes the composed **`charts/share_card.svg`** (chart background → translucent dark scrim → hero headline/sub/tagline). 2. The wrapper then rasterizes that SVG to **`charts/share_card.png`**, preferring headless Google Chrome (true 1200×630, renders the nested chart), falling back to macOS `qlmanage` Quick Look (offline, but pads to a square — the card is the **top 630px**; the white strip below is padding). If neither is present it leaves just the SVG with a note to open it in a browser. ## Why SVG, then a best-effort PNG The shipped share PNG is rasterized **browser-side** from this same SVG (`share_card.js` `svgToPngBlob`, via canvas). Adding a Node rasterizer would pull a native dependency the product avoids — so the SVG is the source of truth and the PNG here is only a convenience for eyeballing. If