Run any Skill in Manus with one click

preview-card

Stars4

Forks0

UpdatedJune 10, 2026 at 17:42

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).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

zapgun-ai

zapgun-ai/clawback

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name

preview_card

description

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.

.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

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).
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 the lines are crushed under the scrim in this SVG, they are crushed in the shipped PNG too.

What to look for

Chart lines read? The two cumulative lines + the shaded wedge should be visible behind the headline — that is the whole point of the chart bg. If they vanish into the scrim, the scrim is too dark for the line colours (WCAG 1.4.11 wants ≥3:1 for graphical objects); the fix lives in share_card.js (shareCardSvg) and/or the bare line colours in benchmark/bin/plot.js.
Headline + sub read? The percentage, the token sub-line, and the tagline must stay legible (≥3:1 large text) — a scrim light enough for the lines can in turn wash these out. Both constraints have to hold at once.

Not shipped

benchmark/, scripts/, and .skills/ are dev tooling — none ship in the npm tarball (package.json files: bin, src, README.md, LICENSE).

More from this repository

same repository

zapgun-ai/clawback

Run a counterbalanced A/B knob block end to end and produce a report. Orchestrates the whole validation loop the other skills do piecemeal — for each arm it starts a clawback proxy with that arm's knobs and its OWN --state file (fresh SESSION KEY, no clawback-side carry-over), drives N turns of load through it (pty or replay driver), stops it, then analyzes the per-arm turn-logs and renders the charts. No cache-salt: production forwards none, so neither does the harness. Default block is A0 (passthrough baseline) vs A5 (recommended stack); the analyzer pools all passthrough turns into the baseline and compares each treatment arm against it, so the block must include A0 and may carry several treatment arms at once. Use this to run the full A/B runbook in one command. The pty driver spends real Anthropic tokens (one run per arm) — pin --model.

2026-06-104

armstat

zapgun-ai/clawback

Fast, read-only per-arm turn-log summary — billable turn count, httpStatus tally (catches rate-limiting / non-200s mid-run), cache_read/creation sums with the ephemeral 5m-vs-1h split (a direct knob-sanity check: A2/A3/A5 should show ephemeral_1h > 0, A0/A1/A4 should not), token-weighted hit rate, and thinkingBudget. Unlike the heavyweight `bench` analyzer it does no bootstrap/CI/pricing, so it is cheap to run at each arm boundary WHILE a suite is still in flight. Safe on a live, actively-appended NDJSON file (a partial trailing line is skipped). Use it to spot-check a just-finished arm before the next one starts.

2026-06-104

bench

zapgun-ai/clawback

Analyze clawback turn-logs (NDJSON) to compare treatment vs passthrough arms. Produces report.md, report.csv, summary.json, manifest.json. Headline is billable input tokens reclaimed per turn (full-rate quota saved, no pricing) with a bootstrap 95% CI; per-turn $ and hit-rate are a demoted cost appendix, all stratified by inter-turn gap bucket. Use after the operator has collected counter-balanced windows.

2026-06-104

capture

zapgun-ai/clawback

Capture a REAL Claude Code /v1/messages body as a replay fixture, so the HTTP replay arm (.skills/replay) faithfully reproduces Claude Code's cache_control breakpoint structure (a hand-authored fixture makes the 1h-TTL knob look like a no-op). Starts a clawback proxy with --capture-body, drives ONE real claude turn through it via the PTY driver, verifies the dump carries cache_control breakpoints, and promotes it to the fixture path. Spends real Anthropic tokens (exactly one turn; pin a cheap model with --model). Use once before replay-based benchmarking, or to refresh the fixture when Claude Code changes its request shape.

2026-06-104

card-tones

zapgun-ai/clawback

Render the clawback share card in BOTH tones (neg + pos) as a DESIGN render-only proof — NOT a benchmark result — so the share-card atmosphere (deep-purple LENS_CORE centre, win-only cyan corona, darkened gradients) can be eyeballed in one pass. neg uses a real run's amber regression card (purple core, no corona); pos is a SYNTHETIC fixture built only to exercise the renderer's win branch (purple core + cyan corona) — its number is fabricated, never published. Delegates to the shared preview_card.sh. Use when tweaking the share-card renderer's visuals and you want to see both tones side by side.

2026-06-104

drive

zapgun-ai/clawback

Drive the REAL claude binary through clawback's PTY channel at a scripted inter-turn gap schedule — the faithful load arm. Because the bytes on the wire are produced by genuine Claude Code, this is the only driver that exercises the 1h-TTL nested-cache-control rewrite (arm A2) authentically. Use for headline/moat numbers and to cross-check the HTTP replay arm (.skills/replay). Requires node-pty and a running clawback proxy.

2026-06-104

name

preview_card

description

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.

.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

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).
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

What to look for

Chart lines read? The two cumulative lines + the shaded wedge should be visible behind the headline — that is the whole point of the chart bg. If they vanish into the scrim, the scrim is too dark for the line colours (WCAG 1.4.11 wants ≥3:1 for graphical objects); the fix lives in share_card.js (shareCardSvg) and/or the bare line colours in benchmark/bin/plot.js.
Headline + sub read? The percentage, the token sub-line, and the tagline must stay legible (≥3:1 large text) — a scrim light enough for the lines can in turn wash these out. Both constraints have to hold at once.

Not shipped

benchmark/, scripts/, and .skills/ are dev tooling — none ship in the npm tarball (package.json files: bin, src, README.md, LICENSE).