| name | explain-anything-html |
| description | Use when the user asks for a rich explanation of a research paper, blog post, article, documentation, or any complex concept. Produces HTML output. Use this skill whenever the user wants to deeply understand or explain a paper, blog, or hard idea — e.g. "explain this paper", "help me understand this blog post", "break down this concept" — even if they don't explicitly ask for HTML. |
Explain Anything
Please make me a rich, interactive explanation of the specified subject — a paper, a blog post, an article, or any complex concept.
It should have these sections:
- Background: Explain the existing context relevant to this subject. (You should broadly explore the source material — and, where useful, the related work or prerequisite ideas it builds on.) We don't know how much the reader already knows, so include a deep background for beginners (note that it can be skipped if the reader is already familiar), and then a more narrow background directly relevant to the subject.
- Intuition: Explain the core intuition — the paper's central idea, the blog's key argument, or the essence of the concept. The focus here is to explain the essence, not the full details. Use concrete examples with toy data. Use figures and diagrams liberally.
- Walkthrough: Do a high-level walkthrough of the substance — the methods, arguments, results, or key sections. Group/order the material in an understandable way rather than just following the source order when a different order explains it better.
- Quiz: Come up with five questions that test the reader's knowledge of this subject. This should be medium difficulty, difficult enough that you actually need to understand the substance to answer them, but not gotchas. The goal is to help the reader make sure that they've actually understood. These should be presented as interactive multiple-choice questions, and when the user clicks, it tells them whether they were correct and gives feedback.
Format:
- Output a single self-contained HTML file which includes CSS and JavaScript. Make the whole thing one long page with section headers and a table of contents. Don't use tabs for the top-level structure. Basic responsive styling so you can view it on a phone is nice too. Put the file in a global place on my computer outside of the code repo, and make sure the filename always starts with today's date in
YYYY-MM-DD- format, because it helps keep the files time-sorted and out of version control. For example: /tmp/2026-01-12-explanation-.html
- Please write with the clarity and flow of Martin Kleppmann, making it engaging and written in classic style. Transitions between sections should be smooth.
- Some tips on diagrams. Ideally, you should pick a small number of diagram families that can be reused throughout the explanation to explain various cases. Some useful kinds of diagrams:
- A schematic or conceptual diagram that illustrates the key idea, before/after states, or how the pieces relate. Make it concrete with example values where you can.
- A system diagram showing data flow or the relationship between components/steps. Make sure to include example data here!
- Don't use ASCII diagrams. Always use simple HTML designs for your diagrams, HTML lists for lists of things, etc.
- For code blocks, equations, or any preformatted text, always use
<pre> tags. If you use a custom styled div instead, it must have
white-space: pre-wrap in its CSS, or the browser will collapse all newlines into a single line.
Before saving the file, scan each code block in the HTML source and confirm its CSS includes
white-space: pre or pre-wrap.
- Use callouts for key concepts or definitions, important edge cases, etc.
Adapted from explain-diff-html, which is based on Geoffrey Litt's original skill: https://gist.github.com/geoffreylitt/a29df1b5f9865506e8952488eac3d524
