HTML Report (html-report-M)
Produce one self-contained HTML file (all CSS/JS inline, images as data URIs — no external requests). Self-contained is mandatory: the same file must open locally AND drop into a claude.ai Artifact unchanged.
Step 1 — Build the report
- Load the dataviz skill BEFORE writing any chart, graph, KPI tile, or table styling. Follow it.
- If the report is design-heavy (stakeholder-facing), load artifact-design for layout/typography calibration.
- Make it responsive (relative units, flex/grid,
max-width:100% on media; wide tables/diagrams scroll inside their own overflow-x:auto container — body never scrolls sideways).
- Make it theme-aware (light + dark via
prefers-color-scheme) unless a single look is intentional.
- Write the page content directly under a normal HTML skeleton. Keep a concise, stable
<title>.
- No external fonts, CDN scripts, or remote images — inline/embed everything.
Step 2 — Save locally (versionable)
Determine where the file goes:
A notes-M topic is active (a <slug>-notes.md path is known in this session) →
- Save into that topic folder, descriptive filename (e.g.
mart-freshness-report.html).
- Add/refresh the entry under
## Artifacts in the notes file: - <file> — <one-line purpose>.
- Print the absolute path back.
No active notes-M topic → ASK the user where to save, offering:
- Root of the current working repo (default), or
- Another path they name.
- Use a descriptive kebab-case filename. Create the folder if needed (never delete/overwrite an existing file without confirming). Print the absolute path back.
Reports are meant to be committed to GitHub — do not commit unless the user asks; just save the file where their repo can track it.
Step 3 — Offer the claude.ai Artifact replica
After the local file is saved, ALWAYS ask:
"Also publish a shareable copy as a claude.ai Artifact (for non-technical folks — PO, stakeholders)?"
- If yes → publish the SAME file via the
Artifact tool (load artifact-design first if not already). Set a matching <title>, a one-sentence description, and a stable favicon emoji. Return the artifact URL to the user, noting it is private until they share it.
- If no → stop after the local save.
- On later edits: re-save the local file first, then redeploy to the same Artifact URL (same file path) so the shared link stays stable.
Rules
- Local file and Artifact are the same self-contained HTML — build once, reuse.
- Never fabricate data — report only what's in the conversation/sources; label any estimates.
- Redact secrets (keys, tokens, PII) from the report.
- Keep the local save and the artifact question as two distinct steps — local first, artifact second, always ask.
1---2name: html-report-m3description: Generate a self-contained HTML report (dashboard, analysis write-up, results summary, status report) saved locally so it can be versioned in GitHub, with an optional shareable claude.ai Artifact replica for non-technical stakeholders (PO, leadership). Use whenever the user asks for an "HTML report", "report", "dashboard", "visual summary", "write this up as HTML", or wants findings/data presented as a viewable page.4---56# HTML Report (html-report-M)78Produce **one self-contained HTML file** (all CSS/JS inline, images as data URIs — no external requests). Self-contained is mandatory: the same file must open locally AND drop into a claude.ai Artifact unchanged.910## Step 1 — Build the report1112- Load the **dataviz** skill BEFORE writing any chart, graph, KPI tile, or table styling. Follow it.13- If the report is design-heavy (stakeholder-facing), load **artifact-design** for layout/typography calibration.14- Make it **responsive** (relative units, flex/grid, `max-width:100%` on media; wide tables/diagrams scroll inside their own `overflow-x:auto` container — body never scrolls sideways).15- Make it **theme-aware** (light + dark via `prefers-color-scheme`) unless a single look is intentional.16- Write the page content directly under a normal HTML skeleton. Keep a concise, stable `<title>`.17- No external fonts, CDN scripts, or remote images — inline/embed everything.1819## Step 2 — Save locally (versionable)2021Determine where the file goes:22231. **A notes-M topic is active** (a `<slug>-notes.md` path is known in this session) →24 - Save into that topic folder, descriptive filename (e.g. `mart-freshness-report.html`).25 - Add/refresh the entry under `## Artifacts` in the notes file: `- <file> — <one-line purpose>`.26 - Print the absolute path back.27282. **No active notes-M topic** → ASK the user where to save, offering:29 - Root of the current working repo (default), or30 - Another path they name.31 - Use a descriptive kebab-case filename. Create the folder if needed (never delete/overwrite an existing file without confirming). Print the absolute path back.3233Reports are meant to be committed to GitHub — do not commit unless the user asks; just save the file where their repo can track it.3435## Step 3 — Offer the claude.ai Artifact replica3637After the local file is saved, ALWAYS ask:3839> "Also publish a shareable copy as a claude.ai Artifact (for non-technical folks — PO, stakeholders)?"4041- **If yes** → publish the SAME file via the `Artifact` tool (load **artifact-design** first if not already). Set a matching `<title>`, a one-sentence `description`, and a stable `favicon` emoji. Return the artifact URL to the user, noting it is private until they share it.42- **If no** → stop after the local save.43- On later edits: re-save the local file first, then redeploy to the same Artifact URL (same file path) so the shared link stays stable.4445## Rules4647- Local file and Artifact are the **same self-contained HTML** — build once, reuse.48- Never fabricate data — report only what's in the conversation/sources; label any estimates.49- Redact secrets (keys, tokens, PII) from the report.50- Keep the local save and the artifact question as two distinct steps — local first, artifact second, always ask.
MathCaz