test-visual · git:20260526.e594bbf · 2026-05-26 · sha256 ce990b04ca6f0a8c

test-visual git:20260526.e594bbfA

Immutable. This exact content never changes and is served at /api/v1/blob/ce990b04ca6f0a8c.

---
name: test-visual
description: Browser-based visual testing of UI changes. Requires Chrome integration (--chrome flag or /chrome command).
---

## Prerequisites

- Dev server running (`pnpm dev`)
- Chrome integration enabled (`/chrome` or launched with `--chrome`)

## Steps

1. Navigate to the target URL (e.g., `http://localhost:3000`)
2. Take a full-page screenshot
3. Analyze against these criteria:
   - **Layout** — elements positioned correctly, no overflow, responsive
   - **Dark mode** — proper contrast, no white flashes, readable text
   - **Typography** — Poppins font loaded, proper hierarchy (h1 > h2 > p)
   - **Color scheme** — purple #6b21a8 primary, proper dark backgrounds
   - **Interactive** — hover states work, buttons clickable, inputs focusable
   - **Streaming** — if chat UI, verify real-time text streaming works
4. Report findings with specific CSS/component fixes
5. Take a "fixed" screenshot to verify the fix

## Common Issues

- Font not loading → check `next/font` import or Google Fonts link
- White flash on load → add `class="dark"` to `<html>` element
- Streaming broken → check WebSocket connection in Network tab
- Purple too bright → use #6b21a8 (dark), not #8B5CF6 (light)