html-artifactslisted

Produce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "summary," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "incident report," "playground," or a one-off "editor" or "tool" for triaging/reordering/tuning anything — even if they don't explicitly say "HTML" or "artifact." Also trigger when the user asks Claude to "explain," "summarize," "compare," "explore options for," "brainstorm directions for," or "walk through" a non-trivial topic. Stay in markdown only for short conversational replies, code-only outputs, terminal-style command answers, and content that's genuinely just a few sentences.
dovydaskarbutovskis20-art/html-artifacts · ★ 1 · Web & Frontend · score 74

Install: claude install-skill dovydaskarbutovskis20-art/html-artifacts

# HTML Artifacts Markdown is the default agent output, but for anything longer than a handful of sentences it's a poor format. It can't show two options side by side, can't render a real diagram, can't be interactive, and can't be shared by link. HTML can do all of those — and when the artifact is the deliverable rather than something you'll skim and forget, the difference between "a document I'd skim" and "a document I'd actually read" is enormous. The use cases below are not the only places HTML helps, but they cover most of the territory. The pattern in every category is the same: the agent picks a layout that makes the *shape* of the content visible, instead of flattening it into linear prose. ## When to reach for HTML Reach for HTML when **any** of the following is true. Don't wait for the user to ask explicitly. - **Comparison.** Two or more options/approaches/designs the reader needs to weigh against each other. Side-by-side beats stacked. - **Spatial information.** Diffs, call graphs, module maps, flowcharts, timelines, before/after — anything where position carries meaning. - **Interaction matters.** Animations, easing curves, parameter tuning, state transitions — things the reader needs to *feel*, not read about. - **Reference material.** A document the reader will navigate non-linearly: tabs, collapsible sections, glossary in the margin, jump links. - **Color or hierarchy carries meaning.** Severity tags, status colors, syntax highlighting, design tokens. - **