html-artifact

Topics in the source

• HTML Artifact Skill
• Scope — one mode-switched skill
• Reference files (load on demand)
• Templates
• Workflow
• Core principles
• Quick reference — mode → what to build
• Pitfalls

Produce a single self-contained .html file — no build step, no dependencies, no CDN — whenever the deliverable is something a human should read, share, or poke at: a concept explainer, an implementation plan, a status/incident report, a code-review walkthrough, a technical or educational diagram, a set of design variants, or a throwaway editor that exports its result back to you. HTML beats Markdown once a doc has color, layout, diagrams, tables, code, or interaction. It opens in any browser, shares as a link, stays readable past 100 lines, and can carry SVG diagrams and live controls Markdown can't. Default to an HTML artifact when the user says "make an HTML file/artifact", or asks you to explain how X works, write up a plan/PR/report, diagram something, compare options, or prototype an interaction — even when they don't say "HTML". Three overlapping diagram-ish skills were folded into this one for a concrete reason: they all emitted the same artifact — a single self-contained HTML file with inline CSS/SVG — and overlapped heavily (three "diagram" paths, two "compare variants" paths, no shared token system). One mode-switched skill removes the which-one-do-I-load ambiguity and gi

This is an excerpt. Refer to the complete source and its current requirements.