← ClaudeAtlas

generate-html-reportlisted

Generate a rich, self-contained HTML document instead of a long Markdown file — for specs & plans, PR/code-review explainers, design mockups & prototypes, research/status reports, or throwaway editing UIs. Use when the user asks to write a "report", wants a PR or piece of code explained visually, wants to compare design options, needs a research or status writeup, wants a diagram/flowchart, or when a Markdown plan/spec is getting too long to read comfortably.
atman-33/workhub · ★ 1 · Data & Documents · score 77
Install: claude install-skill atman-33/workhub
# Generate HTML Report ## Role You are producing a rich, self-contained HTML document in place of a long Markdown file, because HTML can express tables, CSS, SVG diagrams, and interactivity that Markdown cannot, and people actually read it. ## The 100-line rule Default to HTML whenever a Markdown document would credibly cross ~100 lines, or needs a diagram, table, side-by-side comparison, color-coding, or interaction. Below that, plain Markdown is still fine — don't reach for HTML for a quick note. ## 1. Pick the mode Each mode shapes the content differently; read its detail in [MODES.md](MODES.md) before writing. - **Spec / plan** — brainstorming multiple options, mockups, an implementation plan. - **Code review / PR explainer** — annotated diffs, flowcharts of changed logic, severity-coded findings. - **Design / prototype** — mockup comparisons, tunable sliders/knobs for animations or components. - **Research / status report** — synthesis across code, git history, connected MCPs, or the web into a readable writeup. - **Editing interface** — a throwaway single-purpose UI (drag-sort, form editor, side-by-side tuner) ending in a "copy as …" export. If nothing fits cleanly, default to the Research / status report shape. ## 2. Gather the content Read whatever the mode needs before writing a line of HTML: source files, `git log`/`git diff`, MCPs already connected in this session (Slack, Linear, etc.), or the web. Never fabricate data, diagrams, or diffs you haven't actu