explain-in-html
Respond with rich, self-contained HTML pages instead of plain text, plus an HTML code-changes report skill.
Open source Open in the app JSON README (API)
About
Respond with rich, self-contained HTML pages instead of plain text, plus an HTML code-changes report skill.
Details
- Kind
- Plugins
- Topic
- No topic detected
- Publisher
- vast00
- Origin
- gemini
- Category
- ferramentas
- Version
- 1.0.0
- Stars
- 1
- Last push
- 2026-08-24T07:06:31Z
- Repository state
- ativo
- License
- MIT
- Added
- 2026-08-30 14:13:39
- Updated
- 2026-08-30 14:13:39
- Origin id
vast00/explain-in-html
README
# explain-in-html
One plugin, two skills for turning answers into rich, self-contained HTML pages:
| Skill | What it does |
|---|---|
| `explain-in-html` | Respond with a visual HTML page (diagrams, mockups, tables, multi-language switcher) instead of terminal text, and open it in the browser. Triggers on "explain in HTML", "show me in a page", "in html", … |
| `code-changes-report` | Walk a reader through a branch / PR / diff as an HTML report — every file, every changed line with real source line numbers, editor deep-links, why-first annotations. Triggers only when the subject is an actual code change. Renders through `explain-in-html`. |
## Install
Claude Code:
```
/plugin marketplace add vast00/explain-in-html
/plugin install explain-in-html@explain-in-html
```
Other runtimes — the skills are runtime-neutral (SKILL.md format), and this repo ships the
matching manifests (`.codex-plugin/`, `.cursor-plugin/`, `.kimi-plugin/`, `gemini-extension.json`).
Install through each runtime's own plugin/extension mechanism pointed at this repo, e.g.:
```
gemini extensions install https://github.com/vast00/explain-in-html
```
## Two modes
**Dev mode** (default) — a page for yourself, on this machine.
- Single language by default, following `default_language` (`auto` = the language you
converse in, or a fixed tag).
- editor deep-links with absolute local paths.
**Share mode** — a page for anyone.
- Multi-language switchable by default: your `languages` set, or the languages you name.
- No personal paths or machine-specific values; file links are relative, composed from an
on-page "your repo root" input; survives sandboxed viewers where scripts or storage
can't run.
**Picking the mode**
Language count hints the mode:
Several languages ("in en, ja and zh-Hans") ⇒ Share, a single one ("in ja") ⇒ Dev.
But what you explicitly ask for always wins — a shareable single-language page is fine. Whichever way a mode is chosen, its link and no-leak rules always apply.
- **Dev**: it's the default — just ask for a page, nothing to say. When your request would
otherwise read as Share (e.g. it asks for several languages), force Dev with "just for me"
or "in dev mode".
- **Share**: name it ("in share mode", "make it shareable"), use audience words ("for the
team", "for reviewers"), or ask for several languages ("in English and Japanese").
- To change which mode you get by default, set `default_mode: share` (or `dev`) in the
settings file (see Configuration below).
## Configuration
Works with zero configuration. To customize, create `.explain-in-html/config.local.yaml` in a
project (per-project settings) or `~/.explain-in-html/config.yaml` (your global defaults).
Project overrides user; unset keys fall back to defaults. One file configures both skills.
The paths are runtime-neutral — the same files work in every agent runtime.
```yaml
output_dir: ~/.explain-in-html/reports # where generated pages are written
auto_open: true # open the page in the browser when done
default_mode: dev # "dev" | "share" — see Two modes above
default_language: auto # "auto" = the language you converse in, or a fixed tag: "en", "ja", "zh-Hans", …
languages: auto # multi-language page set when you don't name one: "auto" = your conversing language + "en", or an explicit list ["en", "ja", …]
theme: dark # free-form: "dark" (default), "light", or any style description ("solarized", "newspaper", …)
editor: vscode # deep-link scheme: "vscode" | "vscode-insiders" | "vscodium" | "cursor" | "windsurf" | "idea" | "phpstorm" | "webstorm" | "goland" | "clion" | "none" | "custom"
editor_link_template: "" # for editor: custom — e.g. "myeditor://open?file={path}&line={line}"
```
| Key | Default | Meaning |
|---|---|---|
| `output_dir` | `~/.explain-in-html/reports` | Directory the HTML files are written to |
| `auto_open` | `true` | Open the generated page in your default browser |
| `default_mode` | `dev` | Mode when you don't specify one: `dev` (private) or `share` (shareable) |
| `default_language` | `auto` | Dev-mode page language when you give no signal; `auto` follows your conversation language |
| `languages` | `auto` | Languages of Share-mode / multi-language pages when you don't name them: your conversing language + `en`, or an explicit list |
| `theme` | `dark` | Page look — `dark`, `light`, or any free-form style description |
| `editor` | `vscode` | Which editor file links open in (`none` = plain text paths) |
| `editor_link_template` | — | Custom link template with `{path}` / `{line}` placeholders |
You don't have to edit these files by hand — settings management is part of the skill itself,
with two entry points:
- **Natural language** — in plain conversation, or invoking the skill
(`/explain-in-html put reports in ~/reports from now on`): "show my explain-in-html settings" lists every
key with its effective value and where it comes from (project file / user file / default);
"default the language to Japanese" changes your user-level default; "use the light theme in
this project" writes the project file instead. A one-off request ("this time in English")
applies to the current page only and is never saved.
- **The structured `settings` option**:
```
/explain-in-html settings view all keys (value + source)
/explain-in-html settings theme view one key
/explain-in-html settings default_language ja set (user level)
/explain-in-html settings theme light --project set in this project
/explain-in-html settings unset theme remove, fall back to next level
```
## License
MIT