name

report-kit

description

Generate polished, self-contained HTML status/management reports that anyone can open in a browser to view, edit text in place, save back, and export to PNG — with ZERO installs for recipients (html2canvas is bundled inline). Use when the user wants to create a shareable report/dashboard/summary HTML, turn findings into a manager-readable page, or produce a report others can edit and screenshot without tools. Triggers: "做一份報告 html", "generate a report", "status report", "manager summary", "可以編輯/另存圖片的報告", "share a report to other teams".

report-kit

Produce a single self-contained .html report that carries its own toolbar: ✏️ Edit · 💾 Save · 📷 Save-as-Image — recipients install nothing, works offline.

The whole loop (agent)

Author the report body. Start from template.html (the design system) — copy it, set the <title>, pick an accent (--accent/--accentbg: blue/teal/green/purple), and fill the CONTENT region using the components below. Write the file to the user's target path.

Finalize → self-contained. Run the bundler to stamp the in-page toolbar + inline html2canvas:

# from the skill folder, or with its full path:
python build_report.py <report.html>
# Windows: python "%USERPROFILE%\.claude\skills\report-kit\build_report.py" <report.html>
# macOS/Linux: python "$HOME/.claude/skills/report-kit/build_report.py" <report.html>

Output is one portable file. Re-running upgrades the toolbar (idempotent).

Hand the .html to the user. That's it — no PNG round-trip needed; they export images from the page.

Design system (in template.html)

Keep the template's <style> as-is; compose content from these blocks:

hero — title + .sub + .badges (status / key metric).
.lead — 1–2 sentence executive summary (mid-level tone: assume the reader knows basic terms; lead with the outcome; no baby explanations).
h2 > span.n — numbered section headings.
.kpi (in .grid.g3) — big-number result cards (.num, .num.accent, .num.ink).
.card (g2/g3) — labelled points with .ico badges.
table + .tag (t-ok/t-warn/t-bad/t-na) — detail rows with status pills.
.ba — Before → After two-column compare.
.glo — dashed note box for one-line technical context.
.note — green takeaway box for the closing conclusion.
footer — scope · date · method.

Tone: English by default unless the user asks otherwise; concise, data-forward; no filler.

What the recipient does (no installs)

Open the .html in Edge or Chrome (ideally via a local web server / localhost; plain double-click file:// also works, but Save may fall back to a download).
✏️ 編輯 → click into the page and change text.
💾 存檔 (or Ctrl+S) → writes back to the same file (first time: pick the file + allow edit).
📷 另存圖片 → exports the page to PNG (choose where to save).

Why "no 543 to install"

Edit/Save = browser-native File System Access API (Edge/Chrome) — nothing to install.
Save-as-Image = html2canvas bundled INLINE in every output — no CDN, no npm, offline.
The only prerequisite is on the author side (running the bundler): Python 3. Recipients need only a browser.
Pixel-perfect batch screenshots are NOT required for this loop; if ever wanted, the html-to-image skill (Playwright) is an optional author-side extra — never shipped to recipients.

Distribution

This skill folder is self-contained (includes assets/html2canvas.min.js). To share:

Copy the report-kit/ folder into another author's ~/.claude/skills/ (or your team skill registry). See README.md.
The reports they generate are themselves shareable to anyone with a browser.

Notes

Save-as-Image fidelity (html2canvas) is ~95% — excellent for tables/cards/badges; very rare gradient/shadow drift. For pixel-perfect, use html-to-image.
Output stays a clean report when saved: the toolbar DOM + contenteditable are stripped on save, but the bundled toolbar script is kept so the file remains editable next time.
Marker  indicates a finalized file.

report-kit

Produce a single self-contained .html report that carries its own toolbar: ✏️ Edit · 💾 Save · 📷 Save-as-Image — recipients install nothing, works offline.

The whole loop (agent)

Author the report body. Start from template.html (the design system) — copy it, set the <title>, pick an accent (--accent/--accentbg: blue/teal/green/purple), and fill the CONTENT region using the components below. Write the file to the user's target path.

Finalize → self-contained. Run the bundler to stamp the in-page toolbar + inline html2canvas:

# from the skill folder, or with its full path:
python build_report.py <report.html>
# Windows: python "%USERPROFILE%\.claude\skills\report-kit\build_report.py" <report.html>
# macOS/Linux: python "$HOME/.claude/skills/report-kit/build_report.py" <report.html>

Output is one portable file. Re-running upgrades the toolbar (idempotent).

Hand the .html to the user. That's it — no PNG round-trip needed; they export images from the page.

Design system (in template.html)

Keep the template's <style> as-is; compose content from these blocks:

hero — title + .sub + .badges (status / key metric).

.lead — 1–2 sentence executive summary (mid-level tone: assume the reader knows basic terms; lead with the outcome; no baby explanations).

h2 > span.n — numbered section headings.

.kpi (in .grid.g3) — big-number result cards (.num, .num.accent, .num.ink).

.card (g2/g3) — labelled points with .ico badges.

table + .tag (t-ok/t-warn/t-bad/t-na) — detail rows with status pills.

.ba — Before → After two-column compare.

.glo — dashed note box for one-line technical context.

.note — green takeaway box for the closing conclusion.

footer — scope · date · method.

Tone: English by default unless the user asks otherwise; concise, data-forward; no filler.

What the recipient does (no installs)

Open the .html in Edge or Chrome (ideally via a local web server / localhost; plain double-click file:// also works, but Save may fall back to a download).

✏️ 編輯 → click into the page and change text.

💾 存檔 (or Ctrl+S) → writes back to the same file (first time: pick the file + allow edit).

📷 另存圖片 → exports the page to PNG (choose where to save).

Why "no 543 to install"

Edit/Save = browser-native File System Access API (Edge/Chrome) — nothing to install.

Save-as-Image = html2canvas bundled INLINE in every output — no CDN, no npm, offline.

The only prerequisite is on the author side (running the bundler): Python 3. Recipients need only a browser.

Pixel-perfect batch screenshots are NOT required for this loop; if ever wanted, the html-to-image skill (Playwright) is an optional author-side extra — never shipped to recipients.

Distribution

This skill folder is self-contained (includes assets/html2canvas.min.js). To share:

Copy the report-kit/ folder into another author's ~/.claude/skills/ (or your team skill registry). See README.md.

The reports they generate are themselves shareable to anyone with a browser.

Notes

Save-as-Image fidelity (html2canvas) is ~95% — excellent for tables/cards/badges; very rare gradient/shadow drift. For pixel-perfect, use html-to-image.

Output stays a clean report when saved: the toolbar DOM + contenteditable are stripped on save, but the bundled toolbar script is kept so the file remains editable next time.

Marker  indicates a finalized file.