An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Pr Lens
Review code 100X faster. Lens draws every PR as animated architecture and data-flow walkthroughs, inside the pull request itself. Use it as a GitHub App, GitHub Action, CLI, or…
Install
npx skills add coldteadotai/pr-lensclaude mcp add pr-lens -- npx skills add coldteadotai/pr-lens{
"mcpServers": {
"pr-lens": {
"command": "npx",
"args": [
"skills",
"add",
"coldteadotai/pr-lens"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →PR Lens
Understand a pull request, any codebase, or software visually, before you read a line of code PR Lens draws every pull request as animated architecture and data-flow diagrams, posted as a comment inside the pull request itself. For your coding agents, leverage it for understanding any codebase or code change with a live canvas of animated explainers
Install the GitHub App · Install the Skill
Also runs on GitLab and Bitbucket
Free for open source · Or have your coding agent draw it: npx skills add coldteadotai/pr-lens
Features
Not Mermaid, better
We built a custom renderer from scratch. It draws rich animated visuals, reduces cognitive overload, represents code additions, removals and changes and still works for representing very large systems
Architecture blast radius
The diagram shows the parts of your system that the code change touches, drawn against the system around it: the components involved, and the calls that run between them.
Colors show what changed: green is new, amber is changed, and red is removed.
Intuitive Data flow
Understand how data flows through your any code change or codebase. The diagram plays the steps of the change in order with a moving dot one step at a time
See the payload on every data flow
Click any arrow to see the data it carries. A panel opens next to the diagram with the request and the response. Each one shows either the expected shape or a sample. New fields are green and removed fields are red, the same colors the diagram uses.
Zoom in without leaving the page
The comment has folding sections (``) that you can open and close. Each one has its own diagram for one part of the change. The whole change is on top. Below it is the new path, and then what was removed.
Interactive canvas
Every comment or drawing can link to an interactive canvas. It has the same diagrams at full size. You can move around, zoom, and switch between a light and a dark theme. A big change gets all the room it needs instead of squeezing into a narrow comment or static image.
Walk through the change
PR Lens ships with animated explainers called walkthroughs. Walkthroughs let you explore a system or code change step by step, without overwhelm. Start a walkthrough by pressing play on the canvas, or press W.
Your agent, live on the canvas
Ask your local coding agent to connect to a canvas. Then use it to understand any codebase or code change. You can ask follow-up questions, zoom into any part of the diagram, or drag across a few cards and ask your agent about them. Watch it interact live with the canvas!
Similar plugs
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
Open-source AI job search agent and job finder: scan job boards, score each job 1-5 against your CV before you apply, tailor an ATS-friendly resume and cover letter, get…
OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.