vibes-plug 2.11.0 → 3.9.0

package/skills/token-saver/SKILL.md

@@ -1,119 +0,0 @@
----
-name: token-saver
-description: "Skill to implement token saving scheme, concise, and focused on essential changes / Skill untuk menerapkan skema penghematan token, ringkas, dan fokus pada perubahan esensial tanpa basa-basi."
-author: "Roedy Rustam"
----
-
-# Token Saver Protocol (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Implements token-efficient communication protocols for long-context AI coding sessions. Activates concise mode — minimizing response verbosity while maintaining precision and completeness of technical output.
-
-### Trigger Conditions
-- User asks for token-saving mode, concise responses, or minimal output.
-- Session is running long and context window is being consumed rapidly.
-- User explicitly says "be concise", "save tokens", or "minimal".
-
-### Token Budget Strategies for Long Context
-
-#### 1. Response Compression Rules (Active When Triggered)
-- **No preamble**: Skip "Of course! I'll help you with that...".
-- **No restatement**: Never repeat back what the user just said.
-- **No trailing summaries**: Don't summarize what you just did at the end.
-- **Code-first**: Show the code change immediately, explain briefly after.
-- **Diff format**: For small changes, show only the changed lines (not the full file).
-- **Bullet > prose**: Use bullet lists instead of paragraphs for explanations.
-
-#### 2. Tool Call Efficiency
-- **Batch parallel reads**: Read multiple files in a single turn (not sequentially).
-- **Targeted grep over full reads**: Use `grep_search` to find specific content before reading the whole file.
-- **Write once**: Produce correct output on first try — avoid edit-then-edit-again cycles.
-- **Skip confirmation requests**: Don't ask "Shall I proceed?" — just proceed.
-
-#### 3. Context Window Budget Awareness
-When working on a long session:
-```
-Token budget allocation (for 200K context):
-├── System prompt + skills:    ~15K
-├── Conversation history:      ~50K (truncates older turns)
-├── File contents read:        ~100K (most expensive)
-└── Response generation:       ~35K
-```
-- Prefer `grep_search` over reading full large files.
-- Summarize large files mentally; only `view_file` the specific section needed.
-- When context is nearly full, create a checkpoint with `session-handoff-resume` skill.
-
-#### 4. Output Size Minimization
-For file edits:
-```diff
-# Preferred: diff format showing only changes
-- const OLD_VALUE = 'old';
-+ const NEW_VALUE = 'new';
-```
-
-For explanations:
-```
-# Preferred: 1-sentence rationale
-Changed X to Y because Z.
-
-# Avoid: multi-paragraph explanation of an obvious change
-```
-
-#### 5. Code Generation — First Draft Quality
-Generate correct, production-ready code on the first attempt:
-- Apply all relevant best practices from skills without being asked.
-- Include error handling, types, and edge cases inline.
-- Avoid TODOs, placeholder values, or "implement this later" comments.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Mengimplementasikan protokol komunikasi hemat token untuk sesi coding AI yang panjang. Mengaktifkan mode ringkas — meminimalkan verbositas respons sambil mempertahankan presisi dan kelengkapan output teknis.
-
-### Kondisi Pemicu
-- Pengguna meminta mode hemat token, respons ringkas, atau output minimal.
-- Sesi sudah panjang dan context window sedang dikonsumsi dengan cepat.
-- Pengguna secara eksplisit berkata "ringkas", "hemat token", atau "minimal".
-
-### Strategi Token Budget untuk Konteks Panjang
-
-#### 1. Aturan Kompresi Respons (Aktif Saat Dipicu)
-- Tanpa pembuka: Lewati "Tentu saja! Saya akan membantu Anda dengan...".
-- Tanpa pengulangan: Jangan pernah mengulangi apa yang baru saja dikatakan pengguna.
-- Tanpa ringkasan di akhir: Jangan rangkum apa yang baru saja dilakukan.
-- Code-first: Tunjukkan perubahan kode segera, jelaskan singkat setelahnya.
-- Format diff: Untuk perubahan kecil, tunjukkan hanya baris yang berubah.
-- Poin > prosa: Gunakan daftar poin daripada paragraf.
-
-#### 2. Efisiensi Pemanggilan Tool
-- Baca beberapa file secara paralel dalam satu giliran.
-- Gunakan `grep_search` untuk menemukan konten spesifik sebelum membaca file lengkap.
-- Hasilkan output yang benar pada percobaan pertama.
-- Jangan tanyakan "Apakah saya harus melanjutkan?" — langsung lanjutkan.
-
-#### 3. Kesadaran Budget Context Window
-Alokasikan token secara bijak: batasi baca file besar, gunakan `grep_search` daripada membaca file penuh, dan buat checkpoint dengan skill `session-handoff-resume` saat konteks hampir penuh.
-
-#### 4. Minimalisasi Ukuran Output
-Gunakan format diff untuk edit file. Berikan penjelasan 1 kalimat untuk perubahan yang jelas.
-
-#### 5. Kualitas Draft Kode Pertama
-Hasilkan kode yang benar dan siap produksi pada percobaan pertama — termasuk error handling, tipe, dan edge case secara inline. Hindari TODO, nilai placeholder, atau komentar "implementasikan ini nanti".
-
----
-
-## Orchestration & Integration
-- Integrates with `zero-to-prod-orchestrator`, `session-handoff-resume`, `brainstorming`, and `ai-cost-token-optimizer`.
-
-## Integrasi Orkestrasi
-- Terintegrasi dengan `zero-to-prod-orchestrator`, `session-handoff-resume`, `brainstorming`, dan `ai-cost-token-optimizer`.

