Playwright
"Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script."
$ npx claude-code-templates@latest --skill="development/playwright" --yesRequires Claude Code. The command adds this skill to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this skill
Component source
Playwright CLI Skill
Drive a real browser from the terminal using playwright-cli. Prefer the bundled wrapper script so the CLI works even when it is not globally installed.
Treat this skill as CLI-first automation. Do not pivot to @playwright/test unless the user explicitly asks for test files.
Prerequisite check (required)
Before proposing commands, check whether npx is available (the wrapper depends on it):
command -v npx >/dev/null 2>&1
If it is not available, pause and ask the user to install Node.js/npm (which provides npx). Provide these steps verbatim:
# Verify Node/npm are installed
node --version
npm --version
# If missing, install Node.js/npm, then:
npm install -g @playwright/cli@latest
playwright-cli --help
Once npx is present, proceed with the wrapper script. A global install of playwright-cli is optional.
Skill path (set once)
export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh"
User-scoped skills install under $CODEX_HOME/skills (default: ~/.codex/skills).
Quick start
Use the wrapper script:
"$PWCLI" open https://playwright.dev --headed
"$PWCLI" snapshot
"$PWCLI" click e15
"$PWCLI" type "Playwright"
"$PWCLI" press Enter
"$PWCLI" screenshot
If the user prefers a global install, this is also valid:
npm install -g @playwright/cli@latest
playwright-cli --help
Core workflow
- Open the page.
- Snapshot to get stable element refs.
- Interact using refs from the latest snapshot.
- Re-snapshot after navigation or significant DOM changes.
- Capture artifacts (screenshot, pdf, traces) when useful.
Minimal loop:
"$PWCLI" open https://example.com
"$PWCLI" snapshot
"$PWCLI" click e3
"$PWCLI" snapshot
When to snapshot again
Snapshot again after:
- navigation
- clicking elements that change the UI substantially
- opening/closing modals or menus
- tab switches
Refs can go stale. When a command fails due to a missing ref, snapshot again.
Recommended patterns
Form fill and submit
"$PWCLI" open https://example.com/form
"$PWCLI" snapshot
"$PWCLI" fill e1 "user@example.com"
"$PWCLI" fill e2 "password123"
"$PWCLI" click e3
"$PWCLI" snapshot
Debug a UI flow with traces
"$PWCLI" open https://example.com --headed
"$PWCLI" tracing-start
# ...interactions...
"$PWCLI" tracing-stop
Multi-tab work
"$PWCLI" tab-new https://example.com
"$PWCLI" tab-list
"$PWCLI" tab-select 0
"$PWCLI" snapshot
Wrapper script
The wrapper script uses npx --package @playwright/cli playwright-cli so the CLI can run without a global install:
"$PWCLI" --help
Prefer the wrapper unless the repository already standardizes on a global install.
References
Open only what you need:
- CLI command reference:
references/cli.md - Practical workflows and troubleshooting:
references/workflows.md
Guardrails
- Always snapshot before referencing element ids like
e12. - Re-snapshot when refs seem stale.
- Prefer explicit commands over
evalandrun-codeunless needed. - When you do not have a fresh snapshot, use placeholder refs like
eXand say why; do not bypass refs withrun-code. - Use
--headedwhen a visual check will help. - When capturing artifacts in this repo, use
output/playwright/and avoid introducing new top-level artifact folders. - Default to CLI commands and workflows, not Playwright test specs.
Related Claude Code Skills
Code Reviewer
Comprehensive code review skill for TypeScript, JavaScript, Python, Swift, Kotlin, Go. Includes automated code analysis, best practice checking, security scanning, and review checklist generation. Use when reviewing pull requests, providing code feedback, identifying issues, or ensuring code quality standards.
Senior Frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Senior Backend
Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API scaffolding, database optimization, security implementation, and performance tuning. Use when designing APIs, optimizing database queries, implementing business logic, handling authentication/authorization, or reviewing backend code.
Senior Architect
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
Skill Creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Senior Fullstack
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.