---
name: cto-frontend-visual-qa
description: Browser, Playwright, screenshot, console, network, and responsive verification protocol for CTO UI work.
metadata:
  version: 0.1.0
  hermes:
    requires_toolsets: [terminal_tools, file_tools]
  tier: T2
  status: active
  owner: jp
  source: hand
  last_reviewed: 2026-05-25
---

# CTO Frontend Visual QA

## Karpathy 4 Rules

1. **Think Before Coding** — define viewport, user flow, expected visual state, and acceptance evidence.
2. **Simplicity First** — use existing dev server and test tooling before adding new UI harnesses.
3. **Surgical Changes** — fix the target UI path only; do not restyle unrelated surfaces.
4. **Goal-Driven Execution** — capture screenshot, console/network status, and build/test output.

## Required Evidence

- Desktop and mobile viewport checks for user-facing layout changes.
- Console errors reviewed.
- Network failures reviewed when data is involved.
- Screenshot or pixel evidence for visual assertions.
- Text must fit containers and controls must not overlap.