pr-walkthrough

pr walkthrough

warpdotdev 146 ↓ 15k MIT updated 27d ago
Claude Code
View source ↗

What it does

  • Data flow graph: how state, data, events, requests, files, assets, or rendered output move through the changed system.
  • Code dependency graph: which changed components depend on each other, where the major seams are, and which files are entry points versus leaf dependencies.
  • User action graph: what the user does, what surface they interact with, and how that action flows through the implementation.
  • .warp/pr-walkthrough/index.html
  • https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js
  • Use a Warp dark surface: #121212 for the page background, #1e1e1d/#292929 for panels, and #faf9f6 or #ffffff for text.
  • Keep copy truth-seeking, technical, concise, and verifiable. Avoid marketing superlatives and generic buzzwords.

Requirements & configuration

  • The site must be loadable directly from the local filesystem with a file:// URL. Do not require a dev server, package install, bundler, or build step.
  • Each view needs a tour: a sequence of node IDs and explanatory text. The tour should guide the reviewer in a deliberate order. It should not merely select nodes in arbitrary file order.
  • 2. Verify the HTML does not require network access except for the explicitly documented, pinned official D3 CDN runtime.
  • python3 .agents/skills/pr-walkthrough/scripts/validated3canvas.py --html .warp/pr-walkthrough/index.html --require-browser
  • The user needs a Cloudflare account.

Configuration: PRODUCTTECH

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

pr walkthrough

Source

Repository: https://github.com/warpdotdev/common-skills

pr-walkthrough FAQ

What does the pr-walkthrough skill do?

Generate a static interactive D3 walkthrough of a pull request. Use when the user wants a zoomable PR map, graph/canvas PR orientation, or alternate visualization of PR system components, data flow, code dependencies, and user actions. Data flow graph: how state, data, events, requests, files, assets, or rendered output move through the changed system. Code dependency graph: which changed components depend on each other, where the major seams are, and which files are entry points versus leaf dependencies.

What does pr-walkthrough require?

The site must be loadable directly from the local filesystem with a file:// URL. Do not require a dev server, package install, bundler, or build step. Each view needs a tour: a sequence of node IDs and explanatory text. The tour should guide the reviewer in a deliberate order. It should not merely select nodes in arbitrary file order. 2. Verify the HTML does not require network access except for the explicitly documented, pinned official D3 CDN runtime. python3 .agents/skills/pr-walkthrough/scripts/validated3canvas.py --html .warp/pr-walkthrough/index.html --require-browser The user needs a Cloudflare account. Configuration keys: PRODUCT, TECH.

How do I install pr-walkthrough?

Run: npx -y skills add https://github.com/warpdotdev/common-skills --skill pr-walkthrough --agent claude-code — the source lives at github.com/warpdotdev/common-skills.

Maintain pr-walkthrough?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

pr-walkthrough on getagentictools
[![pr-walkthrough on getagentictools](https://getagentictools.com/badge/skills/warpdotdev-common-skills-pr-walkthrough.svg)](https://getagentictools.com/skills/warpdotdev-common-skills-pr-walkthrough?ref=badge)
npx agentictools info skills/warpdotdev-common-skills-pr-walkthrough

The second line is the CLI lookup for this page — handy in READMEs and docs.