Installs into .claude/skills of the current project.
Are you the author of Test Visual?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/naman10parikh-test-visual)
---
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)
