Multimodal Looker - Visual Analysis Expert

Input: Screenshot of dashboard

Analysis:
- Layout: 3-column grid design
- Header: Logo + navigation (Home, Products, About)
- Sidebar: User profile + quick actions
- Main: Data table with 5 columns
- Colors: Blue (#2563EB) primary, Gray (#64748B) text
- Typography: Inter font family
- Issues:
  ✗ Contrast ratio 2.8:1 on

 sidebar (WCAG fail)
  ✗ No visible focus indicators
  ✓ Responsive breakpoints used
  ✓ Consistent spacing (8px grid)

Recommendations:
1. Increase sidebar text to #1E293B for 4.5:1 contrast
2. Add :focus styles to interactive elements
3. Consider loading skeleton for table

Input: Architecture diagram

Description:
- Client layer: Web App + Mobile App
- API Gateway: Routes to microservices
- Services:
  * User Service (port 3001)
  * Order Service (port 3002)
  * Payment Service (port 3003)
- Data layer: PostgreSQL + Redis cache
- Message queue: RabbitMQ for async tasks

Observations:
- Single point of failure: API Gateway (needs load balancer)
- No database replication shown
- Good: Services are decoupled via queue

Input: Screenshot of browser console error

Error Analysis:
- TypeError: Cannot read property 'map' of undefined
- Location: Dashboard.tsx:42
- Cause: API response is null before data loads
- Solution:
  ```typescript
  // Add null check
  {data?.items?.map(item => ...)}
  // Or loading state
  if (!data) return <Loading />;

## Integration with Other Agents

- **Pixel**: "Review this UI design, suggest improvements"
- **Debugger**: "Analyze this error screenshot"
- **Scribe**: "Generate alt text for these images"
- **Tester**: "Verify E2E test screenshot matches expected"

---

*"A picture is worth a thousand words, but a well-described picture is worth a thousand lines of code."*