HTML Viewer Skill — Data skill for Claude Code

html-viewer-skill

[English](#english) · [中文](#中文)

---

English

A [Claude Code](https://claude.com/claude-code) skill that turns local data into a good-looking web page or dashboard and serves it over a key-gated localhost HTTP server.

What's inside

File	Purpose
SKILL.md	When and how Claude uses the skill: workflow, design bar, serving rules.
scripts/quick_view.py	Zero-code views for CSV/TSV, JSON/JSONL, logs, Markdown/text, images, directories.
scripts/viewer_kit.py	Component library: theme (light/dark), sidebar TOC, search, facet filters, sortable tables, tabs, grids, galleries with lightbox, timelines, JSON highlighting. Outputs one self-contained HTML file, no CDN.
scripts/serve_viewer.py	Serves a directory on 127.0.0.1 with a per-session key; --list / --stop.
references/page-recipe.md	API reference and patterns (eval dashboard, record browser, A/B compare, image wall, timeline).

Python 3.8+, standard library only.

Install

git clone https://github.com/caseclose/html-viewer-skill ~/.claude/skills/html-viewer

For a single project instead, clone into `/.claude/skills/html-viewer`. The skill locates its scripts relative to its own directory, so either location works.

Use without Claude

python3 scripts/quick_view.py results.csv            # writes results.view.html next to it
python3 scripts/serve_viewer.py --dir . --page results.view.html
# open the printed VIEWER_URL (it includes ?key=...)

From another machine: `ssh -L PORT:127.0.0.1:PORT user@host`, then open the URL with `localhost`.

Security

The server binds loopback only and requires a random key on every request. It never exposes itself to the network; doing that is left to the user, deliberately.

---

中文

一个 [Claude Code](https://claude.com/claude-code) skill：把本地任意数据（表格、JSON/JSONL、日志、图片目录、评测结果、轨迹……）做成好看的网页或看板，并通过只监听本机、带访问密钥的 HTTP 服务打开。

包含什么

文件	作用
`SKILL.m