Visual QA & Vision Agent

English | Bahasa Indonesia

---

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).

---

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!