/prettyhtml — write the current context as a pretty HTML doc and open it in the browser

Take what was just figured out / produced in this chat and render it as a polished, dark-themed standalone HTML report, save it to a notes folder, and open it in the default browser. These are personal working docs (plans, diagnoses, decision memos) — self-contained, offline-openable, and not a committed deliverable.

What goes in the doc

The content is whatever was just produced in this conversation — the diagnosis, plan, decision, comparison, or report the user is reacting to. If $ARGUMENTS names a focus or title, scope/title the doc to that; otherwise summarize the most recent substantive answer. Write it as a self-contained report someone could read cold: lead with a one-line verdict, then the evidence/reasoning, then the recommendation / next steps. Keep it faithful to what was actually said — don't invent new findings.

Steps

1. Resolve the output dir. Default to a pretty-docs/ folder; put it in the current git repo root if we're in one, else in the home directory. Override with the PRETTYHTML_DIR env var.

   BASE="$(git rev-parse --show-toplevel 2>/dev/null || echo "$HOME")"
   DIR="${PRETTYHTML_DIR:-$BASE/pretty-docs}"
   mkdir -p "$DIR"

   If you're in a git repo and don't want these committed, add pretty-docs/ to .gitignore.

2. Pick the filename — Title-In-Kebab-Case-YYYY-MM-DD.html using today's date (the currentDate from the Claude Code environment context, not a guess). E.g. Caching-Decision-2026-07-03.html.

   ⚠ Update-in-place, don't duplicate. If a pretty html on this same subject was already produced earlier in this chat, reuse that exact same path and overwrite it — don't mint a second near-identical file. Only pick a fresh dated name for a genuinely new subject. Say which you did.

3. Start from the bundled template template.html (in this skill's folder). Copy it and fill it in — do not restyle. Read the comment block at the top of the template for the available building blocks (.tldr, .grid4/.metric, .card, .two, .evid, .note-box/.warn-box/ .ok-box, .pill, tables, charts). Use the ones that fit the content; delete the rest. For tone:

   • Title + .sub line with the date + a status .pill.
   • A .tldr banner with the one-line takeaway (left-border color = tone: --rose brand/default / --green good / --red bug / --blue info/decision).
   • Headline .grid4 metric tiles when there are punchy numbers.
   • Charts when the data earns one (see below) — a bar chart to rank, a pie/donut for parts-of-a-whole, a .cmp comparison for A-vs-B. Don't force one on prose that has no numbers.
   • .evid blocks for any telemetry/log/code excerpts — escape < as <.
   • A .foot line noting what it is + the next action. Faithfully represent uncertainty (pills like "recommend", "draft") — match how the chat framed it; don't oversell.

   Charts (pure CSS — no JS, no external libs, stays offline). Wrap each in <div class="chart"><div class="ct">Title</div>…</div>:

   • Bar chart (ranking): each row <div class="bar"><span class="bl">Label</span> <span class="bt"><i style="width:82%"></i></span><span class="bv">12.4k</span></div>. Add g/b/p to the <i> for green/blue/purple fills. Set each width:% relative to the max.
   • Pie / donut (parts of a whole): set the slices with an inline conic-gradient whose stops are cumulative percentages, then list a .legend. Add class donut for a ring:

     <div class="piewrap">
       <div class="pie donut" style="background:conic-gradient(var(--rose) 0 62%, var(--blue) 62% 87%, var(--purple) 87% 100%)"></div>
       <ul class="legend">
         <li><span class="sw" style="background:var(--rose)"></span><b>62%</b>&nbsp;Reads</li>
         <li><span class="sw" style="background:var(--blue)"></span><b>25%</b>&nbsp;Writes</li>
         <li><span class="sw" style="background:var(--purple)"></span><b>13%</b>&nbsp;Other</li>
       </ul>
     </div>

     (The stops must be cumulative and end at 100%; the legend colors must match the gradient.)
   • Comparison (A vs B infographic): rows of two bars — `<div class="cr"><span class="cn">Metric</span><div class="cbars"><div class="cw"><i class="a" style="width:80%"></i><span class="cv">A: 8/10</span></div> <div class="cw"><i class="b" style="width:100%"></i><span class="cv">B: 10/10</span></div></div></div>`, then a `.cmp-key` legend (`<span><i class="k a"></i>Option A</span>…`).

   The template uses {{TITLE}}, {{SUBTITLE}}, {{DATE}}, {{STATUS_PILL}}, {{TLDR}}, {{BODY}}, {{FOOTER}} placeholders — fill each one.

4. Write the file to $DIR/<name>.html with the Write tool.
5. Open it in the default browser (background, detached) unless the args say no-open. Try in order and use the first that exists:

   DOC="$DIR/<name>.html"
   if   command -v open        >/dev/null; then open "$DOC"                # macOS
   elif command -v xdg-open    >/dev/null; then nohup xdg-open "$DOC" >/dev/null 2>&1 &   # Linux
   elif command -v wslview     >/dev/null; then wslview "$DOC"             # WSL
   elif command -v powershell.exe >/dev/null; then powershell.exe /c start "$DOC"  # Windows
   else echo "open it manually: $DOC"; fi

   (On a headless Linux box you may need DISPLAY=:0 in front of xdg-open.)
6. Report the path back to the user and a one-line summary of the sections.

Rules

• Match the house style — reuse template.html verbatim for the <style>; only the content changes. No new CSS frameworks, no light theme.
• Self-contained — inline everything; no external CSS/JS/font/image URLs so it opens offline straight from disk.
• Don't re-derive — the doc reflects the conversation that already happened; if the context is thin, ask what to write up rather than inventing content.
• Never commits — these are personal docs. (If a tracked doc is wanted, that's a separate ask.)
• One doc per invocation unless asked for more.