crafting-htmllisted

# Crafting HTML Artifacts HTML is the right medium for share-once expository content. It carries information density that markdown cannot match (tables with design, SVG diagrams, color-coded annotations, syntax-highlighted code blocks, expandable sections, mobile-responsive layout), it shares as a link without rendering tools, and it supports two-way interaction (sliders, copy-as-prompt buttons, drag-and-drop editors). Markdown's editability advantage does not apply to artifacts the reader does not edit. This skill differs from `frontend-design`. `frontend-design` builds UI and components, where the artifact is part of a product. This skill produces single-file expository HTML documents, where the artifact is a communication. ## When NOT to use this skill - Specs: use `workbench:writing-spec`. - Plans: use `workbench:writing-plans`. - Brainstorm summaries: use `workbench:brainstorming`. - Debug reports: use `workbench:systematic-debugging`. - Research reports: use `research:research`. - Multi-slide presentations with a deck-stage engine and presenter mode: use `workbench:crafting-presentations`. The `references/09-slide-deck.html` template here is the quick single-file fallback for one-off decks. - UI or component code: use `frontend-design`. ## Five categories of HTML artifacts | Category | Reference files | |---|---| | Specs, planning, exploration | `references/01-exploration-code-approaches.html`, `references/02-exploration-visual-designs.html`, `references/16-implem