Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

PR Lens — Animated PR Architecture Diagrams

Turns a diff or codebase into a JSON graph document and renders it as animated SVG architecture and data-flow diagrams attached to your pull request.

Dev & CodingIntermediate★ 202⑂ 7AI score 9/10Last updated: Sep 3, 2026

What it does

  • Reads the change with git diff --find-renames <base>...<head> (from the merge base) and authors .pr-lens/graph.json with lanes, nodes, edges and ordered flows.
  • Runs validate then render from @coldtea/pr-lens-cli to produce animated SVGs (dark theme by default) plus a manifest.json.
  • Attaches the right views to a PR via gh pr create/edit/comment --attach with Markdown image references and meaningful alt text.
  • For pure "explain this system" requests, pushes to a shareable canvas (prlens.dev/c/{id}) that opens without login; the edit link stays private.
  • Corrections go into a .github/pr-lens.yml overlay (rename / exclude / lane pins) instead of editing regenerated output.

Who it's for

  • Developers and tech leads who want reviewers to grasp the shape of a change before reading the diff.
  • Teams shipping refactors or service-boundary changes where blast radius matters.
  • Anyone wanting C4-inspired views (system context → container → component) of a codebase.

Examples

  1. "Diagram this PR and put it in the description" → diff → graph.json → validate/render → gh pr edit 42 --body-file .pr-lens/body.md --attach ...
  2. "Show me how data flows through this repo" → architecture root + data-flow root rendered, then canvas push and hand back the view link.
  3. "Drop test files from the diagram and move broadcast-lib into the functions lane" → add exclude/lane rules to .github/pr-lens.yml, re-validate and re-render.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/coldteadotai/pr-lens/HEAD/packages/agent-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the packages/agent-skill folder from the GitHub repo coldteadotai/pr-lens into my ~/.claude/skills/pr-lens/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/coldteadotai/pr-lens.git /tmp/pr-lens && mkdir -p ~/.claude/skills/pr-lens && cp -r /tmp/pr-lens/packages/agent-skill/* ~/.claude/skills/pr-lens/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Make sure Node.js (for npx) and Git are installed. For PR attachments you also need GitHub CLI 2.99+ (gh --version).
  2. Clone the repo: git clone https://github.com/coldteadotai/pr-lens.git /tmp/pr-lens
  3. Create the skill folder: mkdir -p ~/.claude/skills/pr-lens
  4. Copy the skill package: cp -r /tmp/pr-lens/packages/agent-skill/* ~/.claude/skills/pr-lens/
  5. Confirm SKILL.md sits next to a references/ folder containing graph-document.md, config.md and example.graph.json.
  6. Restart Claude Code, open your project, and ask something like "visualise this change as an architecture diagram".
  7. No package install is needed — the CLI runs via npx @coldtea/pr-lens-cli@latest. Output lands in .pr-lens/, which is auto-added to .gitignore; don't commit it.
View source on GitHub ↗License: MIT