🧪
AutomationTypeScript

Playwright Debug

by voicetreelab

Playwright Debug is an Automation skill for Claude Code, published by voicetreelab in voicetree.

916 stars56 forkson voicetreelab/voicetreeAdded 2026/08/22Repository updated 2026/06/07
View source on GitHubDownload repo ZIP
agentsclaude-codecodex
Install in seconds
Install Playwright Debug
Copy Playwright Debug into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/voicetreelab/voicetree/tree/main/.claude/skills/playwright-debug ~/.claude/skills/playwright-debug

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/voicetreelab/voicetree.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
.claude/skills/playwright-debug/SKILL.md in voicetreelab/voicetree
Installs to
~/.claude/skills/playwright-debug
Collection
One of 2 skills cataloged from this repository
Category
Automation — 1523 skills

What Playwright Debug does

Playwright Debug connects Playwright MCP to a running VoiceTree Electron app for live inspection and automation. Use it to inspect UI state, take screenshots, and test elements without reloading the app.

Playwright Debug is cataloged under Automation on DirSkills. Playwright Debug comes from a repository tagged agents, claude-code and codex.

Documentation

README

Playwright MCP Live Debugging

Connect to a running VoiceTree Electron app for live debugging via browser automation.

Quick Start (3 steps)

1. Start Electron in debug mode

cd webapp && npm run electron:debug

This starts Electron with CDP enabled on port 9222 and automatically calls prettySetupAppForElectronDebugging() once the renderer is ready — loading the example_small project and spawning 3 debug terminals.

Run with a bash timeout (e.g. 30s) since this is a long-running dev server.

2. Verify CDP is ready

curl -s http://localhost:9222/json/version

Should return JSON with "Browser": "Chrome/...".

3. Go straight to inspecting — do NOT navigate

This is the opening of the README. Read the full README on GitHub.

Commands Playwright Debug provides

Slash commands named in this skill’s SKILL.md, listed in the order they first appear.

  • /json

Frequently asked about Playwright Debug

  • What else does voicetreelab publish alongside Playwright Debug?

    Playwright Debug is one of 2 skills that DirSkills catalogs from voicetreelab/voicetree, the repository it ships in. Its siblings there include Playwright Debug. Each one is a separate skill with its own page in this directory, installs the same way Playwright Debug does, and is maintained by voicetreelab in that same repository. The rest of the collection is listed on the voicetreelab/voicetree page.

  • How does Playwright Debug compare to other Automation skills?

    Playwright Debug ranks #915 by stars among the 1523 Automation skills in this catalog. The most-starred ones next to it are Autonomous Loops, Autonomous Agent Harness and Automation Audit Ops. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Playwright Debug against them. Open each page to compare what they document and how they install.

More from voicetreelab/voicetree

Playwright Debug is one of 2 skills cataloged on DirSkills from voicetreelab/voicetree.

See all 2 skills →
🧪
1w ago

Playwright Debug

Playwright Debug helps inspect and troubleshoot browser automation runs. Use it when Playwright tests or scripted browser flows need debugging or step-by-step diagnosis.
Quality
91656

More Automation skills

Playwright Debug is one of 1523 Automation skills cataloged on DirSkills, ranked #915 by stars among them.

Browse all Automation skills →
🔁
3w ago

Autonomous Loops

Autonomous Loops provides patterns and reference implementations for running Claude Code in autonomous loops, from simple sequential pipelines to RFC-driven multi-agent DAG systems. Retained for compatibility; use continuous-agent-loop for new guidance.
Automation
239.8K36.4K
🤖
3w ago

Autonomous Agent Harness

Autonomous Agent Harness turns Claude Code into a self-directing agent system with persistent memory, scheduled tasks, computer use, and task queuing. Use it when continuous autonomous operation, scheduled tasks, or self-directing agent loops are needed.
Automation
239.8K36.4K
🔍
3w ago

Automation Audit Ops

Automation Audit Ops audits live automations, jobs, hooks, and connectors to identify what is working, broken, redundant, or missing before any fixes are made.
Automation
239.8K36.4K