artifact-explainer

OUTPUT CONTRACT

Produces ONE .html file. Not markdown. Not .md. Not plain text.

Explainers are interactive HTML artifacts. Collapsibles, tabs, and tooltips render as real jQuery UI widgets — NEVER as markdown <details> placeholders or markdown headings pretending to be sections. The file extension is .html, always.

Use the template in templates/. Inline artifact.css inside <style> (Mode B — single-file portable) or <link> to it. Always load the jQuery 4.0.0 + jQuery UI 1.14.2 layer per artifact-css/SKILL.md.

Pedagogical HTML artifacts. The reader arrives knowing nothing; they leave with enough mental model to make a decision, search effectively, or argue back with conviction. This is the artifact archetype where progressive disclosure matters most — a flat page of paragraphs is the wrong shape.

Read artifact-css/SKILL.md first for the full OUTPUT CONTRACT, the design system, the page skeleton, and the Interactivity layer section that documents the jQuery + jQuery UI loader pattern. Explainer artifacts always opt-in to that layer.

When to reach for this skill