# Skill and visualisation kit to help developers understand PRs better

> Source: <https://github.com/annanay25/explain-pr>
> Published: 2026-09-21 15:07:53+00:00

The shape of this skill follows [Blake Smith](https://blakesmith.me/)'s [code review hierarchy of needs](https://blakesmith.me/2015/02/09/code-review-essentials-for-software-teams.html): the most important job of a review is to keep the team's mental model of the system aligned as it changes. Catching bugs and debating design sit below that. Style is last. A walk is for that first job — what changed, how it works now, and what is in the blast.

A visual language for explaining pull requests. **One CSS file, one small JS file. No npm, no build.**

A coding agent emits a **short walk** of the PR (a few scenes, one claim each). Click a component to open its note and follow-up prompt in an overlay anchored beside the clicked object without moving the scene. The page header links to the pull request's original Files Changed view when a GitHub PR is available. The popup title matches the clicked label. Type a question and copy the prompt back into the agent. Close with Escape, the Close button, or a click outside; your question is kept when you reopen that component.

`figure.css` inlines Fraunces, IBM Plex, and the glyph icons. `figure.js` fills the question box and copy button, and lazy-loads [mermaid.js](https://mermaid.js.org/) for before/after sequence diagrams (from `mermaid.min.js` next to `figure.js`, otherwise jsDelivr).

Four scenes from [grafana/tempo #7876](https://github.com/annanay25/explain-pr/blob/main/walks/tempo-kafka-brokers.html). Typical shape: what changed, why it matters, how it works, and the blast radius.

**01 · What changed**

**02 · Why it matters**

**03 · How it works**

**04 · Blast radius**

Double-click `index.html`, or File → Open in a browser. Nothing to install. Do not start a server.

Load `skills/explain-pr/SKILL.md`. Copy `figure.css` and `figure.js` next to the HTML the model emits. The component palette is `catalog.html`.

```
python3 scripts/build-css.py
```


