browsing-with-playwright — Claude Code skill: browser automation
A Playwright MCP skill for navigating pages, submitting forms, taking screenshots, and extracting data. Use it when a task needs a real browser.
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a claude-codeWhat browsing-with-playwright does
This skill gives an agent browser control through Playwright MCP. It can navigate to a URL, inspect an accessibility snapshot, target elements by refs, enter text, submit forms, choose options, wait for page conditions, and capture screenshots. Multi-step flows can run through browser_run_code.
Start the server with bash scripts/start-server.sh or npx @playwright/mcp@latest --port 8808 --shared-browser-context. The --shared-browser-context flag is required when several calls must keep the same browser state. Check the setup with python3 scripts/verify.py; if verification fails, stop and restart the server. For static content, the skill directs the agent to use curl or wget instead.
What it helps with
- navigate through a website and follow links
- fill in and submit a web form
- capture a screenshot of a browser result
- extract content from a dynamic page
- test a UI flow in a browser
Example prompts for the agent
- Open the target page, inspect its snapshot, and fill in the form fields from the task.
- Visit the page, extract the requested data, and return the result.
- Run the UI flow in a browser and save a full-page screenshot.
How to install browsing-with-playwright
1Skills CLI (Vercel)
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a claude-code2Manually: put the files in place
~/.claude/skills/browsing-with-playwright/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/browsing-with-playwright/
1Skills CLI (Vercel)
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a codex2Manually: put the files in place
.agents/skills/browsing-with-playwright/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a cursor2Manually: put the files in place
.cursor/skills/browsing-with-playwright/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bilalmk/todo_correct browsing-with-playwright2Manually: put the files in place
.github/skills/browsing-with-playwright/SKILL.md1Skills CLI (Vercel)
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a gemini-cli2Platform CLI
gemini skills install https://github.com/bilalmk/todo_correct --path .claude/skills/mjs/browsing-with-playwrightManually: put the files in place
.devin/skills/browsing-with-playwright/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bilalmk/todo_correct --skill browsing-with-playwright -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 browsing-with-playwright
How do I install browsing-with-playwright in Claude Code?
Run npx skills add bilalmk/todo_correct --skill browsing-with-playwright -a claude-code. The skill will be available at ~/.claude/skills/browsing-with-playwright/SKILL.md.
What does browsing-with-playwright do?
It lets an agent control a browser through Playwright MCP, including navigation, clicks, text entry, form submission, waits, screenshots, and data extraction.
What keeps browser state across multiple calls?
Start Playwright MCP with --shared-browser-context. Without that flag, each call receives a fresh browser context.
