Eli5

• Help the user understand the current topic of conversation visually. Skip the preamble and keep prose brief. Pick the smallest view that makes the key point clear
• Explain like I'm someone who knows nothing about this topic, using clear visuals and few words
• Show the core mental model

Choose the output format

Use exactly one format:

• Chat (default): Give the short visual explanation directly in chat, using the blocks below. Do not create a file or run the HTML steps.
• HTML (only on explicit request): If the user requests HTML, a presentation, or an interactive explanation, follow "HTML output" below to create and share one self-contained HTML file.

Kinds of blocks or examples

• Show logic or an algorithm as pseudocode:

on(save)
  if content is unchanged
    return cached result
  write new content
  return fresh result

• Show runtime control flow as a call tree:

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• Show UI structure as a component tree, including state and module boundaries that matter:

<SessionPage> (apps/example/src/routes/session.tsx)
  useSessionEvents()
  <SessionToolbar>
    <RunSkillButton> (packages/ui)

• Show file responsibility or a broad refactor as a shallow file tree:

src/
├── commands/       # parses user actions
├── sessions/       # owns session state
└── transport/      # sends API requests

• Show component interaction, control flow, or data flow with Mermaid:

sequenceDiagram
    participant User
    participant UI
    participant Daemon
    User->>UI: choose command
    UI->>Daemon: send expanded prompt
    Daemon-->>UI: stream result

• Use diff when the point is what changes and the surrounding shape already exists. Match the diff shape to the topic.

For a component change:

 <SessionPage>
   useSessionEvents()
   <SessionToolbar>
+    <RunSkillButton />
   <SessionTimeline>
+    <SkillResultCard />

For a file-layout change:

 src/
 ├── commands/
+│   └── show-me.ts       # expands the slash command
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

For a call-tree or call-stack change:

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
     launchAgent
-  navigateToSession
+  navigateToSession
+    subscribeToEvents

For a state or control-flow change:

 on(save)
-  write content
+  if content is unchanged
+    return cached result
+  write new content
+  invalidate cache

• Show the whole block when most of it is new, when omitted context would hide ownership or order, or when the user needs a copyable target shape:

function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `use the ${skillName} skill`
}

HTML output (only when selected above)

For the requested HTML output, choose a diagram, an infographic, or a short slide deck, whichever fits the point. Match the product's colors, type, spacing, and components; use real labels and data; support desktop and mobile. Then share it with the user; see "Share it" below.

Build one HTML file

Create eli5-<topic>.html in the current workspace unless the user gives a path. Use a safe, short, lowercase topic name.

The file must contain all HTML, CSS, JavaScript, SVG, and other image data. Do not create companion files. Do not load a CDN, web font, framework, Mermaid, analytics, or any remote asset. Source links may point to the web, but the presentation must work without them.

The presentation must include:

• System fonts, readable line lengths, and body-text contrast of at least 4.5:1.
• Visible keyboard focus, semantic headings, real buttons, and useful accessible names.
• No autoplay. Honor prefers-reduced-motion and keep the content usable without animation.

Share it

When the harness offers an artifact publishing tool, load the artifact-design skill before publishing, and also load artifact-diagramming when the topic is diagram heavy. Publish the HTML file through that tool and skip local serving.

Otherwise, serve the containing directory over HTTP instead of opening the file through file://. Reuse an existing local server when the project has one. Otherwise, start a loopback-only static server on an available port:

python3 -m http.server 8000 --bind 127.0.0.1 --directory "/absolute/path/to/output-directory"

Run the server in a way that does not block the remaining work. Record its process ID or use the harness process controls so it can be stopped later. Do not expose the server to the local network. Do not deploy the artifact unless the user asks.

Open the exact page URL, for example http://127.0.0.1:8000/eli5-<topic>.html:

• On macOS, run open on the URL.
• On Linux with a display ($DISPLAY or $WAYLAND_DISPLAY set), run xdg-open on the URL.
• Otherwise, print the absolute path instead of opening it.

Return to the user

Do not paste the HTML into the response. Give the user:

• The published link, or the artifact path and local URL when serving it yourself.
• One sentence about the journey the presentation teaches.
• The two or three deeper paths offered on the final step.

Keep the response short. The presentation is the explanation.