Pr Walkthrough
Turn a pull request into an interactive D3 walkthrough so you and reviewers can tour changes graph-by-graph instead of scrolling a giant diff.
Overview
pr-walkthrough is an agent skill most often used in Ship (also Build docs, Launch distribution) that generates D3 multi-graph HTML tours to explain pull request changes.
Install
npx skills add https://github.com/warpdotdev/common-skills --skill pr-walkthroughWhat is this skill?
- Reusable D3 multi-graph tour shell with Warp-themed dark UI tokens
- Embeddable HTML canvas for stepping through linked graphs in one PR narrative
- Python helpers to generate walkthrough assets from PR-oriented workflows
- CDN-pinned D3 7.9.0 for self-contained static tour pages
- D3 version 7.9.0 pinned in tour scaffold
Adoption & trust: 3k installs on skills.sh; 18 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your PR is mergeable on paper but reviewers cannot see how modules, calls, or data paths connect across the change set.
Who is it for?
Refactors or multi-file features where visual flow beats a 40-tab diff for async review.
Skip if: One-line hotfixes, secret-heavy diffs you should not publish as static HTML, or teams that forbid external D3 CDN scripts without a vendored copy.
When should I use this skill?
You need an interactive HTML walkthrough of PR or multi-graph change structure for review or communication.
What do I get? / Deliverables
You get a themed, steppable D3 walkthrough page that links graphs into one PR story reviewers can follow without re-deriving the architecture from the diff.
- D3 multi-graph walkthrough HTML
- Python tour scaffolding helpers
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
PR walkthroughs are canonical on the Ship shelf because they support review and merge readiness right before release. Review subphase is where explain-the-diff narratives and visual tours reduce missed context in code review.
Where it fits
Generate a graph tour from a feature branch so future-you remembers why files moved.
Walk reviewers through service boundaries before approving a risky refactor.
Attach the HTML tour to a changelog post so early users understand what changed under the hood.
How it compares
Use for narrative PR visualization instead of only pasting `git diff` output into chat.
Common Questions / FAQ
Who is pr-walkthrough for?
Solo and indie builders who review their own PRs or need lightweight visual explainers for collaborators without standing up a custom docs site.
When should I use pr-walkthrough?
During Ship review before merge; after Build when documenting a large change for launch notes; or when validating that a prototype PR’s structure matches your mental model.
Is pr-walkthrough safe to install?
Review the Security Audits panel on this Prism page and inspect whether generated tours load D3 from a public CDN before sharing HTML outside your repo.
SKILL.md
READMESKILL.md - Pr Walkthrough
#!/usr/bin/env python3 """Reusable D3 multi-graph tour helpers for the pr-walkthrough skill.""" from __future__ import annotations import argparse import html import json from pathlib import Path from textwrap import dedent D3_VERSION = "7.9.0" D3_CDN_URL = f"https://cdn.jsdelivr.net/npm/d3@{D3_VERSION}/dist/d3.min.js" def d3_canvas_css() -> str: return dedent( """ :root { --warp-bg: #121212; --warp-panel: #1e1e1d; --warp-panel-2: #292929; --warp-border: #404040; --warp-text: #faf9f6; --warp-muted: #b4b4b2; --warp-dim: #868584; --warp-accent: #a43787; --warp-green: #34895c; --warp-blue: #2e5d9e; --warp-purple: #754dac; --warp-yellow: #c0872a; --warp-font-sans: 'Matter', 'DM Sans', system-ui, sans-serif; --warp-font-mono: 'Matter Mono', 'Roboto Mono', ui-monospace, monospace; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--warp-bg); color: var(--warp-text); font-family: var(--warp-font-sans); } a { color: var(--warp-text); text-decoration-color: var(--warp-accent); text-underline-offset: 3px; } button, input { font: inherit; } .d3-walkthrough-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; } .d3-walkthrough-header { display: grid; gap: 10px; padding: 28px 32px 20px; border-bottom: 1px solid var(--warp-border); background: linear-gradient(180deg, #1e1e1d, #121212); } .d3-kicker { color: var(--warp-accent); font-family: var(--warp-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .d3-walkthrough-header h1 { margin: 0; max-width: 1080px; font-size: clamp(34px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.04em; } .d3-meta-row { display: flex; flex-wrap: wrap; gap: 8px; color: var(--warp-muted); font-family: var(--warp-font-mono); font-size: 12px; } .d3-summary { max-width: 920px; margin: 0; color: var(--warp-muted); font-size: 17px; line-height: 1.45; } .d3-canvas-layout { min-height: 0; display: grid; grid-template-columns: 310px minmax(560px, 1fr) 390px; gap: 0; } .d3-control-panel, .d3-detail-panel { min-height: 0; overflow: auto; background: var(--warp-panel); border-right: 1px solid var(--warp-border); padding: 18px; } .d3-detail-panel { border-right: 0; border-left: 1px solid var(--warp-border); } .d3-panel-title { margin: 0 0 12px; font-size: 12px; color: var(--warp-muted); font-family: var(--warp-font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .d3-control-stack { display: grid; gap: 10px; margin-bottom: 18px; } .d3-control-button, .d3-graph-toggle { border: 1px solid var(--warp-border); background: var(--warp-panel-2); color: var(--warp-text); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; } .d3-control-button:hover, .d3-graph-toggle:hover, .d3-control-button:focus, .d3-graph-toggle:focus { border-color: var(--warp-accent); outline: none; } .d3-graph-toggle[aria-pressed="true"] { border-color: var(--graph-color, var(--warp-accent)); box-shadow: inset 3px 0 0 var(--graph-color, var(--warp-accent)); } .d3-tour-card { border: 1px solid var(--warp-border); background: #121212; border-radius: 12px; padding: 12px; margin-bottom: 14px; } .d3-tour-step-label { color: var(--warp-accent); font-family: var(--warp-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .d3-tour-title { margin: 6px 0; font-size: 18px; line-height: 1.15; } .d3-tour-body { color: var(--warp-muted); line-height: 1.4; margin: 0; } .d3-search { width: 100%; border: 1px solid var(--warp-border); background: #121212; color: var(--warp-text); border-radius: 10px; padding: 10px 12px; } .d3-search:focus { border-color: var(--warp-accent