```shell /generate-report my awesome html report ```

Ask an agent to "write an HTML report" and it improvises the whole document from scratch every time — its own CSS, its own layout, its own guess at what looks good. That's expensive and inconsistent: every report burns tokens re-deriving boilerplate it already wrote last time, and every report looks different because there's no shared design to fall back on. `generate-report` fixes that by splitting the job in two. The agent's only responsibility is **content and structure** — the topic, the facts, which semantic tag fits each piece (a `<card>`, a `<stat>`, a `<chart>`). A shared renderer, loaded from one `<script>` tag, owns everything about how it looks. **Content-only generation** The agent never writes CSS, `class`, `style`, or a `<div>`. If it's making a visual decision, it's off-spec. **Lower token cost** No boilerplate HTML/CSS to regenerate per report — just the small tag vocabulary plus the actual content. **Consistent UI, every time** Every report shares one design system. Improve it once in the repo, every report generated afterward picks it up automatically.

```bash curl -fsSL https://generate-report-add5b3.gitlab.io/install.sh | bash ``` Then invoke it: ``` /generate-report draft a report about how to read a book ``` The agent writes `report-how-to-read-a-book.html` in the current directory (or a path you give it) — open it in any browser, no server, no build step.

- `cover` — hero header, once per document - `section` — titled block, the main structural unit, also the vertical layout primitive (gap between children) - `row` — horizontal flex layout, gap + per-child flex weight - `markdown` — all prose, never hand-written `<p>`/`<ul>` - `card` / `badge` — emphasis and inline claim-labeling - `stat` / `chart` — quantitative content - `image` / `divider` / `progress-bar` — media, separation, completion Tables aren't a separate tag — write standard GFM table syntax inside `markdown` and it renders as a real, styled table.

{fact:Fact} Reports load in a real browser, offline-editable, no server required. {assumption:Assumption} The CDN needs network access at view-time — not fully offline. {claim:Claim} Skipping the shared renderer and hand-writing HTML per report is the expensive default this replaces.

Fenced code blocks get syntax highlighting (highlight.js, auto-detected from the fence language) and a click-to-copy button, no extra markup: ```js function slugify(topic) { return topic.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-"); } ```

Standard GFM table syntax, rendered by the JS parser — no `<table>` tag, no raw HTML: | Item | Status | |---|---| | Document billing pipeline runbook | {success:Done} | | Load test checkout under 2x traffic | {warning:Open} |

- **Repo**: `gitlab.com/jinlei/generate-report` - **Tag reference**: `SPEC.md` in the repo root - **Skill instructions**: `skills/generate-report/SKILL.md` - **Runtime**: served via GitLab Pages, latest push to `main`, no version pinning yet - **Feedback / bugs**: `gitlab.com/jinlei/generate-report/-/issues` To change the visual theme or add a tag, edit the repo directly — every report generated afterward (and this page itself) picks it up automatically via the CDN.

```bash curl -fsSL https://generate-report-add5b3.gitlab.io/uninstall.sh | bash ``` Add `claude` or `codex` to remove just one. No network access needed.