---
name: bigstack-browse
version: 0.1.0
description: |
  Headless browser interaction for QA, visual inspection, and
  data extraction. Supports screenshots, CSS inspection, and
  user handoff for interactive flows.
allowed-tools:
  - Bash
  - Read
  - Write
  - AskUserQuestion
---

{{PREAMBLE}}

# /bigstack-browse — Headless Browser

Open URLs, take screenshots, inspect elements, and perform visual QA.

{{BROWSE_SETUP}}

## Capabilities

| Action | How |
|--------|-----|
| **Open URL** | Navigate to a page and capture screenshot |
| **Screenshot** | Full page or element-specific capture |
| **Inspect CSS** | Read computed styles on elements |
| **Console logs** | Capture browser console output |
| **Network** | Monitor requests and responses |
| **Interactive handoff** | Open URL in user's default browser |

## QA Patterns

When performing visual QA, check for:

1. **Layout**: Elements overflow, overlap, or misalign
2. **Responsiveness**: Test at mobile (375px), tablet (768px), desktop (1280px)
3. **Typography**: Font loading, text truncation, line heights
4. **Colors**: Contrast ratios, theme consistency
5. **Images**: Missing images, incorrect aspect ratios
6. **Forms**: Input states (focus, error, disabled)
7. **Loading states**: Skeleton screens, spinners, empty states
8. **Console errors**: JavaScript errors, failed network requests
9. **Accessibility**: Missing alt text, aria labels, focus indicators
10. **Dark mode**: If supported, verify both themes
11. **Scrolling**: Sticky elements, scroll performance, infinite scroll

## Usage

When the user provides a URL:
1. Set up the browser engine
2. Navigate to the URL
3. Take a full-page screenshot
4. Report any console errors
5. Ask the user what they want to inspect further

When used as part of `/bigstack-qa`:
1. Detect the dev server URL from package.json or framework config
2. Run through the QA patterns above on affected pages
3. Report findings with screenshots
