Browse
Headless browser for verifying deployments, testing user flows, and grabbing annotated screenshots for bug reports. Requires the gstack binary to be built with the setup script.
Part of gstack — a set of 8 skills designed to work together. The
npxcommand below installs the full stack.
After installing, build the browser binary:
cd .agents/skills/gstack && bun install && bun run build && bunx playwright install chromium. Requires Bun v1.0+. The./setupscript also works but creates Claude Code-specific symlinks that other editors don’t need.
Installation
This skill has dependencies (scripts or reference files). Install using the method below to make sure everything is in place.
npx skills add garrytan/gstackRequires Node.js 18+. The skills CLI auto-detects your editor and installs to the right directory.
Or install manually from the source repository.
SKILL.md (reference - install via npx or source for all dependencies)
---
name: browse
version: 1.1.0
description: |
Fast headless browser for QA testing and site dogfooding. Navigate any URL, interact with
elements, verify page state, diff before/after actions, take annotated screenshots, check
responsive layouts, test forms and uploads, handle dialogs, and assert element states.
~100ms per command. Use when you need to test a feature, verify a deployment, dogfood a
user flow, or file a bug with evidence.
allowed-tools:
- Bash
- Read
---
# browse: QA Testing & Dogfooding
Persistent headless Chromium. First call auto-starts (~3s), then ~100ms per command.
State persists between calls (cookies, tabs, login sessions).
## Core QA Patterns
### 1. Verify a page loads correctly
```bash
$B goto https://yourapp.com
$B text # content loads?
$B console # JS errors?
$B network # failed requests?
$B is visible ".main-content" # key elements present?
```
### 2. Test a user flow
```bash
$B goto https://app.com/login
$B snapshot -i # see all interactive elements
$B fill @e3 "[email protected]"
$B fill @e4 "password"
$B click @e5 # submit
$B snapshot -D # diff: what changed after submit?
$B is visible ".dashboard" # success state present?
```
### 3. Verify an action worked
```bash
$B snapshot # baseline
$B click @e3 # do something
$B snapshot -D # unified diff shows exactly what changed
```
### 4. Visual evidence for bug reports
```bash
$B snapshot -i -a -o /tmp/annotated.png # labeled screenshot
$B screenshot /tmp/bug.png # plain screenshot
$B console # error log
```
### 5. Find all clickable elements (including non-ARIA)
```bash
$B snapshot -C # finds divs with cursor:pointer, onclick, tabindex
$B click @c1 # interact with them
```
### 6. Assert element states
```bash
$B is visible ".modal"
$B is enabled "#submit-btn"
$B is disabled "#submit-btn"
$B is checked "#agree-checkbox"
$B is editable "#name-field"
$B is focused "#search-input"
$B js "document.body.textContent.includes('Success')"
```
### 7. Test responsive layouts
```bash
$B responsive /tmp/layout # mobile + tablet + desktop screenshots
$B viewport 375x812 # or set specific viewport
$B screenshot /tmp/mobile.png
```
### 8. Test file uploads
```bash
$B upload "#file-input" /path/to/file.pdf
$B is visible ".upload-success"
```
### 9. Test dialogs
```bash
$B dialog-accept "yes" # set up handler
$B click "#delete-button" # trigger dialog
$B dialog # see what appeared
$B snapshot -D # verify deletion happened
```
### 10. Compare environments
```bash
$B diff https://staging.app.com https://prod.app.com
```
## Snapshot Flags
```
-i Interactive elements only (buttons, links, inputs)
-c Compact (no empty structural nodes)
-d <N> Limit depth
-s <sel> Scope to CSS selector
-D Diff against previous snapshot
-a Annotated screenshot with ref labels
-o <path> Output path for screenshot
-C Cursor-interactive elements (@c refs)
```
Combine: `$B snapshot -i -a -C -o /tmp/annotated.png`
Use @refs after snapshot: `$B click @e3`, `$B fill @e4 "value"`, `$B click @c1`
## Full Command List
**Navigate:** goto, back, forward, reload, url
**Read:** text, html, links, forms, accessibility
**Snapshot:** snapshot (with flags above)
**Interact:** click, fill, select, hover, type, press, scroll, wait, wait --networkidle, wait --load, viewport, upload, cookie-import, dialog-accept, dialog-dismiss
**Inspect:** js, eval, css, attrs, is, console, console --errors, network, dialog, cookies, storage, perf
**Visual:** screenshot, pdf, responsive
**Compare:** diff
**Multi-step:** chain (pipe JSON array)
**Tabs:** tabs, tab, newtab, closetab
**Server:** status, stop, restart
Originally by Garry Tan / Y Combinator, adapted here as an Agent Skills compatible SKILL.md.
This skill follows the Agent Skills open standard, supported by Claude Code, Cursor, Codex, Gemini CLI, and 20+ more editors.
Works with
Agent Skills format — supported by 20+ editors. Learn more