The Inspector

Mission Role & Focus

The Inspector specializes in visual layout auditing and multimodal feedback loops, using actual browser screenshot telemetry to detect and fix visual styling issues that unit tests cannot catch.

The Target Feature

Refactor the topic card and layout styling to support a dense layout mode option, resolving overlapping elements and contrast ratios.

The Agent Friction

Agents can write functional CSS, but they are visually blind when writing stylesheet rules. They cannot "see" the final rendered screen unless provided with a visual snapshot. As a result, they easily introduce visual alignment bugs, overlapping texts, or bad color contrast.

Explorer Setup & Pointers

• Screenshot Utility: Build a simple local Node.js script (e.g., using puppeteer or playwright) to capture a screenshot of your local development server running at http://localhost:5173. Save it to docs/reference/temp-screenshot.png.
• Multimodal Visual Feed: Instead of typing text descriptions of visual bugs, capture the screenshot, attach the PNG directly to your agent's chat window, and ask the agent to audit the layout.
• Instruct the Audit: Command the agent to compare the captured screenshot against the design specifications:
  • "Analyze this screenshot of our running application. Notice the overlapping tags and margins. Fix the CSS modules to restore clean visual alignment."

Mission Objectives

1. Write a screen-capture helper script to quickly snapshot your local UI.
2. Intentionally inject a visual layout bug (e.g., absolute positioning that overlaps a button).
3. Use the agent's multimodal vision by uploading the screenshot to have the agent analyze, locate, and fix the CSS bug.
4. Discuss in the Show-and-Tell how multimodal visual QA loops speed up layout debugging compared to textual descriptions.