---
description: Tự động cô lập UI, chạy app, chụp ảnh màn hình và thẩm định.
safe_auto_run: false
category: workflow
priority: high
---

# Autonomous UI Visual Verification Flow

> **Mindset**: Mọi màn hình UI code ra cần phải được verified bằng cách nhìn vào thực tế, không chỉ dựa trên việc 'build thành công'.

Workflow này cho phép AI chủ động biến ứng dụng thành "Sân khấu thử nghiệm", ép Boot trực tiếp màn hình mục tiêu, tự chụp ảnh, thẩm định Layout và sau đó "dọn dẹp" (revert) không để lại rác trên source code.

## Cách gọi
- Dùng lệnh: `/verify-ui`
- Dán kèm parameters nếu cần: `component=TênMànHình`

## Quy trình Thực thi (5-Steps Mandatory Protocol)

### 1. [ISOLATION] Cấu hình Boot trực tiếp
- **Goal**: Render component ngay khi app khởi động để không phải click qua nhiều màn hình phụ.
- AI sẽ xác định file **Root Entry** của Project (VD: `App.tsx`, `MainActivity.kt`, `ContentView.swift`).
- Chèn Component cần verify vào vị trí mặc định. Cung cấp mock data/state giả nếu Component đó request tham số `props` từ navigation.
- Nhớ đánh dấu đoạn code mình vừa thêm (VD: `// UI-VERIFY-INJECT`).

### 2. [BOOT] Build & Run
- Chạy terminal command build & run tương ứng:
  - **Android**: `./gradlew installDebug` -> `adb shell am start -n <package>/<Main Activity>`
  - **iOS**: `xcodebuild -scheme <Scheme> ...` -> `xcrun simctl install` -> `xcrun simctl launch`
  - **React Native / Expo**: Chạy lệnh `npm run ios` hoặc `npm run android`
- Đợi 3-5s cho app render đầy đủ state (tránh loading spinners).

### 3. [CAPTURE & VERIFY] Vision Analysis
- Gọi công cụ dòng lệnh (hoặc Maestro MCP) để chụp ảnh màn hình hiện tại lưu ở thư mục gốc giả lập, sau đó pull về (hoặc lưu path máy):
  - `xcrun simctl io booted screenshot ./ui_temp.png` (iOS)
  - `adb shell screencap -p /sdcard/ui_temp.png && adb pull /sdcard/ui_temp.png ./ui_temp.png` (Android)
- Lập tức sư dụng `view_file` tải file `./ui_temp.png` lên Vision Context.
- **Tiêu chí Verify (The 4 Pillars)**:
  1. Dữ liệu (Mock Data có lên chữ đủ không, chữ có gãy vỡ do thiếu Width không?)
  2. Màu sắc và font (Có bị áp lộn Theming System không?)
  3. Padding/Margin và căn giữa (Sát lề, rớt dòng).
  4. Safe Area (Status bar & Navigation Bar có đè content không?)

### 4. [MANDATORY REVERT] Phục hồi trạng thái Root Entry
- 🚨 **BẮT BUỘC:** Chạy lệnh `git checkout -- <RootEntryFile>` HOẶC gỡ bỏ tay (tay xoá comment) toàn bộ code đã Inject bước 1.
- Nếu ở bước 2 app build bị Crash, AI VẪN PHẢI REVERT lại code trước khi kết thúc phiên báo lỗi. Tránh phá codebase.

### 5. [FEEDBACK & FIX LOOP] Vòng lặp báo cáo
- Nếu ảnh hoàn hảo -> Xóa `ui_temp.png`, kết thúc workflow và chuyển sang task mới.
- Nếu phát hiện lỗi UI -> AI tự tóm tắt ("Nội dung bị margin-top -20px đè bar") -> Thực hiện sửa CSS/Modifiers -> Lặp lại Vòng 1.

---
**Lưu ý Antigravity**: Khi `symphony-enforcer` ở chế độ `autoVerification=true` trong `Gate 4 (Phase B)`, nó sẽ tự động chạy Workflow 5 bước này thay vì phải đợi User tự test bằng mắt thường.