The fix-check-explain loop was killing my momentum. Every time I spotted a layout bug I had to walk back to the terminal and describe it in words. “The sidebar overlaps the content, I think it’s z-index, also the button on the right is cut off.” Half the time Claude fixed the wrong thing. So I built Bugshot — a OpenSource Claude Code skill that opens a Chrome window with a capture overlay. You drag over the broken area, add a quick note, hit Send. Claude gets a pixel-perfect screenshot with exact coordinates and fixes it in one shot. A few things worth knowing: Uses Chrome DevTools Protocol directly, so it works on sites with strict CSP headers (no bookmarklet injection) Works on localhost, staging, and production URLs Integrates into the Claude Code agentic loop — Claude can act on the screenshot immediately Install: npx skills add grootan/bugshot GitHub: github.com/grootan/bugshot | MIT licensed Happy to answer questions about the CDP implementation or how the skill hooks into the Claude Code session. Demo: https://www.loom.com/share/d11df3fd4b0a490c938fbb52715a6c44 submitted by /u/lokeshjarvis
Originally posted by u/lokeshjarvis on r/ClaudeCode