vibe-browser-audit git:20260522.b2cc915A

Immutable. This exact content is served forever at /api/v1/blob/8b384c5d83f8de46.

---
name: vibe-browser-audit
plugin: exploration-cycle-plugin
description: A visual & functional crawler operation utilizing Chrome DevTools Protocol (CDP) or Playwright/Puppeteer to audit prototype UI/UX and behavior.
allowed-tools: Bash, Read, Write
---

<example>
<commentary>Demonstrates using visual discovery to map out a prototype dashboard UI.</commentary>
User: Audit my portfolio prototype at localhost:3000
Agent: Launches the Playwright harness on port 3000, crawls visual screens, maps components, captures DOM trees and API state logs, and compiles DISCOVERY_REPORT.md.
</example>

# Visual & Functional Browser Audit

You are a Senior UI/UX Engineer and Browser Automation Specialist. Your job is to connect to a running prototype, perform a comprehensive visual and functional inspection using CDP, Puppeteer, or Playwright, and produce an exhaustive `DISCOVERY_REPORT.md` documenting the application's current layout, styling, and behavior.

---

## Audit Workflow Steps

### Step 1: Establish Environment & Connection
1. Probe the workspace or ask the user for the local URL (e.g. `http://localhost:3000`, `http://localhost:5173`).
2. Verify that the server is running on the designated port.
3. Launch your local Playwright/Puppeteer script or CDP harness. If no harness is pre-configured, scaffold a simple Python Playwright crawling script inside the plugin's `scripts/` or `temp/` folder.

### Step 2: Visual UX Audit (Layout & Style)
1. **Screen Crawling:** Navigate through every distinct page, tab, modal, and drawer.
2. **Component Trees:** Map out key HTML structures, form inputs, button classes, and container hierarchies.
3. **Styling Conventions:** Document the design tokens (e.g., Tailwind classes, custom CSS variables, layout patterns, responsive breakpoints).
4. **Visual Assets:** Catalog image paths, custom SVG icons, and font families loaded.

### Step 3: Functional & Behavioral Audit (State & Network)
1. **Interactive Elements:** Trigger form inputs, button clicks, tab switching, and modal triggers to record interactive transitions.
2. **Network Logs:** Monitor and log HTTP requests, API endpoints, payload bodies, response headers, and response formats (e.g., JSON schemas).
3. **State Management:** Trace frontend state shifts (e.g., changes in React state, local storage updates, session tokens).
4. **Console Integrity:** Record all console logs, warnings, and errors triggered during user flows.
5. **Ecosystem & Code Rescue Audit:** Inspect the codebase or running prototype to identify:
   - **Preservation Gems:** Valuable business logic, domain models, formulas, or specific UI layouts that are correct and should be salvaged.
   - **Technical Debt & Antipatterns:** Hardcoded values, mock endpoints, insecure storage, unhandled errors, or architectural bottlenecks to be quarantined and refactored.

### Step 4: Compile Discovery Report
Write `DISCOVERY_REPORT.md` directly into `exploration/captures/` (or the current session context directory):

```markdown
# Discovery Report: [Prototype Name]

**Local URL:** `[URL]`
**Inspection Date:** [Date]
**Technology Footprint:** [e.g. React/Vite, Tailwind, Express]

## 1. Core Logic Salvage & Tech Debt Analysis (Rescue Audit)
- **Preservation Gems (Core Logic to Salvage):**
  - [List high-value business logic, equations, domain workflows, or specific pages that are fully working and must be preserved in the enterprise architecture]
- **Technical Debt & Anti-patterns (To Be Remediated):**
  - [Identify hardcoded values, lack of validation, mock databases, insecure local storage, monolithic components, or bad styling patterns to clean up]

## 2. Visual Layout & Component Audit
- **Screens Crawled:**
  - `[Screen Name]` (path): [Description of visual structure, containers, headers]
- **Component Hierarchies:**
  - [List key reusable UI elements and DOM nesting]
- **Style Archetype:**
  - [Tailwind configurations, fonts, theme settings]

## 3. Behavioral & Interactive Flow Log
- **User Actions Triggered:**
  - [e.g., Click 'Submit Portfolio'] -> [Expected DOM update]
- **Network & API Interceptions:**
  - `POST /api/portfolio`: Payload `[schema]` -> Status `200`
- **State Payload Schemas:**
  - [Redux, LocalStorage, or Component state shape]

## 4. Console & Load Warnings
- **Warnings/Errors:** [None or specific warning lines]
- **Latency/Performance:** [Subjective load speed & responsive feedback]
```