POKEIT — Visual QA Inspector users statistics

Poke the UI, tell AI what to fix. Inspect any element, leave QA notes, and send context to your AI coding agent.

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.

━━━━━━━━━━━━━━━━━━━━

🆕 WHAT'S NEW IN 0.3.0 • Query-aware page scoping — notes on ?tab=weekly and ?tab=monthly stay in separate buckets, while tracking parameters (utm_*, gclid, fbclid, etc.) are stripped automatically so they don't fragment your notes • Richer click-to-copy — the copy now also includes the site URL, the component's inner text (auto-extracted even from wrapper divs), and whatever you're still typing in the input • Disabled buttons are now inspectable — elements with disabled, aria-disabled, or pointer-events: none no longer fall through to the parent container • Style-isolated UI — the panel and popup are immune to the host page's global font, letter-spacing, and text-transform rules, so POKEIT always looks consistent • SPA-aware — tab switches via history.pushState instantly refresh markers and the notes panel, even if only the query string changes

━━━━━━━━━━━━━━━━━━━━

🔍 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 • Disabled / aria-disabled / pointer-events:none elements — still inspectable, no falling through to the parent

🗒️ 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 URL state — different routes, different tabs, even different ?filter= states keep their own annotations. Tracking parameters (utm_*, gclid, etc.) are stripped so analytics noise doesn't fragment your buckets. The notes panel groups everything by page and pins the page you're currently on at the top with a here badge.

📋 COPY & SEND TO AI One click copies everything — the page URL, component tree, computed styles, the element's inner text, spacing warnings, all saved notes, AND whatever you're still typing in the input field. The output is grouped per page so each URL keeps its own header, and the first line uses a natural-language phrase ("POKE!T inspector — QA notes from the browser") so AI agents read it as feedback context instead of a project label. Long element text is automatically truncated at 60 characters for readability. 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…