# playwriter

This skill connects an agent to the Chrome tab you already have open through the Playwriter CLI. Use it to inspect live UI, run page actions, or reproduce a frontend bug.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2700 installs · ★ 379
- Author: brianlovin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/brianlovin/agent-config/tree/HEAD/skills/playwriter/SKILL.md
- Updated: 2026-03-25
- HTML: https://affpapa.org/en/nevibecode/skills/brianlovin-playwriter

## What it does

The agent works with the active Chrome tab instead of opening another browser. It can check the page URL and title, inspect an accessibility snapshot, interact with elements, and read page state through `page.evaluate`. That makes it useful when a frontend issue needs to be reproduced in the actual interface.

Enable the Playwriter extension on the target tab and check that the CLI works with `playwriter --version` or `npx -y playwriter --version`. Start a connection with `playwriter session new`. If the session goes stale, create another; if it attaches to the wrong tab, select the intended tab with the extension icon and reconnect. The skill favors read-only inspection and calls for a warning before destructive UI actions.

The `playwriter` command must be available, or you can invoke it through `npx -y`. Remove tokens and user data from log summaries. A stale session can fail, and choosing the wrong tab means the agent will inspect a different screen.

## Requirements
- Works with: Chrome

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill playwriter -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill playwriter -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill playwriter -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install brianlovin/agent-config playwriter
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill playwriter -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/brianlovin/agent-config --path skills/playwriter
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill playwriter -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/brianlovin/agent-config/tree/HEAD/skills/playwriter/SKILL.md

## When to use it
- inspect the current page URL and title
- capture an accessibility view of the interface
- interact with elements in the active Chrome tab
- read console logs and page state
- reproduce a frontend issue in the live UI

## Example prompts
- Check the URL and title in the Chrome tab I have open.
- Find the options shown in the current interface and count them.
- Reproduce the frontend issue on this page and report the state after the action.

## Similar
- [agent-browser](https://affpapa.org/en/nevibecode/skills/vercel-labs-agent-browser.md) — skill · 1200000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs
- [computer-use](https://affpapa.org/en/nevibecode/skills/computer-use.md) — skill · 239400 installs
- [browser-use](https://affpapa.org/en/nevibecode/skills/browser-use.md) — skill · 98200 installs
- [playwright-cli](https://affpapa.org/en/nevibecode/skills/playwright-cli.md) — skill · 195700 installs
- [last30days](https://affpapa.org/en/nevibecode/skills/last30days.md) — skill · 53000 installs

## Other versions with the same name
- [playwriter · remorses](https://affpapa.org/en/nevibecode/skills/playwriter.md) — 5800 installs

From the same set: [brianlovin/agent-config](https://affpapa.org/en/nevibecode/by/brianlovin/agent-config.md) — 15 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