Playwright

About this prompt

Web automation and browser-based research using Playwright MCP via opencode subprocess. Use when the user asks to open a webpage, scrape content, fill out a form, take a screenshot, automate a browser task, or do web research that requires actually visiting a page. Triggers on phrases like "帮我打开", "去网上查", "scrape", "fill out", "web automation", "截图", "extract from page", "browse to".

Prompt body

# Playwright Skill

## Architecture

```
James → nanobot → exec(opencode -p "...") → Playwright MCP → Browser
```

nanobot acts as orchestrator only. All browser interaction is handled by opencode, which has Playwright MCP configured and available as tools (`browser_navigate`, `browser_snapshot`, `browser_click`, `browser_fill`, etc.).

**nanobot never touches MCP directly. Zero nanobot changes required.**

> ⚠️ **Command**: always use `opencode run "..."` — NOT `opencode -p "..."`

---

## Step 0 — Prerequisite Check (Always Do This First)

Before running any task, verify the Playwright MCP server is reachable:

```bash
lsof -i :18792 | grep LISTEN
```

**If output is empty** → server is NOT running. Tell James:

> "Playwright MCP server isn't running. Please start it first:
> ```
> npx @playwright/mcp --cdp-endpoint ws://127.0.0.1:18792/cdp
> ```
> Keep that terminal open, then let me know when it's ready."

Wait for James to confirm before proceeding.

**If output shows a process** → server is running, proceed to Step 1.

> **Note**: opencode has its own Playwright MCP configured in `~/.config/opencode/opencode.json` (Option A — self-managed, no external server needed). The CDP relay check above is only needed if James is using OpenClaw without opencode. If James is running opencode directly, skip Step 0.

---

## Step 1 — Classify the Task

Determine which scenario applies:

| Scenario | Description | Example |
|----------|-------------|---------|
| **research** | Visit pages, extract info, summarize | "查一下这个产品的定价" |
| **extraction** | Scrape structured data from a page | "把这个表格的数据提取出来" |
| **automation** | Fill forms, click buttons, submit | "帮我登录然后下载报告" |
| **screenshot** | Capture a page visually | "截图这个网页" |
| **multi-step** | Combination of the above | "登录 → 找到数据 → 截图 → 总结" |

---

## Step 2 — Translate to opencode Prompt

Convert James's natural language request into a clear, complete opencode prompt. Always include:

1. **Goal** — what to accomplish
2. **Tools to use** — explicitly mention Playwright MCP tools
3. **Steps** — ordered, specific
4. **Output format** — what to return (text summary, extracted data, file path, etc.)

### Prompt Templates

#### Research
```
Use Playwright MCP to research the following:

Goal: {James's request}

Steps:
1. Use browser_navigate to go to {URL or search engine}
2. Use browser_snapshot to read the page content
3. If needed, click links or search for more specific info using browser_click
4. Extract the key information relevant to the goal
5. Write a structured markdown summary to: ~/your-vault/Research/{YYYY-MM-DD}-{topic-slug}.md

Output format for the vault file:
# {Title}
*Research date: {YYYY-MM-DD} | Sources: {URLs}*

{structured content — headings, bullet lists, key findings}

## Sources
- [{URL title}]({URL})

## Tags
#research #{topic-tag}
```

#### Data Extraction
```
Use Playwright MCP to extract data from a webpage:

Goal: {James's request}
URL: {URL}

Steps:
1. Use browser_navigate to open the URL
2. Use browser_snapshot to capture the full page structure
3. Identify and extract {specific data: table / list / prices / etc.}
4. Format the extracted data as {markdown table / JSON / bullet list}
5. Return the formatted data

Output: {format}
```

#### Form Automation
```
Use Playwright MCP to automate a browser task:

Goal: {James's request}

Steps:
1. Use browser_navigate to go to {URL}
2. Use browser_snapshot to understand the page layout
3. Use browser_fill to fill in {field descriptions}
4. Use browser_click to submit / proceed
5. Use browser_snapshot to confirm the result
6. Report what happened and any confirmation messages

Important: If a CAPTCHA or login challenge appears, stop and report back — do not guess.
```

#### Screenshot
```
Use Playwright MCP to take a screenshot:

Goal: Capture {URL or page description}

Steps:
1. Use browser_navigate to go to {URL}
2. Wait for the page to fully load (use browser_snapshot to verify)
3. Use browser_take_screenshot to capture the page
4. Return the file path of the saved screenshot

Output: File path of the screenshot.
```

---

## Step 3 — Execute via opencode

Run opencode as a subprocess from the appropriate working directory:

```bash
cd {relevant project dir, or /tmp if no project context}
~/.opencode/bin/opencode run "{translated prompt}"
```

- Use `run` subcommand for non-interactive mode (NOT `-p`)
- Pass the full, complete prompt — opencode needs all context in one shot
- If the task involves a specific project, `cd` to that project first

---

## Step 4 — Handle Results

After opencode completes:

| Result type | Action |
|-------------|--------|
| Text summary / findings | Present directly to James |
| Extracted data | Show inline, offer to save to vault |
| Screenshot path | Show path, offer to send image |
| Error / CAPTCHA | Report clearly, ask James how to proceed |
| Partial result | Show what was found, explain what failed |

### Save to Vault (Research tasks)

For **research** type tasks, always instruct opencode to write results directly to the vault — do NOT write to `/tmp` or workspace.

- **Path**: `~/your-vault/Research/YYYY-MM-DD-{topic-slug}.md`
- **Naming**: lowercase, hyphen-separated, descriptive slug (e.g. `2026-02-26-web-for-agents.md`)
- **Format**:
```markdown
# {Title}
*Research date: {YYYY-MM-DD} | Sources: {URLs}*

{structured content — headings, bullet lists, key findings}

## Sources
- [{URL title}]({URL})

## Tags
#research #{topic-tag}
```

Include the output path explicitly in the opencode prompt, e.g.:
> "Write the final summary to `~/your-vault/Research/2026-02-26-web-for-agents.md`"

This ensures:
- QMD auto-indexes it for semantic search
- Obsidian node graph can link it to related notes
- Consistent with product-research skill output location
- No `/tmp` permission issues

---

## Common Playwright MCP Tools Reference

(For writing accurate opencode prompts)

| Tool | Purpose |
|------|---------|
| `browser_navigate` | Go to a URL |
| `browser_snapshot` | Read current page structure (accessibility tree) |
| `browser_click` | Click an element |
| `browser_fill` | Type into an input field |
| `browser_select_option` | Choose from a dropdown |
| `browser_take_screenshot` | Capture screenshot |
| `browser_scroll` | Scroll the page |
| `browser_wait` | Wait for a condition |
| `browser_go_back` | Navigate back |
| `browser_tab_new` | Open a new tab |

---

## Constraints & Safety Rules

- **Never store passwords** — if a task requires login credentials, ask James to provide them at runtime only
- **Stop on CAPTCHA** — report back, don't attempt to bypass
- **No destructive actions** — don't submit forms that can't be undone without confirming with James first
- **Respect robots.txt intent** — don't scrape sites that explicitly prohibit it
- **One task at a time** — don't chain multiple unconfirmed automation steps silently

Variables

Best for

• •First-use as-is; the defaults work.
• •Fork if your audience or voice is significantly different from the author's.
• •Chain into a workflow when one prompt isn't enough — multi-step flows are the usual next move.