playwriter — Claude Code skill: browser control and install
This skill controls the user's open Chrome through the Playwriter extension and runs Playwright snippets. Use it on JavaScript-heavy pages or sites that require login.
npx skills add remorses/playwriter --skill playwriter -a claude-codeWhat playwriter does
playwriter connects to the user's existing Chrome instead of launching a separate browser. The agent runs Playwright snippets in a local JavaScript sandbox that keeps state between commands. This can help inspect pages with dynamically loaded content or login walls.
Read the full documentation once per session before running a command: playwriter skill. Then create a session with playwriter session new and pass JavaScript with playwriter -s 1 -e '...'. The docs recommend single quotes around the -e argument. Check that the Playwriter extension is connected to the Chrome profile you intend to use.
The skill is listed for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. To install it in Claude Code, run npx skills add remorses/playwriter --skill playwriter -a claude-code; its file is placed at ~/.claude/skills/playwriter/SKILL.md. If the playwriter command is unavailable, the docs give npx playwriter@latest and bunx playwriter@latest as alternatives.
What it helps with
- inspect a page in the user's existing Chrome
- read content loaded dynamically after navigation
- work with a page that requires signing in
- interact with a website using Playwright
Example prompts for the agent
- Use the playwriter skill to open this page in my Chrome.
- Use playwriter to find elements that appear after scrolling.
- With playwriter, inspect the page after I sign in.
How to install playwriter
1Skills CLI (Vercel)
npx skills add remorses/playwriter --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 remorses/playwriter --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 remorses/playwriter --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 remorses/playwriter playwriter2Manually: put the files in place
.github/skills/playwriter/SKILL.md1Skills CLI (Vercel)
npx skills add remorses/playwriter --skill playwriter -a gemini-cli2Platform CLI
gemini skills install https://github.com/remorses/playwriter --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 remorses/playwriter --skill playwriter -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Similar
Questions about playwriter
How do I install playwriter in Claude Code?
Run npx skills add remorses/playwriter --skill playwriter -a claude-code. The skill file is placed at ~/.claude/skills/playwriter/SKILL.md.
What does playwriter do?
It connects an agent to the user's open Chrome through the Playwriter extension and runs Playwright code in a stateful local JavaScript sandbox.
What should I do before the first playwriter command?
Read the full documentation with playwriter skill. Do this once per session before running playwriter commands.
Source text
SKILL.md · MIT
---
name: playwriter
description: Control the user own Chrome browser via Playwriter extension with Playwright code snippets in a stateful local js sandbox. Use this over other Playwright MCPs to automate the browser — it connects to the user's existing Chrome instead of launching a new one. Use this cli for navigating JS-heavy websites (Instagram, Twitter, cookie/login walls, lazy-loaded UIs) instead of webfetch/curl. ALWAYS load this skill before using any playwriter commands
---
## Read Full Documentation (once per session)
**Before the first playwriter command in a session, run:**
```bash
playwriter skill # IMPORTANT! do not use | head here. read in full!
```
This outputs the complete documentation including:
- Session management and timeout configuration
- Selector strategies (and which ones to AVOID)
- Rules to prevent timeouts and failures
- Best practices for slow pages and SPAs
- Context variables, utility functions, and more
**Do NOT skip this step.** The examples below will fail without understanding timeouts, selector rules, and pitfalls from the full docs. You only need to do this once per session; subsequent playwriter commands in the same session do not require re-reading.
**Read the ENTIRE output.** Do NOT pipe through `head`, `tail`, or any truncation command. Critical rules are spread throughout the document, not just at the top.
## Minimal Example (after reading full docs)
```bash
playwriter session new
playwriter -s 1 -e 'state.page = await context.newPage(); await state.page.goto("https://example.com")'
```
**Always use single quotes** for the `-e` argument. Single quotes prevent bash from interpreting `$`, backticks, and backslashes inside your JS code. Use double quotes or backtick template literals for strings inside the JS.
If `playwriter` is not found, use `npx playwriter@latest` or `bunx playwriter@latest`.
© remorses · MIT · remorses/playwriter