About explain-webpage
explain-webpage is a skill for turning an idea into a compact, interactive HTML explanation. It guides authors through choosing an example, checking accessibility and responsive behavior, and testing the result before returning it.
Key features
- 01Create self-contained HTML explanations
- 02Add interactions that clarify mechanisms
- 03Preserve distinctions between facts and assumptions
- 04Check accessibility and narrow-screen layouts
- 05Test controls and underlying examples
Use cases
- 01Explain a technical idea through an interactive example
- 02Build a small HTML explainer without an existing app
- 03Validate an explanation page before sharing its HTML
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/explain-webpagein Claude Code to confirm it loaded.
Details
From the project READMEExplain in HTML
Karpathy's premise: custom, disposable software can make an idea easier to understand.
- Find the reader's main question. Choose one example that makes the mechanism concrete. Keep facts, assumptions, and unknowns distinct.
- Create a complete HTML page. Prefer one self-contained file with embedded CSS and JavaScript unless the user already has an app or needs separate assets.
- Add interaction where it teaches: change an input, reveal a step, compare scenarios, or watch a mechanism. Show what changed and why. Avoid decorative controls.
- Use clear hierarchy, readable type, and short explanations. Give controls labels, keyboard access, and visible focus. Support narrow screens and reduced motion.
- Open the page, exercise its controls, and check a narrow viewport. Verify the underlying example as well as the appearance. Fix issues and return the HTML with a short instruction for opening it. Disclose anything you could not test.
Use animations to direct attention. Keep the page as small as the explanation allows. Do not publish it unless the user asks.
Comments
Markdown supported