cd /news/ai-agents/skill-and-visualisation-kit-to-help-… · home topics ai-agents article
[ARTICLE · art-136019] src=github.com ↗ pub= topic=ai-agents verified=true sentiment=· neutral

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.

read1 min views2 publishedSep 21, 2026
Skill and visualisation kit to help developers understand PRs better
Image: Michielbdejong (auto-discovered)

The shape of this skill follows Blake Smith's code review hierarchy of needs: 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 for before/after sequence diagrams (from mermaid.min.js next to figure.js, otherwise jsDelivr).

Four scenes from grafana/tempo #7876. 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
── more in #ai-agents 4 stories · sorted by recency
── more on @blake smith 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/skill-and-visualisat…] indexed:0 read:1min 2026-09-21 ·