Skill and visualisation kit to help developers understand PRs better

A new skill and visualization kit called explain-pr lets coding agents emit a short, scene-by-scene "walk" of a pull request using one CSS file and one small JS file, with no npm install or build step required. The kit follows Blake Smith's code review hierarchy of needs, prioritizing team mental-model alignment over bug catching, design debate, and style, and includes four scenes from grafana/tempo #7876 covering what changed, why it matters, how it works, and blast radius. Clicking a component opens an anchored note and follow-up prompt overlay, and figure.js lazy-loads mermaid.js for before/after sequence diagrams.

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