POKEIT — Visual QA Inspector

POKEIT — Poke! the UI, tell AI what to fix. The visual QA inspector built for AI-powered development workflows. Click any element on your page, leave a note like "Make this 16px" or "Align to grid," and copy the full component context — tree structure, computed styles, and source paths — straight to your AI coding agent. ━━━━━━━━━━━━━━━━━━━━ 🔍 INSPECT Press ⌥P (Option+P) or click the POKEIT icon to activate inspect mode. Hover over any element to see a 3-layer highlight showing margin, padding, and content boundaries. Click to select it. Use ↑↓ arrow keys to navigate to parent or child elements without re-clicking. POKEIT reads: • React component tree — names, nesting, and hierarchy • Parent component resolution — clicking a div shows "ProfileCard > div" instead of just "div" • Computed CSS styles — resolved values, not just class names • Smart class filter — strips hashed names (CSS Modules, styled-components, Emotion) and shows clean utilities • Source file paths and line numbers (via React fiber debug info) • Spacing overlap warnings between parent and child elements 🗒️ ANNOTATE Leave QA notes directly on any selected element. Describe what needs to change in plain language — "Font size should be 16px," "Remove this margin," "Match the height of the sibling card." Stack as many notes as you need across different components. Notes are scoped per page URL, so different routes keep separate annotations. 📋 COPY & SEND TO AI One click copies everything — component tree, styles, spacing warnings, and all your notes — formatted and ready to paste into ChatGPT, Claude, Cursor, Windsurf, or any AI coding agent. The AI gets full context to make precise code changes. 📸 SCREENSHOT Download a screenshot of the current page with one click from the QA panel for visual reference. ━━━━━━━━━━━━━━━━━━━━ WHY POKEIT? → For vibe coders & non-developers You see a UI bug but can't describe it precisely enough for the AI to fix. POKEIT bridges that gap — click the problem, describe the fix, and let the AI handle the code. → For designers who vibe code "The padding is wrong" is vague. "ProfileCard (src/components/ProfileCard.tsx:24) has padding 12px, should be 24px" is actionable. POKEIT generates the latter automatically. → For frontend developers Skip the back-and-forth. Get structured, copy-pasteable QA feedback with exact component paths and computed values instead of vague Slack messages. → Zero config Works on any website — production or localhost. No project setup, no dependencies, no build step. Just install and start inspecting. ━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS 1. Install POKEIT from Chrome Web Store 2. Visit any React website (production or localhost) 3. Press ⌥P or click the extension icon 4. Click any element to inspect it 5. Use ↑↓ to navigate to parent/child elements 6. Leave a note describing what to change 7. Click "Copy" — paste into your AI agent 8. AI makes the fix with full context ━━━━━━━━━━━━━━━━━━━━ FEATURES ✓ 3-layer box model highlight (margin / padding / content) ✓ React component tree with source file paths ✓ Parent component resolution (div → ProfileCard > div) ✓ Computed CSS property inspector ✓ Smart class filter — hashed names removed, clean utilities shown ✓ Spacing overlap detection (parent ↔ child) ✓ ↑↓ keyboard navigation for parent/child traversal ✓ Page-scoped notes — each URL keeps its own annotations ✓ Multiple QA notes per page ✓ One-click copy formatted for AI agents ✓ Screenshot capture ✓ Works on localhost and production ✓ Keyboard shortcut (⌥P) for quick activation ✓ No sign-up required — completely free ━━━━━━━━━━━━━━━━━━━━ PRIVACY POKEIT runs entirely in your browser. No data is sent to any server. Your page content, styles, and notes stay local. The only network request is Chrome's built-in extension update check. ━━━━━━━━━━━━━━━━━━━━ Made for the vibe coding era. Poke it. Fix it. Ship it.