saffron-healthsaffron-health/opencode-gui/.agents/skills/playwright/SKILL.md

playwright

Skill59 starsChanged 9 months agoMITView on GitHub

Browser automation CLI using Playwright. Use when automating browser workflows, filling forms, clicking elements, scraping pages, or debugging web issues.

We split this skill into the rules it gives an agent

4 rules. 0 are common, 0 are distinctive, and 4 are very specific to this project.

0
Common
Most of the 78 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
4
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Use the playwright-cli.ts script bundled with this skill to automate web interactions and debug browser issues.
line 9
Very specific:
Run it with: tsx .agents/skills/playwright/cli.ts
line 11
Very specific:
Use --session <name> to run multiple isolated browser instances simultaneously.
line 43
Very specific:
Use save <domain> after logging in to persist cookies/localStorage for automatic reuse:
line 45

“Common” is measured: kept by at least 6 in 10 of the 78 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Browser Automation with Playwright

Use the playwright-cli.ts script bundled with this skill to automate web interactions and debug browser issues.

Run it with: tsx .agents/skills/playwright/cli.ts

When to Use

Pages require interaction, authentication, or dynamic content loading (instead of read_web_page)
Debugging browser automation errors (clicks not working, selectors failing, elements not found)
Testing interactions before codifying them in source files

Commands

tsx .agents/skills/playwright/cli.ts open <url>          # Launch browser and navigate to URL
tsx .agents/skills/playwright/cli.ts exec <code>         # Execute Playwright TypeScript code
tsx .agents/skills/playwright/cli.ts snapshot            # Save full-page PNG + HTML to tmp/playwright-screenshots/
tsx .agents/skills/playwright/cli.ts list                # List open tabs
tsx .agents/skills/playwright/cli.ts close               # Close the browser

The exec command provides access to: page, context, state, browser, snapshot

Example

tsx .agents/skills/playwright/cli.ts open https://example.com
tsx .agents/skills/playwright/cli.ts exec "await page.locator('button:has-text(\"Sign in\")').click()"
tsx .agents/skills/playwright/cli.ts exec "await page.fill('input[name=\"email\"]', 'user@example.com')"
tsx .agents/skills/playwright/cli.ts snapshot
tsx .agents/skills/playwright/cli.ts close

Sessions & Profiles

Use --session <name> to run multiple isolated browser instances simultaneously.

Use save <domain> after logging in to persist cookies/localStorage for automatic reuse:

tsx .agents/skills/playwright/cli.ts open https://linkedin.com
# ... manually log in ...
tsx .agents/skills/playwright/cli.ts save linkedin.com
# Next time, profile is loaded automatically

Connecting to the Extension Debug Session

Launch the extension in a background tmux session with CDP enabled:

pnpm debug:extension              # starts in tmux "opencode-debug", CDP on :9222
pnpm debug:extension --stop       # stops the session

Then connect Playwright to it:

tsx .agents/skills/playwright/cli.ts connect http://127.0.0.1:9222 --session extension
tsx .agents/skills/playwright/cli.ts exec "return await page.title()" --session extension

Connecting to Other Browsers

Connect to any browser exposing a CDP endpoint:

tsx .agents/skills/playwright/cli.ts connect http://127.0.0.1:9222 --session my-session
tsx .agents/skills/playwright/cli.ts exec "return await page.title()" --session my-session

Download now (ZIP)

Other versions90 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 90
openai/openai-agents-python★ 30ksame name
openai/skills★ 27ksame name
prowler-cloud/prowler★ 15ksame name
hyperdxio/hyperdx★ 9.9ksame name
bluesky-social/atproto★ 9.7ksame name
netease-youdao/LobsterAI★ 6.1ksame name
Kiln-AI/Kiln★ 5.2ksame name
freestylefly/wesight★ 941same name
Gram-ax/gramax★ 609same name
JetBrains/skills★ 386same name
80 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use develop-web-game, web-perf and 10 more.
Other files people use alongside this one.
- hebertzhuSkill
  develop-web-game
  Use when building or iterating on a web game and you need a tight implement-test-observe loop; prefer the bundled Playwright client, inspect screenshots and text state, and validate every meaningful change before moving on.
  Also in 4 projects that use this
- OpenAISkill
  web-perf
  Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.
  Also in 5 projects that use this
- JetBrainsSkill
  doc
  Use when the task involves reading, creating, or editing `.docx` documents, especially when formatting or layout fidelity matters; prefer `python-docx` plus the bundled `scripts/render_docx.py` for visual checks.
  Also in 4 projects that use this
- CloudflareSkill
  cloudflare-one
  Design, configure, troubleshoot, or review Cloudflare One Zero Trust and SASE deployments. Use cloudflare-one-migrations for migration planning from other vendors.
  Also in 3 projects that use this
- hajekimSkill
  mcp-setup
  This skill should be used when the user wants to "Model Context Protocol", "MCP server", "MCP client", "standardized tool integration", "JSON-RPC agent tools", "LLM tool protocol", "connect agents to external tools", "MCP primitives", "FastMCP", "ADK MCPToolset", "plug-and-play agent tools", "MCP integration", "tool server for agents", "MCP tools", "agent plugin system", "MCP setup", "model context protocol integration", or build agents that use the standardized MCP protocol for tool and resource integration. Also responds to Korean: "모델 컨텍스트 프로토콜", "MCP 서버", "MCP 클라이언트", "표준화된 도구 통합", "플러그 앤 플레이 에이전트 도구", "ADK MCP 툴셋", "MCP 구성", "MCP 설정", "MCP 써보고 싶어", "MCP 툴 연결", "MCP 서버 만들어줘", "도구 표준화해줘", "플러그인 에이전트". Also responds to Japanese: "モデルコンテキストプロトコル", "MCPサーバー", "MCPクライアント", "標準化ツール統合", "MCPの設定", "MCPを使いたい", "MCP構成", "エージェントのプラグインシステム", "ツールサーバー", "MCPツール連携" Also responds to Chinese: "模型上下文协议", "MCP服务器", "MCP客户端", "标准化工具集成", "MCP配置", "想用MCP", "MCP构建", "智能体插件系统", "工具服务器", "MCP工具集成".. Apply this skill to design or implement the Model Context Protocol (MCP) agentic design pattern.
  Also in 3 projects that use this
- CloudflareSkill
  turnstile-spin
  Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.
  Also in 3 projects that use this
In this repository15 other files it gives its agents.
- AGENTS.mdAGENTS.md
- address-reviewSkill
- commitSkill
- dev-commandSkill
- generate-specSkill
- get-pr-reviewsSkill
- implement-specSkill
- promptingSkill
- push-everythingSkill
- pushSkill
- reviewSkill
- spec-reviewSkill
- summarizeSkill
- technical-writingSkill
- update-docsSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free

4 rules. 0 are common, 0 are distinctive, and 4 are very specific to this project.

Browser Automation with Playwright

When to Use

Commands

Example

Sessions & Profiles

Connecting to the Extension Debug Session

Connecting to Other Browsers

Word for word · 0

Edited · 0

Wrote their own version · 90

develop-web-game

web-perf

doc

cloudflare-one

mcp-setup

turnstile-spin

Does it work?

Your trail

Now do this for your own.