Media
3 items
Description
Element-snapping screenshot tool with AI visual feedback queue — capture, annotate, and copy feedback for your agent. 📸 ContextSnap: Screenshots & AI Visual Feedback ContextSnap is a developer tool that turns UI feedback into a structured, AI-readable queue. Activate it on any page, hover over elements, capture annotated screenshots, and build up a queue of feedback items — each with a CSS selector, React component name, source file, line number, URL, and comment. Copy items from the queue and paste them into your AI coding agent. ⚡ HOW IT WORKS Press Ctrl+Shift+1 (Mac: Cmd+Shift+1) to enter comment mode, or Ctrl+Shift+2 (Mac: Cmd+Shift+2) to enter screenshot mode. An element highlight overlay appears over the page. - In comment mode, hover over any element and press C to open a comment dialog. Type your feedback and press Enter. ContextSnap captures a screenshot and saves the element's selector, React component, and your comment to the queue. - In screenshot mode, hover over any element and press Enter to capture it, S to capture it with scroll (full-height), or F for a full-page capture. Screenshots are copied to the clipboard automatically; use Save on the toast if you also want a PNG file. While in either mode you can switch between them without exiting using the same shortcuts. Press Arrow Up to select a meaningful ancestor element, Arrow Down to return to the previous child or descend into children. Press Q to toggle the queue side panel, and Escape to exit the current mode. ⌨️ KEYBOARD SHORTCUTS - Ctrl+Shift+1 / Cmd+Shift+1 — Enter comment mode - Ctrl+Shift+2 / Cmd+Shift+2 — Enter screenshot mode - C — Open comment dialog on the hovered element (comment mode) - Enter — Capture the hovered element (screenshot mode) - S — Capture the element with scroll (screenshot mode) - F — Full-page capture (screenshot mode) - Arrow Up / Arrow Down — Navigate the DOM hierarchy - Q — Toggle the queue panel - Escape — Exit the current mode 🗂️ THE QUEUE PANEL Press Q in comment mode to view your captured items. Each item shows: • A thumbnail of the captured element (for the current browser session) • The CSS selector • The React component name with source file and line number (when source maps are available) • Your comment • A status label — pending or skipped Copy any individual item, or copy the entire queue at once, then paste into your agent chat. You can also skip or unskip items, delete them individually, or clear the whole queue. 🔒 PERMISSIONS ContextSnap follows least-privilege principles and requests only what it needs: • activeTab — temporary access to the current tab when you click the icon or use a shortcut • scripting — inject the hover overlay on demand • storage — session-only queue metadata (cleared when the browser closes) • clipboardWrite — auto-copy screenshots after capture No host permissions. No remote servers. Screenshots stay in memory only and are never written to extension storage. Feedback leaves your machine only when you copy and paste it. 👤 WHO IS THIS FOR? - Frontend developers doing design-review QA - Teams doing async UI review who need more than a screenshot in Slack - AI-assisted coding workflows where you paste structured UI feedback into an LLM agent - Design-to-code pipelines that require structured, element-level context