Point at UI bugs instead of describing them to Claude Code

lokeshgrootan — Sun, 22 Mar 2026 03:19:10 +0000

I built a skill that lets you point at UI bugs instead of describing them to Claude Code

The fix-check-explain loop was killing my momentum. So we built Bugshot — open source, one command to install.

The problem no one talks about

Everyone praises AI-assisted coding for how fast you can ship features. What they don't mention is the part where you stare at a broken layout, then walk back to your terminal and try to describe it in words.

The sidebar overlaps the main content. I think it's a z-index issue. Also the button on the right side is cut off.

Did Claude understand exactly what you meant? Maybe. Probably not. So you clarify. You re-explain. You add more detail. The fix-check-explain loop becomes the slowest part of your workflow — not the code, not the logic, just the communication.

BEFORE
"The sidebar overlaps the main content area. It looks like a z-index issue. The gap between the header and the card below is too large. Also the button on the right is cut off."

AFTER
[screenshot with a red selection box drawn around the button, annotated: "this button gets clipped at 768px"]

What Bugshot does

Bugshot is an open-source skill for Claude Code. You say bugshot this page in your Claude session, and a real Chrome window opens with a capture overlay. You drag over the broken area, type a short note, and hit Send.

Claude receives a pixel-perfect screenshot with the exact coordinates of your selection and your annotation — and starts fixing immediately. No more "which element did you mean."

How it works under the hood

This is where it gets interesting. Most bookmarklet or injected-script approaches fail on staging and production sites because of Content-Security-Policy headers. CSP blocks script injection from untrusted origins, which is exactly what a browser extension or bookmarklet does.

Bugshot uses the Chrome DevTools Protocol directly. CDP operates outside the browser's security sandbox — it's the same channel Chrome DevTools itself uses to inspect pages. That means CSP headers are irrelevant. You get full capture capability on localhost, staging, and production sites with strict CSP.

The flow

Claude Code invokes the Bugshot skill from your session
A Chrome window opens pointing at your target URL
A lightweight overlay lets you drag-select any area on screen
You add an optional annotation, hit Send
Claude receives the screenshot, pixel coordinates, and your note as context
Claude proposes a fix immediately — no clarifying questions

Why this matters for the agentic coding loop

Claude Code is most powerful when it can act on unambiguous input. Text descriptions of visual bugs are inherently lossy — they compress a 2D spatial problem into sequential prose, and that compression loses exactly the information Claude needs to fix it.

Giving Claude a screenshot with coordinates is the equivalent of pairing with a developer who can see your screen. The model can identify elements, infer the DOM structure, reason about breakpoints, and apply the right fix in one shot.

The result isn't just faster debugging — it's a tighter feedback loop. See the bug, point at it, watch the fix land.

Install

npx skills add grootan/bugshot

Works with any Claude Code session. Requires Chrome installed locally. That's it.

Open source
Bugshot is MIT licensed and built by Grootan Labs. The full source is on GitHub at github.com/grootan/bugshot. Contributions, issues, and stars are all welcome.

We'd love to hear how your team uses it — drop a comment below or open an issue on the repo.

Demo

DEV Community: lokeshgrootan

Point at UI bugs instead of describing them to Claude Code