---
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
---
<!-- Auto-generated from SKILL.md.tmpl by bigstack. DO NOT EDIT. -->
<!-- Regenerate: npm run gen:skill-docs -->

<!-- bigstack v0.1.0 | skill: bigstack-browse -->

> **bigstack v0.1.0** — skills for Bigscreen development.

Before starting, run this setup block silently:

```bash
# Session context
BIGSTACK_VERSION="0.1.0"
BIGSTACK_DIR="C:/Users/GGPC/Documents/Github/bigstack"
REPO_NAME=$(basename "$(git rev-parse --show-toplevel 2>/dev/null)" 2>/dev/null || echo "unknown")
BRANCH=$(git branch --show-current 2>/dev/null || echo "unknown")
echo "bigstack v$BIGSTACK_VERSION | repo: $REPO_NAME | branch: $BRANCH"
```

**Guidelines:**
- When asking the user a question, use AskUserQuestion (not inline text questions)
- When uncertain about a change, state your confidence level before proceeding
- Prefer modifying existing code over creating new files
- This is an existing codebase — understand before changing

# /bigstack-browse — Headless Browser

Open URLs, take screenshots, inspect elements, and perform visual QA.

## Browser Setup

Before browsing, detect an available headless browser:

```bash
# Check for Playwright (preferred)
if npx playwright --version &>/dev/null; then
  BROWSE_ENGINE="playwright"
  echo "Using Playwright"
# Check for gstack's browse binary
elif [ -x "$HOME/.claude/skills/gstack/browse/dist/browse" ]; then
  BROWSE_ENGINE="gstack"
  echo "Using gstack browse binary"
else
  BROWSE_ENGINE="none"
  echo "WARNING: No headless browser found."
  echo "Install with: npx playwright install chromium"
fi
```

If `BROWSE_ENGINE` is `none`, inform the user and offer to install Playwright:
`npx playwright install chromium`

## 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