# browser-qa

Drives Playwright in Chromium to test pages, interactive UI elements, and responsive layouts before merging pull requests or deploying.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 109
- Author: c0x12c
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/browser-qa/SKILL.md
- Updated: 2026-06-18
- HTML: https://affpapa.org/en/nevibecode/skills/c0x12c-browser-qa

## What it does

The skill directs an assistant to inspect client-side applications using headless Chromium. It traverses discovered views, tracking HTTP response codes, missing assets, and uncaught script exceptions inside `console.error`. Testing covers two distinct profiles: 1280px desktop displays and 375px mobile viewports with touch event emulation enabled.

During execution, the tool verifies core user interactions without running persistent daemons. It clicks buttons, verifies modal visibility, confirms navigation links, and checks form validation logic. Any failed step captures a screenshot to document regressions accurately.

On applications running live websockets or recurring polling requests, standard `networkidle` listeners freeze execution indefinitely, which requires switching checks to `domcontentloaded` or explicit element selectors. The skill delivers a structured breakdown of failures first without altering codebase files automatically.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill browser-qa -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/browser-qa/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/browser-qa/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill browser-qa -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/browser-qa/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill browser-qa -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/browser-qa/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install c0x12c/ai-toolkit browser-qa
```

2. **Manually: put the files in place**
- File: `.github/skills/browser-qa/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill browser-qa -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/c0x12c/ai-toolkit --path toolkit/skills/browser-qa
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/browser-qa/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill browser-qa -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/browser-qa/SKILL.md

## When to use it
- inspect web pages for broken network requests and console errors
- verify layout consistency on 1280px and 375px viewports
- validate interactive buttons, modal dialogs, and form submissions
- capture failure screenshots during pre-release smoke testing

## Example prompts
- Run browser-qa on the local frontend build to inspect responsive layouts and console issues
- Use browser-qa to verify form validation and check for broken navigation links before opening a PR

## Similar
- [improve-codebase-architecture](https://affpapa.org/en/nevibecode/skills/improve-codebase-architecture.md) — skill · 1163035 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [tdd](https://affpapa.org/en/nevibecode/skills/tdd.md) — skill · 1141062 installs
- [skill-creator](https://affpapa.org/en/nevibecode/skills/skill-creator.md) — skill · 414180 installs
- [agent-browser](https://affpapa.org/en/nevibecode/skills/vercel-labs-agent-browser.md) — skill · 1200000 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs

## Other versions with the same name
- [browser-qa · affaan-m](https://affpapa.org/en/nevibecode/skills/browser-qa.md) — 4900 installs

From the same set: [c0x12c/ai-toolkit](https://affpapa.org/en/nevibecode/by/c0x12c/ai-toolkit.md) — 33 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md