# 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

```javascript
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`