skill

playwright · davila7 — Claude Code skill: what it does, how to install

Q: How to install playwright in Claude Code?

Run `npx claude-code-templates@latest --skill development/playwright`. You can also install it via `npx skills add davila7/claude-code-templates --skill playwright -a claude-code`.

Q: Why does the workflow require running snapshot repeatedly?

Commands target temporary IDs like `e3` generated during the snapshot step. Navigating, opening menus, or modifying page state invalidates those IDs, so a new snapshot is needed to interact with updated elements.

Automates a real browser from your terminal using playwright-cli. Helps navigate pages, fill forms, take screenshots, and inspect DOM snapshots during CLI tasks.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill development/playwright

Open on GitHub

What playwright does

This skill integrates browser automation into terminal sessions through playwright-cli and an internal wrapper script. It prioritizes ad-hoc CLI commands over building full @playwright/test suites, focusing on direct navigation, clicks, and multi-tab workflows.

Interactions depend on page snapshots. Running snapshot extracts visible nodes and assigns short identifiers like e1 or e15. The agent sends keystrokes or click events to these specific keys. Whenever a modal opens or navigation occurs, references expire, requiring a fresh snapshot step.

Execution depends on npx, making a local Node.js setup mandatory before running commands. A global package install remains optional because the wrapper handles execution directly, writing captured artifacts to output/playwright/.

What it helps with

automate form submissions and text input in a real browser
capture full-page screenshots and UI traces during troubleshooting
inspect interactive DOM elements using stable snapshot references
switch between multiple open browser tabs in the console

Example prompts for the agent

Open https://example.com/form, take a snapshot, and fill out the form fields.
Launch https://playwright.dev with --headed mode and capture a screenshot.
Start tracing, interact with the page, and save artifacts to output/playwright/.

How to install playwright

1claude-code-templates

npx claude-code-templates@latest --skill development/playwright

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill playwright -a claude-code

3Manually: put the files in place

~/.claude/skills/playwright/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/playwright/

Manually: put the files in place

.agents/skills/playwright/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/playwright/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates playwright

2Manually: put the files in place

.github/skills/playwright/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/playwright

Manually: put the files in place

.devin/skills/playwright/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about playwright

How to install playwright in Claude Code?

Run npx claude-code-templates@latest --skill development/playwright. You can also install it via npx skills add davila7/claude-code-templates --skill playwright -a claude-code.

What does the playwright skill do?

It drives browser sessions directly from terminal commands. The agent inspects pages via snapshot tags, fills forms, clicks buttons, and collects debug artifacts without creating test files.

Why does the workflow require running snapshot repeatedly?

Commands target temporary IDs like e3 generated during the snapshot step. Navigating, opening menus, or modifying page state invalidates those IDs, so a new snapshot is needed to interact with updated elements.

Similar skills

All skills for Browser and scraping →

playwright by other authors comes first.

playwright PyModel A Playwright skill for Next.js with 45 rules across 8 categories, from test architecture to CI debugging. Useful when tests fail at random. CX Codex +1 485installs playwright Mindrally Skill for automating E2E testing of web applications in TypeScript and JavaScript. Teaches agents to write tests following best practices: resilient locators, web-first assertions, no hardcoded timeouts. CX Codex +1 1,100installs playwright secondsky A Playwright skill for browser automation and end-to-end testing. It finds your running dev server and writes the test script for the task. CX Codex +1 1,000installs playwright bobmatnyc A Playwright skill that guides the agent through writing end-to-end tests: locators, auto-wait, cross-browser runs. Useful when user flows need test coverage. CX Codex +1 879installs playwright oakoss A skill that teaches your agent the Playwright API: locators, assertions, screenshots and PDFs, stealth mode, authenticated sessions, error fixes. CX Codex +1 452installs agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. CX Codex +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs computer-use stablyai This skill drives a visible app window through orca computer: accessibility tree, clicks, typing, screenshots. Reach for it when the job sits behind a GUI. CX Codex +1 239,600installs browser-use browser-use Hands the agent a real Chrome over CDP: clicks, typing, screenshots, and pages that need JS or your logged-in session. CX Codex +1 98,200installs playwright-cli microsoft A skill that hands your agent a browser: open a page, click elements, grab a snapshot, and work with Playwright tests. CX Codex +1 195,700installs last30days mvanhorn Pulls posts and engagement on any topic from the last 30 days across Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub and the web. Useful when you want what people actually said, not what a blog summarized. CX Codex +1 53,000installs

From the same set804

The whole set →

optimize-memory-usage This command investigates leaks and high memory use, then guides profiling and tuning for frontend, backend, or database work. 476installs podcast-content-analyzer A Claude subagent that reads podcast transcripts, finds viral moments, builds chapter markers, pulls SEO keywords and scores clip potential. 474installs ci-pipeline Configures and diagnoses GitHub Actions workflows directly from chat. Useful when you need testing matrices, deployment stages, and automated security scans in a project. 470installs screenshot-business-analyzer Extracts domain concepts, business rules, and data entities from UI screenshots into structured JSON. 470installs project-health-check Runs git and dependency checks to build a markdown project health report with a 0 to 100 score. Useful before sprint planning or major releases. 466installs validate-branch-name A hook that inspects Bash commands before they run and blocks any branch name that falls outside Git Flow. 464installs communication-excellence-coach Reviews email drafts and adjusts message tone for different audiences. Prepares you for difficult workplace conversations using What-Why-How and SBI models. 464installs write-tests Creates unit, integration, end-to-end, and component tests with mocks. Use it when a file needs a test plan and framework-specific checks. 459installs