package/skills/ui-components-expert/SKILL.md

@@ -1,166 +0,0 @@
----
-name: ui-components-expert
-description: Expert guide for building production-quality UI components following the 4 pillars. Covers React 19, Radix UI, Base UI, Tailwind v4, Material Design 3 (M3), WCAG 2.2 / Panduan ahli membangun komponen UI berkualitas produksi dengan M3.
-author: "Roedy Rustam"
----
-
-# 🎨 UI Components Expert (2026/2027 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Evaluate, audit, and build production-quality UI components. Apply the 4 pillars of UI components with modern tooling: **shadcn/ui**, **Radix UI**, **Base UI**, **React 19**, **Tailwind v4**, **Material Design 3 (M3)**, **WCAG 2.2**, and micro-interaction design.
-
-### Trigger Conditions
-- Build or review UI components (buttons, forms, modals, navigation, tooltips).
-- Implement accessible components (ARIA patterns, keyboard navigation).
-- Audit components against WCAG 2.2.
-- Set up component libraries (shadcn/ui, Radix UI, Base UI).
-- Add micro-interactions and animations.
-
-## Orchestration & Integration
-This skill orchestrates and connects with:
-- `senior-frontend`: For overall React 19 / Next.js 15 architecture.
-- `tailwind-expert`: For Tailwind v4 styling and theming.
-- `design-system-architect`: For system-wide design tokens and primitives.
-- `hig`: For Human Interface Guidelines (Hierarchy, Harmony, Consistency).
-
-### Component Stack (2026/2027)
-- **Headless Primitives**: Radix UI / Base UI (Accessibility, behavior).
-- **Component Library**: shadcn/ui (Pre-styled, customizable).
-- **Styling**: Tailwind CSS v4 (Utility-first, `@theme` tokens).
-- **Animation**: Motion / Framer Motion v12 (Spring physics).
-- **Icons**: Lucide React.
-- **Forms**: React Hook Form + Zod.
-
-### The 4 Pillars of UI Components
-
-#### 1: Input Controls
-Capture user intent and data (Buttons, Forms, Selects).
-- **M3 Integration (if requested)**: Use M3 button variants: Filled, Tonal, Elevated, Outlined, and Text. Include FABs (Floating Action Buttons) for primary screen actions.
-- **Visual States**: Define `default`, `hover`, `active`, `focus`, `disabled`, and `error`.
-- **Touch Targets**: Minimum 44×44px (WCAG 2.5.8), M3 recommends 48x48px.
-- **Immediate Feedback**: Provide visual ripple or scale animation on interaction.
-- **Inline Validation**: Show errors on blur. Use `aria-invalid` and `aria-describedby`.
-- **Stack**: React Hook Form + Zod.
-
-#### 2: Navigation
-Move through application structure (Navbars, Tabs, Command Palettes).
-- **M3 Integration (if requested)**: Use M3 Navigation Bar for mobile (bottom), Navigation Rail for tablet, and Navigation Drawer for desktop.
-- **Active State**: Indicate current location with high-contrast visual indicators.
-- **Keyboard Navigation**: Support Arrow Keys for tabs, `Escape` to close.
-- **Responsive**: Bottom navigation (<768px), collapsible sidebar (tablet), full sidebar (desktop).
-- **Command Palette**: Add `⌘K` via `cmdk`.
-- **Next.js 15**: Use `<Link viewTransition>` for smooth transitions.
-- **ARIA**: Use `role="navigation"` and `aria-current="page"`.
-
-#### 3: Information & Feedback
-Display status and guidance (Toasts, Skeletons, Empty States).
-- **M3 Integration (if requested)**: Use Snackbar for transient messages. Use Badges on navigation icons for notifications.
-- **Color Semantics**: Green (success), red (error), yellow (warning), blue (info).
-- **Toasts**: Use **Sonner**. Limit to 3 concurrent. Auto-dismiss success, keep errors until dismissed.
-- **Loading**: Use Skeletons matching exact content layout over spinners (prevents CLS).
-- **Empty States**: Provide illustration, context, and clear CTA.
-- **ARIA**: `aria-live="polite"` (updates), `aria-live="assertive"` (critical).
-
-#### 4: Containers & Layout
-Group related content (Cards, Modals, Sheets).
-- **M3 Integration (if requested)**: Use M3 Card variants: Elevated, Filled, Outlined. Follow M3 Dialog guidelines for Modals.
-- **Modals**: Use Radix UI Dialog. It handles focus trapping and scroll locking automatically.
-- **Animation**: Animate in (`animate-in fade-in zoom-in-95`).
-- **Cards**: Use subtle shadows + borders. Avoid heavy drop shadows in light mode.
-- **Sheets**: Use bottom sheet for mobile secondary actions, side sheet for desktop.
-
-### Micro-Interaction Checklist
-- [ ] Implement `:focus-visible` ring (2px, brand color) on all interactives.
-- [ ] **M3 State Layers**: If using M3, ensure interactive elements have distinct Hover, Focus, Pressed, and Dragged state layers.
-- [ ] Add loading state (spinner + disabled) to submit buttons.
-- [ ] Use **Framer Motion v12 spring physics** (`stiffness: 300, damping: 20`) for natural, snappy interactions. Avoid rigid linear transitions.
-- [ ] Use `transition-all duration-200 ease-out` for simple hovers.
-- [ ] Test dark mode for all states (especially error contrast).
-
-### WCAG 2.2 Quick Reference
-- **1.4.3**: Text contrast ≥4.5:1.
-- **2.5.8**: Touch target ≥24×24px (min), 44×44px (target).
-- **2.4.7**: Visible focus indicator.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Evaluasi, audit, dan bangun komponen UI berkualitas produksi. Terapkan 4 pilar komponen UI dengan tooling modern: **shadcn/ui**, **Radix UI**, **Base UI**, **React 19**, **Tailwind v4**, **Material Design 3 (M3)**, **WCAG 2.2**, dan desain micro-interaction.
-
-### Kondisi Pemicu
-- Membangun atau me-review komponen UI (tombol, form, modal, navigasi).
-- Implementasi komponen aksesibel (pola ARIA, navigasi keyboard).
-- Audit komponen berdasarkan WCAG 2.2.
-- Setup library komponen (shadcn/ui, Radix UI, Base UI).
-- Menambahkan micro-interaction dan animasi.
-
-## Integrasi Orkestrasi
-Skill ini mengorkestrasi dan terhubung dengan:
-- `senior-frontend`: Untuk arsitektur keseluruhan React 19 / Next.js 15.
-- `tailwind-expert`: Untuk styling dan theming Tailwind v4.
-- `design-system-architect`: Untuk design token dan primitif skala sistem.
-- `hig`: Untuk panduan Human Interface (Hierarki, Harmoni, Konsistensi).
-
-### QA Visual Mandatori
-- Wajib gunakan `browser_subagent` dan `visual-qa-vision-agent` untuk validasi layout.
-- Standar Pixel-Perfect: Jangan menebak ukuran. Ambil screenshot dan koreksi pergeseran tata letak.
-
-### Stack Komponen (2026/2027)
-- **Headless**: Radix UI / Base UI.
-- **Library**: shadcn/ui.
-- **Styling**: Tailwind CSS v4.
-- **Animasi**: Motion / Framer Motion v12.
-- **Form**: React Hook Form + Zod.
-
-### 4 Pilar Komponen UI
-
-#### 1: Kontrol Input
-Tangkap data (Tombol, Form, Select).
-- **Integrasi M3 (jika diminta)**: Gunakan varian tombol M3: Filled, Tonal, Elevated, Outlined, dan Text. Sertakan FABs (Floating Action Buttons).
-- Definisikan state visual: `default`, `hover`, `active`, `focus`, `disabled`, `error`.
-- Target sentuh minimal 44×44px (M3 merekomendasikan 48x48px).
-- Tampilkan error saat blur dengan `aria-invalid` dan `aria-describedby`.
-- Gunakan React Hook Form + Zod.
-
-#### 2: Navigasi
-Pergerakan pengguna (Navbar, Tab, Command Palette).
-- **Integrasi M3 (jika diminta)**: Gunakan Navigation Bar M3 untuk mobile, Navigation Rail untuk tablet, dan Navigation Drawer untuk desktop.
-- Gunakan indikator visual kontras tinggi untuk lokasi aktif.
-- Wajib dukung navigasi keyboard (Arrow Keys, Escape).
-- Responsive: Bottom navigation (<768px), sidebar desktop.
-- Gunakan `cmdk` untuk Command Palette `⌘K`.
-- Tandai navigasi aktif dengan `aria-current="page"`.
-
-#### 3: Informasi & Feedback
-Tampilkan status (Toast, Skeleton, Empty State).
-- **Integrasi M3 (jika diminta)**: Gunakan Snackbar untuk pesan sementara. Gunakan Badges pada ikon navigasi.
-- Gunakan warna semantik secara konsisten.
-- Gunakan **Sonner** untuk toast (maks 3 sekaligus).
-- Gunakan Skeleton persis sesuai layout (jangan gunakan spinner untuk layout) guna mencegah CLS.
-- Sediakan ilustrasi dan CTA pada Empty State.
-
-#### 4: Kontainer & Layout
-Kelompokkan konten (Card, Modal, Sheet).
-- **Integrasi M3 (jika diminta)**: Gunakan varian Card M3: Elevated, Filled, Outlined. Ikuti panduan Dialog M3 untuk modal.
-- Gunakan Radix UI Dialog untuk modal (menangani focus trap dan scroll lock).
-- Animasikan kemunculan modal (fade + scale).
-- Gunakan shadow tipis untuk elevasi card di mode terang.
-- Gunakan bottom sheet di mobile.
-
-### Checklist Micro-Interaction
-- [ ] Ring `:focus-visible` (2px) pada elemen interaktif.
-- [ ] **State Layers M3**: Jika menggunakan M3, pastikan elemen interaktif memiliki lapisan status (Hover, Focus, Pressed, Dragged) yang berbeda.
-- [ ] State loading pada tombol.
-- [ ] Gunakan **Framer Motion v12 spring physics** (`stiffness: 300, damping: 20`) untuk interaksi alami.
-- [ ] Transisi hover `transition-all duration-200 ease-out`.
-- [ ] Uji kontras warna dark mode.

