Visual Learner

Create an interactive HTML explainer that lets the reader understand by doing. Prefer a portable single-file artifact unless the user asks for a larger app. The artifact must behave like an instrument, simulator, map, or game board; a beautiful article with buttons is not enough.

Workflow

1. Identify the learning goal in one sentence: what should the reader remember or be able to explain after the artifact?
2. Research the topic enough to avoid shallow metaphors. For current facts, libraries, APIs, laws, prices, or examples, browse primary or official sources and cite them in the final response.
3. Choose the smallest fitting explainer shape:
   • Reactive document for assumptions, formulas, tradeoffs, policy, finance, or scientific claims.
   • Explorable example for algorithms, math, physics, architecture, and causal mechanisms.
   • Simulation for feedback loops, emergent behavior, queues, networks, social dynamics, and probabilistic systems.
   • Scrollytelling for stepwise arguments, timeline narratives, or data journalism.
   • Small game for strategy, incentives, negotiation, memory, classification, or concepts where consequences teach better than prose.
4. Define the load-bearing model before layout: state variables, rules/formulas, reader actions, visual consequences, and the intended surprise or memory hook.
5. Design from concrete to abstract. Start with a direct interaction in the first viewport; introduce terms only after the reader has manipulated or observed the system.
6. Build the artifact. Default to one .html file with inline CSS and JS, no build step, and CDN dependencies only when they materially reduce risk.
7. Verify the artifact in a browser when possible. Check desktop and mobile layout, no overlapping text, meaningful interaction states, accessible labels, and nonblank visuals.
8. Final response: link the artifact path, summarize the explainer model, list verification performed, and mention any source or test gaps.