claude-html-report-skill

A Claude Code skill that makes Claude generate rich, interactive HTML reports instead of markdown — and publishes them to your own GitHub Pages site so you can share a public URL.

This is a GitHub template. Click ▸ Use this template at the top of the page to create your own copy. Forking is the wrong choice here (forks are for upstream PRs; templates are for “clone and diverge”, which is what reports are).

---

Why?

Claude defaults to markdown for everything. Markdown is fine for plain text, but the moment your output has data, comparisons, code, or detail readers want to navigate, you want HTML:

• interactive charts (Chart.js / Plotly)
• sortable / searchable / filterable tables
• tabs for comparing alternatives without scrolling
• collapsible sections for optional depth
• syntax-highlighted code with copy buttons
• Mermaid diagrams, KaTeX math
• dark mode, print stylesheets, mobile responsive, OG link previews

This skill nudges Claude to lean into all of that — and gives you a one-line publish flow.

See the live example report for what you get.

---

Setup (≈ 3 minutes, one-time)

1. Create your repo from this template

Click ▸ Use this template → Create a new repository at the top of this page. Name it whatever you like (e.g. reports).

2. Clone it locally

git clone [email protected]:/.git ~/reports
cd ~/reports

3. Install the skill into Claude Code

Symlink the skill directory into Claude’s global skills folder. The symlink means future updates to the skill (yours or upstream) are picked up automatically.

mkdir -p ~/.claude/skills
ln -s "$(pwd)/.claude/skills/html-report" ~/.claude/skills/html-report

Prefer not to symlink? Just cp -r .claude/skills/html-report ~/.claude/skills/ instead. Re-copy when the skill changes.

4. Enable GitHub Pages on your new repo

GitHub → your repo → Settings → Pages → Source: Deploy from a branch → Branch: main / (root) → Save. Wait ~1 min for the first deploy.

5. (Optional) Edit config.json

You usually don’t need to edit anything — the publish script auto-detects:

• the local repo path (from where the script lives on disk, even via symlink)
• the GitHub Pages URL (from git remote origin)

Edit .claude/skills/html-report/config.json only if:

• you cloned to a path the auto-detect can’t find (e.g. you copied the skill dir somewhere else and the repo lives elsewhere)
• you use a custom domain (set base_url)

That’s the entire setup.

---

Use it

In Claude Code, ask Claude to generate any report and mention the skill:

use the html-report skill to write up the results from runs/exp-42

make an html-report comparing these three checkpoints