pi_mcps/zoo_backup/home/rules/04-visual-verify.md

Visual Verification Rule

After Building Frontend Pages

When working in Code or Debug mode on a frontend project with Playwright installed:

• After creating or significantly modifying a page/component, run the visual-verify skill to verify it renders correctly
• This catches issues like: missing i18n text, broken centering, theme mode failures, responsive overflow
• Minimum check: take a screenshot + extract visible text + verify positioning

When to Delegate to Visual QA Mode

For deeper visual testing (multi-page, responsive breakpoints, interaction flows, accessibility), delegate to 🎨 Visual QA mode via the Orchestrator.

Playwright Quick Reference

const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(URL);
await page.waitForTimeout(2000);
const text = await page.locator('body').innerText();
await page.screenshot({ path: '/tmp/verify.png' });
await browser.close();

Prerequisites: pnpm add -D playwright + npx playwright install chromium