Sumit189

Explain Claude Mod — Development skill for Claude Code

Development community

Claude Code mod: /explain answers as ASD-STE100 prose, rendered diagrams, live HTML pages, or narrated explainer videos.

How to install Explain Claude Mod

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Sumit189/explain-claude-mod and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Explain Claude Mod does

Claude Code mod: /explain answers as ASD-STE100 prose, rendered diagrams, live HTML pages, or narrated explainer videos.

Alternatives in Development

11 Permission Explainer — Permission Explainer System Prompt 2.3k ★
Asd Ste100 Skill — ASD-STE100 Simplified Technical English rules, repurposed as a Claude Code skill for rewriting ambiguous agent 1.5k ★
Nopus — Deterministic prose checks for clearer coding-agent responses 239 ★

README

explain-as

A Claude Code mod that asks Claude for its output in a format that is easier to understand. It is based on the idea that we will spend more and more time reading LLM output, so the output format matters.

!["How a transformer works" in HTML mode: Claude's summary on the left, the interactive page previewed in the pane on the right](assets/transformer-html.png)

Format	What Claude does
`ste`	Writes about 80% of the way to ASD-STE100 Simplified Technical English: short sentences, active voice, simple words
`diagram`	Draws a Mermaid diagram, rendered as a picture in a pane you can zoom and pan, with short captions
`html`	Builds a self-contained, interactive HTML page: a preview in the pane, and the live page in your browser
`video`	Makes a 3Blue1Brown-style animated explainer in plain JavaScript (canvas) that opens and plays in Chrome, narrated with your device's text-to-speech (ElevenLabs only if you set `ELEVENLABS_API_KEY`); a Record button saves it as .webm

Usage

/explain                           # open the picker band above the prompt
/explain html                      # every answer as an HTML page from now on
/explain off                       # back to normal
/explain diagram how git rebase works   # one answer only

In `html` and `diagram` mode Claude writes the page (or Mermaid source) to `.explain/` in your project. The mod screenshots it with headless Chrome, Chromium or Brave and shows the picture in a pane inside Claude Code (needs a terminal with image support, such as Ghostty, kitty, iTerm2 or WezTerm). In the pane, focus it (click or ctrl+x tab) and use `i`/`o` to zoom in and out, `h` `j` `k` `l` (or the arrow buttons) to scroll, `r` to reset, and `v` (**● live**) to open the real, interactive page in the browser; on macOS that Chrome tab refreshes by itself each time Claude updates the page; zoom uses `ffmpeg` if it is installed. `/explain show` reop