Rich Render
Overview
A rich render is a single self-contained dark-themed HTML+CSS dashboard (no external deps, no build step) saved to ~/rich-renders/<topic>-<date>.html and delivered via SendUserFile. It carries a multi-item synthesis at far higher information-density-per-glance than a Markdown table, while keeping the inline chat reply terse — the heavy artifact is deferred so live back-and-forth doesn't burn tokens on chrome the operator isn't reading.
Operator-validated (nicegui 3.13 triage: "splendid, pretty much no need to go back to it"). This is a proven house format, not an experiment.
When to Use
Use when a turn yields ≥5 discrete items that benefit from cross-comparison:
- PR / issue / notification triage
- Dependency or security audit
- Bug sweeps, finding lists, design-alternative comparisons
- Research syntheses, scorecards, "did X work?" verdict write-ups
Also when the operator explicitly says rich render / dashboard / defer this out of chat.
Don't use for: <5 items, a single linear answer, a code diff (use the editor), or anything the operator needs to act on inline right now. When in doubt for borderline counts, a terse Markdown reply is fine.
The recipe (don't deviate from the load-bearing parts)
- Copy
template.html (in this skill dir) as the scaffold. It already contains the canonical palette, card/table/stat components, and the (beta) remote-scroll d-pad.
- Replace the content between the
CONTENT markers, and the <title> text in <head> (it's the one head element you fill). Keep the <head> CSS intact (the #scroller wrapper + d-pad are a beta affordance — see below; keep by default, fine to drop). Add/remove <h2> sections, .stat tiles, and table rows freely — the template ships a minimal 2-stat / 2-section example, not a fixed shape; size it to the content. Use a <details> block to tuck a plain-language on-ramp, an evidence/diligence trail, or "for agents / the curious" depth out of the main flow (keeps it scannable for a skimmer, complete for a digger).
- Lead with the verdict. Put the one-sentence bottom line in a
.card at the top, before the supporting sections. Don't bury it.
- Save to
~/rich-renders/<topic>-<date>.html (create the directory if it doesn't exist — it's the standing home for these). Convention: lowercase-hyphenated slug, then trailing ISO date — gh-notif-triage-2026-06-22.html. The shield emoji in the template <h1> is a placeholder — swap it for a topic-fitting one or drop it.
- Verify, then deliver (see below). Inline chat reply stays a 1–3 line markdown summary + "rendered: ".
Load-bearing rules
- No external dependencies. No CDN CSS/JS, no web fonts, no
<img src=http…>. Self-contained means it renders offline, forever. Inline any small SVG; base64 small images only if essential.
- Dark theme, fixed palette. bg
#0d1117 · card/surface #161b22 · borders #30363d/#21262d · body text #e6edf3 · muted #8b949e · headings & links #79c0ff · title #f0f6fc · verdict green #7ee787 (accent #56d364) / red #f85149 / amber #e3b341 / slate #adbac7. These literal values are the invariant; hoisting them into :root vars is a common, equally-fine variant — the colors stay constant either way. No light theme.
Remote-scroll d-pad (BETA — situational, kept by default)
The template ships a fixed d-pad + #scroller wrapper. Origin: Claude Code remote control over Android intercepted touch-drag scroll, and a wide body made position:fixed mis-resolve off-screen — which could strand a render unscrollable. The fix puts all content in #scroller (body{overflow:hidden}) and scrolls it via the d-pad in both axes. Status: beta / unverified — the iOS remote app doesn't have the interception bug, so the author can't currently reproduce or test it. It's invisible on desktop and harmless, so the template keeps it by default; drop it freely if you don't need it. PRs that verify or refine it are welcome.
Component → meaning map (the template's class vocabulary)
| Class |
Use for |
.card .win (green border) |
positive verdict — pass / ship / resolved |
.card .fail (red border) |
negative verdict — fail / blocker / close |
.card .hard (amber border) |
caveat / hold / open question / irreducible |
.card .info (blue border) |
neutral context / methodology |
td.g td.r td.y td.s |
table cell green / red / amber / slate-neutral |
b.gg b.rr b.yy |
inline emphasis green / red / amber |
.stat (.n number, .k label) |
hero stat tile in the .stats strip |
<details> / <summary> |
progressive disclosure — plain-language on-ramp, evidence/diligence trail, or "N hidden / for agents" deep-dive; keeps the main flow scannable |
Verify before declaring done (seeing-is-believing)
Self-contained HTML can't fail to "build", but layout can. The always-on check is that it's genuinely self-contained:
F=~/rich-renders/<file>.html
ls -l "$F" # exists, non-trivial size
grep -Eqi 'src="https?:|href="https?://[^"]*\.css|cdn|googleapis' "$F" \
&& echo "WARN: possible external dependency" || echo "ok: self-contained"
If you kept the d-pad (default), confirm its three tokens survived — a combined grep -c can pass on a render whose d-pad you broke (e.g. dropped the <script> but left a comment mentioning #scroller), so assert each independently:
for t in 'id="scroller"' 'id="scrollnav"' 'function scn'; do
grep -q "$t" "$F" && echo "ok: $t" || echo "MISSING: $t"; done
To actually exercise the d-pad (beta), render at ~390px width (Playwright/headless Chrome), call scn(1,0) / scn(0,1), and confirm scrollLeft/scrollTop advanced (smooth scroll is async — wait ~500ms).
Delivery
- Default = private to the operator.
SendUserFile the local path — pass files as an array of strings: SendUserFile(files=["~/rich-renders/<file>.html"], caption="…"). A bare unquoted path is the common first-try mistake and fails InputValidationError (the harness retries, but it's a wasted round-trip). Assume not for sharing unless told otherwise.
- No
SendUserFile in your toolset (e.g. running as a subagent)? State the saved path in your final report and let the caller deliver it — don't skip the render.
- Publishing (only when asked to share a link):
gh gist create FILE --public --desc "…", then the htmlpreview URL https://htmlpreview.github.io/?https://gist.githubusercontent.com/<user>/<hash>/raw/<file>.html. Gotchas: gh gist edit reads STDIN (cat f | gh gist edit <id> -f <name>), gh gist delete needs --yes. Treat a gist as a single conscious publish — delete & republish rather than edit mid-iteration. Verify curl -sI <raw_url> | head -1 → 200 before sharing.
Common mistakes
| Mistake |
Fix |
| Treating the d-pad as mandatory |
It's a beta Android-remote workaround — keep by default, fine to omit; don't gate "done" on it |
| Pulled in a CDN (Tailwind, Chart.js, a font) |
Self-contained only; inline everything |
| Buried the verdict at the bottom |
Lead with a .card one-liner up top |
| Pasted the full HTML into chat |
Defer it — SendUserFile + a terse summary line |
| Light theme / random colors |
Use the canonical dark palette |
Saved to cwd or /tmp |
Always ~/rich-renders/<topic>-<date>.html |
Origin
This is a captured living standard, not a format invented up front. It was distilled from a large corpus of real rich-renders produced across day-to-day Claude Code use — the format earned its place by repetition. This file just writes the grammar down so an agent can reproduce it in a few hundred tokens instead of re-deriving it from a pile of samples.
1---2name: rich-render3description: Use when a turn produces a multi-item synthesis (>=5 discrete items that benefit from cross-comparison) — triage, audit, survey, bug-sweep, design-alternatives, research findings, scorecards — and pasting it as raw Markdown in chat would be lower-bandwidth than a glanceable dashboard. Also when the operator says "rich render", "dashboard", "make it a dashboard", or asks to defer a long synthesis out of chat. Produces a single self-contained dark HTML file saved to ~/rich-renders/.4---56# Rich Render78## Overview910A **rich render** is a single self-contained dark-themed HTML+CSS dashboard (no external deps, no build step) saved to `~/rich-renders/<topic>-<date>.html` and delivered via SendUserFile. It carries a multi-item synthesis at far higher information-density-per-glance than a Markdown table, while keeping the inline chat reply terse — the heavy artifact is **deferred** so live back-and-forth doesn't burn tokens on chrome the operator isn't reading.1112**Operator-validated** (nicegui 3.13 triage: *"splendid, pretty much no need to go back to it"*). This is a proven house format, not an experiment.1314## When to Use1516Use when a turn yields **≥5 discrete items that benefit from cross-comparison**:17- PR / issue / notification triage18- Dependency or security audit19- Bug sweeps, finding lists, design-alternative comparisons20- Research syntheses, scorecards, "did X work?" verdict write-ups2122Also when the operator explicitly says *rich render / dashboard / defer this out of chat*.2324**Don't use for:** <5 items, a single linear answer, a code diff (use the editor), or anything the operator needs to act on inline right now. When in doubt for borderline counts, a terse Markdown reply is fine.2526## The recipe (don't deviate from the load-bearing parts)27281. **Copy `template.html`** (in this skill dir) as the scaffold. It already contains the canonical palette, card/table/stat components, and the (beta) remote-scroll d-pad.292. **Replace the content** between the `CONTENT` markers, **and** the `<title>` text in `<head>` (it's the one head element you fill). Keep the `<head>` **CSS** intact (the `#scroller` wrapper + d-pad are a beta affordance — see below; keep by default, fine to drop). Add/remove `<h2>` sections, `.stat` tiles, and table rows freely — the template ships a minimal 2-stat / 2-section example, not a fixed shape; size it to the content. Use a `<details>` block to tuck a plain-language on-ramp, an evidence/diligence trail, or "for agents / the curious" depth out of the main flow (keeps it scannable for a skimmer, complete for a digger).303. **Lead with the verdict.** Put the one-sentence bottom line in a `.card` at the top, before the supporting sections. Don't bury it.314. **Save to `~/rich-renders/<topic>-<date>.html`** (create the directory if it doesn't exist — it's the standing home for these). Convention: lowercase-hyphenated slug, then trailing ISO date — `gh-notif-triage-2026-06-22.html`. The shield emoji in the template `<h1>` is a placeholder — swap it for a topic-fitting one or drop it.325. **Verify, then deliver** (see below). Inline chat reply stays a 1–3 line markdown summary + "rendered: <path>".3334## Load-bearing rules3536- **No external dependencies.** No CDN CSS/JS, no web fonts, no `<img src=http…>`. Self-contained means it renders offline, forever. Inline any small SVG; base64 small images only if essential.37- **Dark theme, fixed palette.** bg `#0d1117` · card/surface `#161b22` · borders `#30363d`/`#21262d` · body text `#e6edf3` · muted `#8b949e` · headings & links `#79c0ff` · title `#f0f6fc` · verdict green `#7ee787` (accent `#56d364`) / red `#f85149` / amber `#e3b341` / slate `#adbac7`. These literal values are the invariant; hoisting them into `:root` vars is a common, equally-fine variant — the colors stay constant either way. No light theme.3839### Remote-scroll d-pad (BETA — situational, kept by default)4041The template ships a fixed d-pad + `#scroller` wrapper. **Origin:** Claude Code **remote control over Android** intercepted touch-drag scroll, and a wide body made `position:fixed` mis-resolve off-screen — which could strand a render unscrollable. The fix puts all content in `#scroller` (`body{overflow:hidden}`) and scrolls it via the d-pad in both axes. **Status: beta / unverified** — the **iOS** remote app doesn't have the interception bug, so the author can't currently reproduce or test it. It's invisible on desktop and harmless, so the template keeps it by default; drop it freely if you don't need it. **PRs that verify or refine it are welcome.**4243### Component → meaning map (the template's class vocabulary)4445| Class | Use for |46|---|---|47| `.card .win` (green border) | positive verdict — pass / ship / resolved |48| `.card .fail` (red border) | negative verdict — fail / blocker / close |49| `.card .hard` (amber border) | caveat / hold / open question / irreducible |50| `.card .info` (blue border) | neutral context / methodology |51| `td.g` `td.r` `td.y` `td.s` | table cell green / red / amber / slate-neutral |52| `b.gg` `b.rr` `b.yy` | inline emphasis green / red / amber |53| `.stat` (`.n` number, `.k` label) | hero stat tile in the `.stats` strip |54| `<details>` / `<summary>` | progressive disclosure — plain-language on-ramp, evidence/diligence trail, or "N hidden / for agents" deep-dive; keeps the main flow scannable |5556## Verify before declaring done (seeing-is-believing)5758Self-contained HTML can't fail to "build", but layout can. The **always-on** check is that it's genuinely self-contained:59```bash60F=~/rich-renders/<file>.html61ls -l "$F" # exists, non-trivial size62grep -Eqi 'src="https?:|href="https?://[^"]*\.css|cdn|googleapis' "$F" \63 && echo "WARN: possible external dependency" || echo "ok: self-contained"64```65**If you kept the d-pad** (default), confirm its three tokens survived — a combined `grep -c` can pass on a render whose d-pad you broke (e.g. dropped the `<script>` but left a comment mentioning `#scroller`), so assert each independently:66```bash67for t in 'id="scroller"' 'id="scrollnav"' 'function scn'; do68 grep -q "$t" "$F" && echo "ok: $t" || echo "MISSING: $t"; done69```70To actually exercise the d-pad (beta), render at **~390px width** (Playwright/headless Chrome), call `scn(1,0)` / `scn(0,1)`, and confirm `scrollLeft`/`scrollTop` advanced (smooth scroll is async — wait ~500ms).7172## Delivery7374- **Default = private to the operator.** `SendUserFile` the local path — pass `files` as an **array of strings**: `SendUserFile(files=["~/rich-renders/<file>.html"], caption="…")`. A bare unquoted path is the common first-try mistake and fails `InputValidationError` (the harness retries, but it's a wasted round-trip). Assume not for sharing unless told otherwise.75- **No `SendUserFile` in your toolset** (e.g. running as a subagent)? State the saved path in your final report and let the caller deliver it — don't skip the render.76- **Publishing** (only when asked to share a link): `gh gist create FILE --public --desc "…"`, then the htmlpreview URL `https://htmlpreview.github.io/?https://gist.githubusercontent.com/<user>/<hash>/raw/<file>.html`. Gotchas: `gh gist edit` reads STDIN (`cat f | gh gist edit <id> -f <name>`), `gh gist delete` needs `--yes`. Treat a gist as a single conscious publish — delete & republish rather than edit mid-iteration. Verify `curl -sI <raw_url> | head -1` → `200` before sharing.7778## Common mistakes7980| Mistake | Fix |81|---|---|82| Treating the d-pad as mandatory | It's a beta Android-remote workaround — keep by default, fine to omit; don't gate "done" on it |83| Pulled in a CDN (Tailwind, Chart.js, a font) | Self-contained only; inline everything |84| Buried the verdict at the bottom | Lead with a `.card` one-liner up top |85| Pasted the full HTML into chat | Defer it — `SendUserFile` + a terse summary line |86| Light theme / random colors | Use the canonical dark palette |87| Saved to cwd or `/tmp` | Always `~/rich-renders/<topic>-<date>.html` |8889## Origin9091This is a **captured living standard**, not a format invented up front. It was distilled from a large corpus of real rich-renders produced across day-to-day Claude Code use — the format earned its place by repetition. This file just writes the grammar down so an agent can reproduce it in a few hundred tokens instead of re-deriving it from a pile of samples.
evnchn-agentic