install-playwright-mcp
Install Playwright MCP server for browser automation in Claude Code
Best use case
install-playwright-mcp is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Install Playwright MCP server for browser automation in Claude Code
Teams using install-playwright-mcp should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/install-playwright-mcp/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How install-playwright-mcp Compares
| Feature / Agent | install-playwright-mcp | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Install Playwright MCP server for browser automation in Claude Code
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Install Playwright MCP Server Install the Playwright MCP server to enable browser automation capabilities. ## What This Does The Playwright MCP server provides: - **Browser automation** - Navigate, click, fill forms, take screenshots - **Accessibility snapshots** - LLM-friendly structured data, no vision models needed - **Fast and lightweight** - Uses Playwright's accessibility tree ## Installation Command Run this command to install: ```bash claude mcp add playwright -- npx @playwright/mcp@latest ``` ## Scope Options - `--scope local` (default): Available only in current project - `--scope project`: Shared with team via `.mcp.json` - `--scope user`: Available across all your projects ```bash # Install for user (all projects) claude mcp add playwright --scope user -- npx @playwright/mcp@latest # Install for project (team shared) claude mcp add playwright --scope project -- npx @playwright/mcp@latest ``` ## Headless Mode For headless operation (no visible browser): ```bash claude mcp add playwright -- npx @playwright/mcp@latest --headless ``` ## Common Configurations ### With specific browser ```bash claude mcp add playwright -- npx @playwright/mcp@latest --browser firefox ``` ### With custom viewport ```bash claude mcp add playwright -- npx @playwright/mcp@latest --viewport-size 1920x1080 ``` ### With isolated sessions (no persistence) ```bash claude mcp add playwright -- npx @playwright/mcp@latest --isolated ``` ## Verify Installation After installation: 1. Restart Claude Code 2. Run `/mcp` to see the playwright server 3. Test with: "Navigate to google.com and take a snapshot" ## Available Tools After Installation - `browser_navigate` - Go to URL - `browser_click` - Click elements - `browser_type` - Type text - `browser_snapshot` - Get page accessibility tree - `browser_take_screenshot` - Capture screenshot - `browser_fill_form` - Fill multiple form fields - And many more... ## Execution Instructions When the user runs this command: 1. **Determine scope** from arguments or ask: - Default to `local` if not specified 2. **Run installation**: ```bash claude mcp add playwright [--scope <scope>] -- npx @playwright/mcp@latest [options] ``` 3. **Verify success** by checking output 4. **Inform user** to restart Claude Code to use the new MCP server
Related Skills
install-lsp
Install and configure LSP (Language Server Protocol) for Claude Code to enable go-to-definition, find-references, and real-time diagnostics
zod
Zod schema validation patterns and type inference. Auto-loads when validating schemas, parsing data, validating forms, checking types at runtime, or using z.object/z.string/z.infer in TypeScript.
typescript-import-style
Merge-friendly import formatting (one-per-line, alphabetical). Auto-loads when writing TypeScript/JavaScript imports to minimize merge conflicts in parallel development. Enforces consistent grouping and sorting.
setup-mcp-auth
Configure authentication for an existing FastMCP server
fastmcp
FastMCP TypeScript framework patterns for MCP servers. Auto-loads when building MCP servers, creating tools/resources/prompts, implementing authentication, configuring transports, or working with FastMCP in TypeScript.
add-mcp-tool
Add a new tool to an existing FastMCP server with guided configuration
add-mcp-resource
Add a new resource or resource template to an existing FastMCP server
plan-with-team
Validate plan file ownership
privacy-compliance
GDPR, CCPA, and privacy compliance guidance for data protection. Use when handling personal data, implementing consent management, or ensuring regulatory compliance across jurisdictions.
oauth
OAuth 2.0 and OpenID Connect implementation patterns. Use when implementing authentication, authorization flows, or integrating with OAuth providers like Google, GitHub, or custom identity providers.
mcp-security
Use when securing MCP servers, preventing prompt injection, implementing authorization, validating user input, or building secure multi-agent pipelines. Provides 5-layer defense architecture patterns.
rag-cag-security
Security patterns for RAG and CAG systems with multi-tenant isolation. Use when building retrieval-augmented or cache-augmented generation systems that require tenant isolation, access control, and secure data handling.