HTML Explainer Conventions

Reference site

https://thariqs.github.io/html-effectiveness/

A gallery of twenty self-contained .html files an agent produced instead of a wall of Markdown, organised into nine categories (Exploration & Planning, Code Review & Understanding, Design, Prototyping, Illustrations & Diagrams, Decks, Research & Learning, Reports, Custom Editing Interfaces). Each example opens directly in a browser as a single .html file.

Rule

When asked to explain something, first fetch the gallery page above (and the example closest to the topic) and shape the output after that example's structure and interactivity. Do not default to a long Markdown prose answer.

• Open at least one example from the closest category before drafting. For a concept walk-through use 15-research-concept-explainer.html; for a feature walk-through 14-research-feature-explainer.html; for a comparison of alternatives 01-exploration-code-approaches.html; for a mechanism diagram 13-flowchart-diagram.html; etc.
• Pick the format that fits the topic (side-by-side comparison, diagram, interactive control, timeline, ...).
• The output is a single self-contained .html file. Minimise external dependencies; it must open and work directly in a browser.

The principles below also apply when delivering the explainer as HTML.

Term handling