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

PR Lens — Animated Diagrams for Code Changes

Turns a code change or codebase into an animated architecture / data-flow SVG from a single JSON graph document.

Dev & CodingBeginner★ 1,932⑂ 71AI score 7/10Last updated: Oct 4, 2026

What it does

  • The agent writes one JSON graph document and the PR Lens CLI renders it as a self-contained animated SVG.
  • The diagram drops straight into a GitHub pull request comment — no scripts, no external assets.
  • validate names the exact offending field so the agent can repair its own document.
  • Can also open as a live canvas you step through and ask questions about.
  • The SKILL.md is a discovery stub: real usage, field reference and a full example come from npx @coldtea/pr-lens-cli@latest skill, so instructions always match the installed CLI version.

Who it's for

  • Developers who want reviewers to grasp a large PR's structure at a glance
  • Tech leads producing architecture visuals for onboarding or design reviews
  • Anyone using Claude Code, Codex, Gemini CLI, Cursor, OpenCode or Copilot who wants one shared diagramming workflow

Examples

  1. "Diagram the request flow introduced by this PR and post it as a comment" → agent writes the graph JSON → validate → render → animated SVG in the PR.
  2. "Explain how the auth module is wired" → data-flow diagram of module boundaries and calls.
  3. Before/after architecture comparison to support a refactoring proposal.

· · · 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 /tmp/pr-lens/packages/agent-skill/SKILL.md ~/.claude/skills/pr-lens/SKILL.md

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

  1. Make sure Node.js is installed (18+ recommended): node -v
  2. Clone the repository: 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 file: cp /tmp/pr-lens/packages/agent-skill/SKILL.md ~/.claude/skills/pr-lens/SKILL.md
  5. Restart Claude Code and ask something like "diagram this change".
  6. Keep network access available on first use — the agent runs npx @coldtea/pr-lens-cli@latest skill to fetch the up-to-date workflow before rendering.
View source on GitHub ↗License: MIT