package/skills/vibe-code-gardener/SKILL.md

@@ -1,181 +0,0 @@
----
-name: vibe-code-gardener
-description: "Purger of AI slop, code bloat, context drift, and architectural decay in vibe-coded projects / Pembersih AI slop, kode membengkak, konteks drift, dan pembusukan arsitektur pada proyek vibe coding."
-author: "Roedy Rustam"
----
-
-# Vibe Code Gardener (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Detects and purges AI-generated code quality issues — AI slop, code bloat, context drift, duplicated logic, dead code, misaligned patterns, and architectural decay in projects that have been heavily vibe-coded.
-
-### Trigger Conditions
-- Codebase has grown out of control after many AI-assisted coding sessions.
-- Duplication, inconsistent patterns, or unexplained abstractions detected.
-- Features are getting harder to add or understand.
-- Tests are brittle or missing entirely.
-- The codebase has "AI smell" — overly verbose comments, unnecessary defensive code, duplicate utilities.
-
-### AI Slop Detection Heuristics (2026)
-
-These are the most common AI-generated code quality issues to look for:
-
-#### 1. The "Just In Case" Over-Engineering
-AI models often add features or abstractions "for extensibility" that are never needed:
-```typescript
-// 🔴 AI SLOP: Factory pattern for something that will never change
-const createUserRepository = (type: 'postgres' | 'mysql' | 'sqlite') => {
-  if (type === 'postgres') return new PostgresUserRepo();
-  // ...never switches in practice
-};
-
-// ✅ CLEAN: Just use the implementation
-const userRepo = new PostgresUserRepo();
-```
-
-#### 2. The "Belt and Suspenders" Duplicate Guards
-AI adds null checks and validations at every layer unnecessarily:
-```typescript
-// 🔴 AI SLOP: Triple-validated (already validated by Zod + DB schema + here)
-if (!user || !user.id || user.id === undefined || user.id === null || typeof user.id !== 'string') { ... }
-
-// ✅ CLEAN: Trust your types
-if (!user.id) { ... }
-```
-
-#### 3. The "Graveyard of Dead Utilities"
-AI-generated helper files with functions that are defined but never used:
-- Search for exported functions with 0 usages: `grep -r "export function" --include="*.ts" | while read...`
-- Remove entire files of dead utilities.
-
-#### 4. Context Drift — Style Inconsistency
-Different sessions produce different coding styles in the same codebase:
-- Some files use `async/await`, others use `.then()` chains.
-- Some use `const` arrow functions, others use `function` declarations.
-- Mixed naming: `userId`, `user_id`, `UserID` in the same project.
-- **Fix**: Run a style unification pass with Prettier + ESLint rules.
-
-#### 5. Comment Pollution
-AI loves to narrate obvious code:
-```typescript
-// 🔴 AI SLOP: Stating the obvious
-// Get the user from the database
-const user = await db.user.findUnique({ where: { id } });
-// Return the user
-return user;
-
-// ✅ CLEAN: No comment needed — code is self-explanatory
-const user = await db.user.findUnique({ where: { id } });
-return user;
-```
-
-#### 6. The Bloated Component
-AI tends to put too much in one component across sessions:
-- Component renders conditionally across 5+ different states.
-- Component has 10+ props.
-- Component imports from 20+ different modules.
-- **Fix**: Apply Single Responsibility — split into sub-components.
-
-#### 7. Dependency Creep
-Each AI session may install new packages for tasks already solvable with existing deps:
-```bash
-# Audit dependencies — find packages doing the same thing
-npx depcheck  # Unused dependencies
-npx bundle-phobia-cli # Bundle size of each dep
-```
-
-### Gardening Protocol
-
-#### Phase 1: Discovery (Read Only)
-1. Map the full file tree.
-2. Identify largest files (likely bloated).
-3. Find duplicated logic with semantic search.
-4. Find unused exports and dead code.
-5. Identify inconsistent patterns across files.
-
-#### Phase 2: Triage
-Categorize issues:
-- **Critical**: Bugs, security holes, data loss risks.
-- **High**: Duplicate business logic that will diverge.
-- **Medium**: Code smells that slow development.
-- **Low**: Style inconsistencies, over-verbose comments.
-
-#### Phase 3: Systematic Refactoring
-Work file by file, smallest changes first:
-1. Remove dead code and unused imports.
-2. Extract duplicated logic into shared utilities.
-3. Simplify over-engineered abstractions.
-4. Standardize naming conventions.
-5. Add missing tests for business-critical paths.
-
-#### Phase 4: Prevention
-- Add ESLint rules to catch common AI slop patterns.
-- Add `depcheck` to CI to catch unused dependencies.
-- Add architecture tests (e.g., `arch-unit`) to enforce layer boundaries.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Mendeteksi dan membersihkan masalah kualitas kode yang dihasilkan AI — AI slop, kode yang membengkak, context drift, logika yang terduplikasi, kode mati, pola yang tidak konsisten, dan pembusukan arsitektur pada proyek yang banyak menggunakan vibe coding.
-
-### Kondisi Pemicu
-- Codebase telah tumbuh tidak terkendali setelah banyak sesi coding berbantuan AI.
-- Duplikasi, pola tidak konsisten, atau abstraksi yang tidak dapat dijelaskan terdeteksi.
-- Fitur semakin sulit ditambahkan atau dipahami.
-- Test rapuh atau tidak ada sama sekali.
-- Codebase memiliki "AI smell" — komentar yang terlalu verbose, kode defensif yang tidak perlu, utilitas yang diduplikasi.
-
-### Heuristik Deteksi AI Slop (2026)
-
-#### 1. Over-Engineering "Untuk Jaga-Jaga"
-Model AI sering menambahkan fitur atau abstraksi "untuk ekstensibilitas" yang tidak pernah dibutuhkan. Hapus factory pattern, strategy pattern, atau abstraksi lain yang tidak memiliki lebih dari satu implementasi.
-
-#### 2. "Belt and Suspenders" — Validasi Ganda Berlebihan
-AI menambahkan null check dan validasi di setiap layer yang sebenarnya sudah divalidasi oleh Zod, TypeScript, atau skema DB. Percayai tipe Anda.
-
-#### 3. "Kuburan Utilitas Mati"
-File helper yang dihasilkan AI dengan fungsi yang tidak pernah digunakan. Cari dan hapus ekspor dengan 0 penggunaan.
-
-#### 4. Context Drift — Inkonsistensi Gaya
-Sesi yang berbeda menghasilkan gaya koding yang berbeda: sebagian menggunakan `async/await`, yang lain menggunakan `.then()`; penamaan campuran `userId`, `user_id`, `UserID`. Perbaiki dengan satu pass Prettier + aturan ESLint.
-
-#### 5. Polusi Komentar
-AI suka mengomentari kode yang sudah jelas sendiri. Hapus komentar yang hanya mengulang apa yang sudah tertulis dalam kode.
-
-#### 6. Komponen yang Membengkak
-Komponen dengan terlalu banyak kondisi rendering, prop, atau impor. Terapkan Single Responsibility — pecah menjadi sub-komponen.
-
-#### 7. Creep Dependensi
-Setiap sesi AI mungkin menginstal paket baru untuk tugas yang sudah bisa diselesaikan dengan dependensi yang ada. Audit dengan `depcheck` dan `bundle-phobia-cli`.
-
-### Protokol Berkebun
-
-#### Fase 1: Penemuan (Hanya Baca)
-Peta pohon file lengkap, identifikasi file terbesar, temukan logika yang terduplikasi, temukan ekspor yang tidak digunakan.
-
-#### Fase 2: Triase
-Kategorikan masalah: Kritis, Tinggi, Sedang, Rendah.
-
-#### Fase 3: Refactoring Sistematis
-Kerja file per file, perubahan terkecil dulu: hapus kode mati, ekstrak logika duplikat, sederhanakan abstraksi berlebih, standarisasi penamaan, tambahkan test yang hilang.
-
-#### Fase 4: Pencegahan
-Tambahkan aturan ESLint, `depcheck` di CI, dan architecture test untuk menjaga codebase tetap bersih.
-
----
-
-## Orchestration & Integration
-- Integrates with `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, and `dependency-upgrade-migrator`.
-
-## Integrasi Orkestrasi
-- Terintegrasi dengan `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, dan `dependency-upgrade-migrator`.

package/skills/visual-qa-vision-agent/SKILL.md

@@ -1,71 +0,0 @@
----
-name: visual-qa-vision-agent
-description: "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."
-author: "Roedy Rustam"
----
-
-# 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!