Skill

Review

Audit score 70

playwriter

brianlovin/agent-config

Control the user's active Chrome tab via Playwriter CLI for UI inspection, scripted actions, and frontend debugging.

What is playwriter?

Playwriter lets you drive the user's currently open Chrome tab without launching a new browser. Use it to inspect live UI state, run scripted browser actions, capture console output, and reproduce frontend issues directly in their tab.

Inspect live page state and DOM structure via accessibility snapshots
Execute targeted browser actions (click, type, hover, fetch) on the active tab
Capture and evaluate console output and in-page JavaScript results
Query UI elements by role and collect structured data from lists and options
Read popup and hover content without manual interaction
Run arbitrary in-page debug code and evaluate page properties

How to install playwriter

npx skills add https://github.com/brianlovin/agent-config --skill playwriter

Prerequisites

Playwriter extension installed and enabled (green) on the target Chrome tab
Playwriter CLI available locally (via `playwriter --version` or `npx -y playwriter`)

Claude Code

Cursor

Windsurf

Cline

How to use playwriter

1.Ensure the Playwriter extension is enabled on the target Chrome tab
2.Verify the CLI is available by running `playwriter --version` or `npx -y playwriter --version`
3.Create or attach a session with `playwriter session new`
4.Confirm connection to the correct tab by running `playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"`
5.Execute targeted actions (click, type, hover, fetch) or collect page structure as needed
6.Pull logs and state via `page.evaluate()` and summarize findings with exact IDs and observed transitions

Use cases

Good for

Debugging frontend issues by inspecting the user's live page state and console logs
Automating UI interactions like clicking buttons, filling forms, or navigating within the active tab
Extracting structured data from dynamic UI elements (lists, dropdowns, tables)
Reproducing bugs by capturing exact page state, element IDs, and state transitions
Testing accessibility and reading hover/popup content for validation

Who it's for

Frontend developers debugging live issues
QA engineers reproducing and validating UI bugs
Agents automating browser-based workflows without launching new tabs
Technical support staff inspecting user-reported page states

playwriter FAQ

Do I need to launch a new browser window?

No. Playwriter controls the user's currently open Chrome tab directly via the extension, without launching a new browser.

What if the session attaches to the wrong tab?

Click the Playwriter extension icon on the intended tab and re-run `playwriter session new` to create a fresh session.

How do I extract data from lists or dropdowns?

Use `page.getByRole('option').all()` to get all options, then iterate or query specific elements by index or role.

Can I run arbitrary JavaScript on the page?

Yes, use `page.evaluate()` to run in-page debug code and return results to the CLI.

What should I do if the connection feels stale?

Create a fresh session with `playwriter session new` to re-establish the connection.

Full instructions (SKILL.md)

Source of truth, from brianlovin/agent-config.

name: playwriter description: Control the user's currently open Chrome tab through the Playwriter CLI (no new browser launch). Use when you need to inspect live UI state, run scripted browser actions, capture console output, or reproduce frontend issues directly in the user's tab.

Playwriter

Use this skill to drive the user's active Chrome tab via Playwriter.

Full documentation is available here: https://playwriter.dev/

Quick Start

Ensure the Playwriter extension is enabled (green) on the target tab.
Ensure CLI is available:

playwriter --version || npx -y playwriter --version

Create/attach a session:

playwriter session new

Run commands against that session:

playwriter -s 1 -e "console.log(await page.url())"

Core Workflow

Confirm connection and correct tab:

playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"

Collect page structure when needed:

playwriter -s <session> -e "console.log(await accessibilitySnapshot({ page }))"

Execute targeted actions (click/type/hover/fetch/evaluate).
Pull logs and structured state via page.evaluate.
Summarize findings with exact IDs, timestamps, and observed state transitions.

Useful Commands

Get list rows/options from current app UI:

playwriter -s <session> -e "const rows = await page.getByRole('option').all(); console.log(rows.length);"

Read popup/hover content:

playwriter -s <session> -e "const row = page.getByRole('option').nth(0); await row.hover(); await page.waitForTimeout(700); console.log(await page.locator('[data-side]').first().innerText());"

Run arbitrary in-page debug code:

playwriter -s <session> -e "const out = await page.evaluate(() => ({ href: location.href })); console.log(out);"

Troubleshooting

If the session attaches to the wrong tab, click the extension icon on the intended tab and re-run playwriter session new.
If playwriter command is missing, use npx -y playwriter ... or install globally.
If execution errors suggest stale connection, create a fresh session.