html-report-mlisted

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.
MathCaz/claude-skills · ★ 0 · Data & Documents · score 75

Install: claude install-skill MathCaz/claude-skills

# 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: 1. **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. 2. **No active notes-M topic** → ASK the user where to save, offering: - Root of the current working repo (default), or - Another path they name. -