playwright-mcp

Name: playwright-mcp
Author: Hainrixz

210stars100forks

How to install playwright-mcp?

hainrixz/editor-pro-max/playwright-mcp

$npx -y skills add Hainrixz/editor-pro-max --skill playwright-mcp

Installs into the current project.

Summary

Live browser interaction via Playwright MCP — navigate pages, click buttons, fill forms, take screenshots.

Files · 1

View on GitHub

SKILL.md

1	# Playwright MCP Browser Automation
2
3	You are an expert at using the Playwright MCP server for live browser interaction. This skill teaches you to navigate pages, inspect elements, fill forms, and debug web UIs through direct browser control.
4
5	## Critical: These Are Direct Tool Calls
6
7	MCP tools are direct tool calls — exactly like `Read`, `Grep`, or `Bash`. They are NOT CLI commands.
8
9	CORRECT — call the tool directly:
10	```
11	Tool: mcp__playwright__browser_navigate
12	Parameters: { "url": "http://localhost:3010" }
13	```
14
15	WRONG — do NOT shell out:
16	```
17	Bash: claude mcp call playwright browser_navigate ... # This does not work
18	```
19
20	All Playwright MCP tools use the `mcp__playwright__` prefix.
21
22	## Critical: Always Snapshot Before Interacting
23
24	`browser_snapshot` returns an accessibility tree with `ref` values for every interactive element. You must snapshot before clicking, typing, or hovering — the `ref` values are required for all interaction tools.
25
26	## Critical: Output Size Awareness
27
28	\| Tool \| Output Size \| Notes \|
29	\|------\|------------\|-------\|
30	\| `browser_snapshot` \| Medium-Large \| Full accessibility tree — scales with page complexity \|
31	\| `browser_take_screenshot` \| Large \| Base64 image — use sparingly \|
32	\| `browser_console_messages` \| Variable \| Can be very large on noisy apps \|
33	\| `browser_network_requests` \| Variable \| Can be very large on API-heavy pages \|
34	\| `browser_navigate` \| Small \| Returns page title only \|
35	\| `browser_click` \| Small \| Returns snapshot after click \|
36	\| `browser_type` \| Small \| Returns snapshot after typing \|
37
38	Prefer `browser_snapshot` over `browser_take_screenshot` for understanding page structure. Screenshots are for visual verification only.
39
40	## Workflow 1: Navigate & Inspect
41
42	Trigger: User says "open this page", "what's on the page?", "inspect the UI", "check the layout"
43
44	### Steps
45
46	1. Navigate to the page:
47	```
48	browser_navigate({ url: "http://localhost:3010/home/team-slug/settings" })
49	```
50
51	2. Get page structure (always do this before interacting):
52	```
53	browser_snapshot → accessibility tree with ref values for all elements
54	```
55
56	3. Analyze the snapshot: Identify interactive elements (buttons, links, inputs) by their `ref` values. Report page structure to user.
57
58	### Decision: Snapshot vs Screenshot
59
60	\| Need \| Use \|
61	\|------\|-----\|
62	\| Understand page structure, find elements \| `browser_snapshot` (structured, has `ref` values) \|
63	\| Visual appearance, layout bugs, CSS issues \| `browser_take_screenshot` (visual image) \|
64	\| Both structure and appearance \| Snapshot first, then screenshot if visual check needed \|
65
66	## Workflow 2: Form Interaction
67
68	Trigger: User says "fill out the form", "submit the login", "type in the field", "select an option"
69
70	### Steps
71
72	1. Snapshot to find form fields:
73	```
74	browser_snapshot → identify input refs and their labels
75	```
76
77	2. Fill fields (choose based on complexity):
78	- Single field: `browser_type({ ref: "input-ref", text: "value" })`
79	- Multiple fields: `browser_fill_form({ fields: [{ ref: "ref1", value: "val1" }, { ref: "ref2", value: "val2" }] })`
80	- Dropdown: `browser_select_option({ ref: "select-ref", values: ["option-value"] })`
81
82	3. Submit the form:
83	```
84	browser_click({ ref: "submit-button-ref" })
85	```
86
87	4. Verify result:
88	```
89	browser_snapshot → check for success message, error states, or navigation
90	```
91
92	### Key Patterns
93
94	- `browser_fill_form` is faster than multiple `browser_type` calls for multi-field forms
95	- Use `browser_press_key({ key: "Enter" })` as alternative to clicking submit
96	- After submission, wait if needed: `browser_wait_for({ text: "Success" })` then snapshot
97
98	## Workflow 3: Debug Investigation
99
100	Trigger: User says "debug the page", "check for errors", "what API calls are happening?", "why isn't it working?"
101
102	### Steps
103
104	1. Navigate to the problematic page:
105	```
106	browser_navigate({ url: "..." })
107	```
108
109	2. Run these in parallel (they are independent):
110	```
111	browser_console_messages → JavaScript errors, warnings, logs
112	browser_network_requests → API calls, failed requests, status codes
113	```
114
115	3. Snapshot the page:
116	```
117	browser_snapshot → current UI state, error messages, loading states
118	```
119
120	4. Investigate further:
121	```
122	browser_evaluate({ expression: "document.querySelectorAll('.error').length" }) → run custom JS
123	```
124
125	## Workflow 4: Multi-Step Navigation
126
127	Trigger: User says "go through the flow", "test the signup process", "walk through the wizard"
128
129	### Steps
130
131	1. Navigate to starting page:
132	```
133	browser_navigate({ url: "..." })
134	```
135
136	2. For each step:
137	```
138	browser_snapshot → find the next action
139	browser_click({ ref: "..." }) or browser_type({ ref: "...", text: "..." })
140	browser_wai

People who liked this also viewed

6 picks

Type

ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026292k642
imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026165k66k
hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026145k37k
media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026144k37k
general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026124k37k
product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026121k37k

playwright-mcp

210stars100forks

View on GitHub

How to install playwright-mcp?

hainrixz/editor-pro-max/playwright-mcp

$npx -y skills add Hainrixz/editor-pro-max --skill playwright-mcp

Installs into the current project.

Summary

Live browser interaction via Playwright MCP — navigate pages, click buttons, fill forms, take screenshots.

Files · 1

View on GitHub

SKILL.md

1	# Playwright MCP Browser Automation
2
3	You are an expert at using the Playwright MCP server for live browser interaction. This skill teaches you to navigate pages, inspect elements, fill forms, and debug web UIs through direct browser control.
4
5	## Critical: These Are Direct Tool Calls
6
7	MCP tools are direct tool calls — exactly like `Read`, `Grep`, or `Bash`. They are NOT CLI commands.
8
9	CORRECT — call the tool directly:
10	```
11	Tool: mcp__playwright__browser_navigate
12	Parameters: { "url": "http://localhost:3010" }
13	```
14
15	WRONG — do NOT shell out:
16	```
17	Bash: claude mcp call playwright browser_navigate ... # This does not work
18	```
19
20	All Playwright MCP tools use the `mcp__playwright__` prefix.
21
22	## Critical: Always Snapshot Before Interacting
23
24	`browser_snapshot` returns an accessibility tree with `ref` values for every interactive element. You must snapshot before clicking, typing, or hovering — the `ref` values are required for all interaction tools.
25
26	## Critical: Output Size Awareness
27
28	\| Tool \| Output Size \| Notes \|
29	\|------\|------------\|-------\|
30	\| `browser_snapshot` \| Medium-Large \| Full accessibility tree — scales with page complexity \|
31	\| `browser_take_screenshot` \| Large \| Base64 image — use sparingly \|
32	\| `browser_console_messages` \| Variable \| Can be very large on noisy apps \|
33	\| `browser_network_requests` \| Variable \| Can be very large on API-heavy pages \|
34	\| `browser_navigate` \| Small \| Returns page title only \|
35	\| `browser_click` \| Small \| Returns snapshot after click \|
36	\| `browser_type` \| Small \| Returns snapshot after typing \|
37
38	Prefer `browser_snapshot` over `browser_take_screenshot` for understanding page structure. Screenshots are for visual verification only.
39
40	## Workflow 1: Navigate & Inspect
41
42	Trigger: User says "open this page", "what's on the page?", "inspect the UI", "check the layout"
43
44	### Steps
45
46	1. Navigate to the page:
47	```
48	browser_navigate({ url: "http://localhost:3010/home/team-slug/settings" })
49	```
50
51	2. Get page structure (always do this before interacting):
52	```
53	browser_snapshot → accessibility tree with ref values for all elements
54	```
55
56	3. Analyze the snapshot: Identify interactive elements (buttons, links, inputs) by their `ref` values. Report page structure to user.
57
58	### Decision: Snapshot vs Screenshot
59
60	\| Need \| Use \|
61	\|------\|-----\|
62	\| Understand page structure, find elements \| `browser_snapshot` (structured, has `ref` values) \|
63	\| Visual appearance, layout bugs, CSS issues \| `browser_take_screenshot` (visual image) \|
64	\| Both structure and appearance \| Snapshot first, then screenshot if visual check needed \|
65
66	## Workflow 2: Form Interaction
67
68	Trigger: User says "fill out the form", "submit the login", "type in the field", "select an option"
69
70	### Steps
71
72	1. Snapshot to find form fields:
73	```
74	browser_snapshot → identify input refs and their labels
75	```
76
77	2. Fill fields (choose based on complexity):
78	- Single field: `browser_type({ ref: "input-ref", text: "value" })`
79	- Multiple fields: `browser_fill_form({ fields: [{ ref: "ref1", value: "val1" }, { ref: "ref2", value: "val2" }] })`
80	- Dropdown: `browser_select_option({ ref: "select-ref", values: ["option-value"] })`
81
82	3. Submit the form:
83	```
84	browser_click({ ref: "submit-button-ref" })
85	```
86
87	4. Verify result:
88	```
89	browser_snapshot → check for success message, error states, or navigation
90	```
91
92	### Key Patterns
93
94	- `browser_fill_form` is faster than multiple `browser_type` calls for multi-field forms
95	- Use `browser_press_key({ key: "Enter" })` as alternative to clicking submit
96	- After submission, wait if needed: `browser_wait_for({ text: "Success" })` then snapshot
97
98	## Workflow 3: Debug Investigation
99
100	Trigger: User says "debug the page", "check for errors", "what API calls are happening?", "why isn't it working?"
101
102	### Steps
103
104	1. Navigate to the problematic page:
105	```
106	browser_navigate({ url: "..." })
107	```
108
109	2. Run these in parallel (they are independent):
110	```
111	browser_console_messages → JavaScript errors, warnings, logs
112	browser_network_requests → API calls, failed requests, status codes
113	```
114
115	3. Snapshot the page:
116	```
117	browser_snapshot → current UI state, error messages, loading states
118	```
119
120	4. Investigate further:
121	```
122	browser_evaluate({ expression: "document.querySelectorAll('.error').length" }) → run custom JS
123	```
124
125	## Workflow 4: Multi-Step Navigation
126
127	Trigger: User says "go through the flow", "test the signup process", "walk through the wizard"
128
129	### Steps
130
131	1. Navigate to starting page:
132	```
133	browser_navigate({ url: "..." })
134	```
135
136	2. For each step:
137	```
138	browser_snapshot → find the next action
139	browser_click({ ref: "..." }) or browser_type({ ref: "...", text: "..." })
140	browser_wai

People who liked this also viewed

6 picks

Type