Visual Verification Loop

@primevue/mcp and @quasar/mcp understand component code. They do not render pixels. This skill uses the Playwright MCP (@playwright/mcp) so the agent can see the live Vite page and fix what it sees.

Do not use Puppeteer or @modelcontextprotocol/server-puppeteer.

@visual-auditor still records the done review (contrast report, widths, fix log). Run this loop first, while the dev server is hot, and correct the code before that review.

When the agent activates this skill

• After any major UI component, layout change, or dashboard view.
• After @motion-physics on a GUI surface.
• When checking a mobile drawer against the desktop layout.
• When contrast, overlap, or an unwanted scrollbar is in question.

Do not use this skill for a CLI. Terminal alignment is @cli-interface-design (run the script, read stdout).

Feedback cycle