Eli5

eli5

Explain the topic like the reader knows nothing about it and has no reason to care yet. Output is one self-contained HTML file dominated by pictures, carrying as few words as the explanation can survive on.

When to use

• Use when the ask is「解釋給完全不懂的人聽」and the deliverable is a visual, not a paragraph.
• Skip when the reader already knows the domain and wants density — that is infographic-design.
• Skip when there is existing prose to simplify rather than a topic to explain — that is plain-speak.

Visual implementation routing

ELI5 owns the teaching design: one idea, one analogy, minimal language, and the honesty note. Delegate visual implementation to the narrowest available sibling skill when its scope matches:

• Use $visual-craft for deliberate visual language, composition, styling, or restyling of structured visual work.
• Use $infographic-design for polished explanatory SVG or single-file HTML graphics.
• Use $theme-factory when the user asks to apply or compare a named artifact theme.
• Use $visualize when the user wants an interactive visual in the conversation, such as adjustable inputs, a simulator, or a UI preview.
• Use sites-building only when the requested deliverable is a website or app rather than one standalone explainer.
• After producing a fixed-layout visual artifact, use visual-output-qa when it is available to inspect the rendered result.

Keep ELI5 primary for beginner teaching, and use one visual skill as the primary implementation owner. Add another only when their responsibilities are complementary. If no sibling skill is available, continue with inline SVG and CSS.

Procedure

1. Find the one thing. Name the single idea the reader must walk away with. Everything that does not serve it is cut, including facts that are true and interesting. A second idea is a second explainer.
2. Find the everyday analogy. Map the topic onto something the reader has physically handled — post, queues, keys, water, a phonebook. The analogy must hold for the whole explainer; if it breaks halfway, pick another one rather than patching it.
3. Break it into 3-6 steps. Each step is one picture and one short sentence. If a step needs two sentences, it is two steps.
4. Draw it. Inline SVG, big shapes, strong contrast, labels in the picture. Each step gets a visual that would still be readable with the caption removed. No stock-icon soup, no decorative clip art that carries no meaning.
5. Strip the words. Delete every term the reader would have to look up, every qualifier, and every sentence that only exists to be precise. Numbers stay only when the number is the point.
6. Close with the payoff. One line on what this lets the reader understand or do next — not a summary of what they just read.
7. Say what you simplified. Below the explainer (not inside it), list in one or two lines the places where the analogy is not literally true, so the reader can go deeper without carrying a wrong model.

Output

Write a single .html file: inline CSS and SVG, no external fetches, readable on a phone, sensible in both light and dark. Where the harness can publish artifacts, publish it and hand back the link; otherwise leave the file on disk and give the path. Use the visual implementation routing above for the visual pass; this skill's job is the explanation, not the styling engine.

Keep it to one screen-scroll. An eli5 that needs a table of contents has stopped being an eli5.

Why

The failure mode of a beginner explainer is not being too simple, it is being secretly complete: the writer keeps the caveats, keeps the correct vocabulary, and adds an analogy on top. The reader then has to learn both the topic and the analogy. Cutting to one idea, one analogy, and one picture per step is what makes the thing land — and the honest note about what was simplified is what keeps a useful lie from becoming a wrong belief.