Generate interactive PR Walkthroughs with a single Skill

While we’re waiting for someone to re-invent Github I put together a useful skill that can help folks better understand agent (or human) generated PRs.

It’s called /pr-walkthrough and it’s available here.

npx skills add warpdotdev/common-skills --skill pr-walkthrough

What it does:

• Takes a PR link as input (e.g. https://github.com/warpdotdev/warp/pull/12518, which I’m currently noodling on for Warp in my free time)
  
• Creates an interactive website with plain HTML/CSS/JS and D3 for visualization. This UI walks through the key components of the change from four angles:
  

A system overview – what are the major components?

The data flow – what are the inputs and outputs?

Code dependency graph – useful for seeing how the components relate

The user experience – a step by step walkthrough of the user changes

It’s built using D3 and is interactive so you can explore the PR using a custom per-PR GUI.

It’s pretty easy and cheap to put this into CI and have a cloud agent like Oz run it for you.

If you want to generate visualizers for every PR, here’s a guide on how to set it up in CI using GitHub Actions + GitHub Pages to host the mini-site: https://github.com/warpdotdev-demos/pr-walkthrough-ci

Would love feedback. Contributions to the skill are welcome!