playwriter · brianlovin — Claude Code skill: browser control and setup
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.
npx skills add brianlovin/agent-config --skill playwriter -a claude-codeWhat playwriter 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.
What it helps with
- 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 for the agent
- 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.
How to install playwriter
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill playwriter -a claude-code2Manually: put the files in place
~/.claude/skills/playwriter/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/playwriter/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill playwriter -a codex2Manually: put the files in place
.agents/skills/playwriter/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill playwriter -a cursor2Manually: put the files in place
.cursor/skills/playwriter/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install brianlovin/agent-config playwriter2Manually: put the files in place
.github/skills/playwriter/SKILL.md1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill playwriter -a gemini-cli2Platform CLI
gemini skills install https://github.com/brianlovin/agent-config --path skills/playwriterManually: put the files in place
.devin/skills/playwriter/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill playwriter -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about playwriter
How do I install playwriter in Claude Code?
Run npx skills add brianlovin/agent-config --skill playwriter -a claude-code. The skill file is at ~/.claude/skills/playwriter/SKILL.md.
What does playwriter do?
It lets an agent connect to your active Chrome tab through the Playwriter CLI. The agent can inspect the page, interact with it, and read its state.
What does playwriter need to work?
Enable the Playwriter extension on the target tab and make the playwriter CLI available, or use npx -y playwriter. Start a fresh session if the connection becomes stale.
Similar skills
All skills for Browser and scraping →playwriter by other authors comes first.
