# Visual QA Vision Agent

> Equips the AI agent with visual QA capabilities using Playwright/Puppeteer and the agent's innate Vision capabilities to self-correct UI layout, CSS alignment, and visual regressions.

- Skill: `roedyrustam/visual-qa-vision-agent` (Agent Skill)
- Install (CLI): `npx skillmds@latest add roedyrustam/visual-qa-vision-agent`
- Raw SKILL.md: https://api.skillmd.com/api/skills/roedyrustam/visual-qa-vision-agent/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: roedyrustam (https://skillmd.com/u/roedyrustam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/roedyrustam/visual-qa-vision-agent

---


# Visual QA & Vision Agent

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.

### Description
This skill transforms the agent from a blind code generator into a visual designer. Instead of hoping the CSS looks correct, the agent is instructed to write a script that takes a screenshot of the newly created component, analyzes the screenshot using its own Vision AI capabilities, and iteratively tweaks the CSS until it matches the design intent perfectly.

### Trigger Conditions
Activate this skill when the user says:
- "Fix the CSS, the button is misaligned."
- "Make it look exactly like this mockup."
- "Ensure the UI is responsive on mobile screens."

### Core Concepts

#### 1. The Visual QA Loop
1. **Code:** The agent writes the HTML/CSS/React component.
2. **Serve:** The agent starts a local dev server in the background.
3. **Capture:** The agent runs a quick Playwright/Puppeteer script to take screenshots at various viewports (Mobile, Tablet, Desktop).
4. **Analyze:** The agent receives the screenshot (via the `view_file` tool on the image) and analyzes the visual hierarchy, contrast, and alignment.
5. **Correct:** The agent fixes margin, padding, or flexbox issues based on what it *saw*, not just what the code says.

#### 2. Agent Constraints (Mandatory Visual Verification)
- **NO BLIND CSS GUESSING**: You are strictly prohibited from finalizing a frontend component without verifying it visually first. You MUST use a `browser_subagent` to capture a screenshot of your work.
- **Pixel-Perfect Validation**: Compare the screenshot against the initial design spec or generic UI/UX best practices. Iterate on the CSS until the visual output is flawless.
- Always check contrast ratios visually if design tokens are overridden.

---

### Integration with Other Skills (MANDATORY)
- `browser-automation-expert` — Provides the Playwright code needed to capture the screenshots.
- `tailwind-expert` — Provides the CSS utility classes used to fix the alignment issues discovered by Vision.
- `ui-components-expert` — Defines the correct visual standards (spacing, sizing) the agent should look for.

### Referenced By Orchestrators (MANDATORY)
- `brainstorming` — Add to "UI/UX & Design Systems".
- `zero-to-prod-orchestrator` — Phase 5 (Frontend / UI Validation).

---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.

### Deskripsi
Skill ini memanfaatkan kemampuan *Vision* (penglihatan) bawaan AI untuk melakukan *Quality Assurance* (QA) visual. Agen tidak lagi sekadar menebak CSS secara buta, melainkan mengambil *screenshot* dari halaman yang dibuatnya, melihat hasilnya, dan mengkoreksi *margin/padding* secara mandiri.

### Kondisi Pemicu
- Saat pengguna meminta untuk merapikan UI yang berantakan.
- Saat melakukan *cloning* desain dari gambar *mockup*.

### Panduan Singkat
- **Gunakan Mata Anda (Wajib Verifikasi Visual):** Anda dilarang keras memfinalisasi atau menyelesaikan tugas frontend tanpa melihat hasilnya terlebih dahulu. Anda WAJIB mengambil *screenshot*, melihatnya menggunakan tool `view_file`, dan memverifikasi layout secara visual (*pixel-perfect*).
- **Siklus Visual:** Tulis Kode ➔ Ambil Screenshot ➔ Analisis dengan *Vision* ➔ Perbaiki Tailwind/CSS ➔ Selesai.
- **Jangan Menebak:** Terkadang `justify-center` tidak berfungsi karena ada pembungkus (*wrapper*) absolut. Jangan menebak-nebak di dalam kode; lihat hasil akhirnya secara visual!