New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Playground Website Debugging

by WordPress in WordPress/wordpress-playground

Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP.

GPL-2.0Auto-check passedDevelopment

Install Playground Website Debugging

skills CLI
$ npx skills add WordPress/wordpress-playground --skill playground-website-debugging -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install WordPress/wordpress-playground playground-website-debugging --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/WordPress/wordpress-playground.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/playground-website-debugging .claude/skills/playground-website-debugging && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
playground-website-debugging
GitHub stars
2k
Token cost
~1.9k tokens
SKILL.md length
426 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
GPL-2.0

At a glance

Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP.

  • Works in 5 steps: Start the Dev Server → Navigate and Inspect → Navigate Within WordPress → …
  • Investigating UI bugs
  • SKILL.md covers Quick Start, Architecture: The Iframe…, PHP-WASM Request Pipeline and Dev Server Details, plus 1 more section
  • Calls npm, nvm and nx

What it does

Playground Website Debugging is an agent skill from WordPress/wordpress-playground. Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP. Use when investigating UI bugs, testing website features, checking for JavaScript errors, debugging hanging requests, or verifying WordPress behavior in the browser-based Playground.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Debugging and Browser testing. It works with WordPress, Playwright, Model Context Protocol and JavaScript. The repository describes itself as: Run WordPress in the browser via WebAssembly PHP. The licence is GPL-2.0.

When your agent uses it

  • Investigating UI bugs
  • Testing website features
  • Checking for JavaScript errors
  • Debugging hanging requests

Example prompts

  • “/playground-website-debugging”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Start the Dev Server
  2. Navigate and Inspect
  3. Navigate Within WordPress
  4. Debug Common Scenarios
  5. Stop the Server

What it can do on your machine

Read from SKILL.md and the folder at commit 4d39322. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • nvm
    • nx
    • php

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Playground Website Debugging loads about 1.9k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 426 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from WordPress/wordpress-playground at commit 4d39322, republished under its GPL-2.0 licence (© WordPress). 426 words, ~1,938 tokens.

Download SKILL.mdSave it as .claude/skills/playground-website-debugging/SKILL.md (or your agent's skills folder).
name
playground-website-debugging
description
Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP. Use when investigating UI bugs, testing website features, checking for JavaScript errors, debugging hanging requests, or verifying WordPress behavior in the browser-based Playground.

Playground Dev Server Debugging with Playwright MCP

Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP.

Requires: Node.js, Playwright MCP server

Quick Start

bash
# Ensure the correct Node.js version is active as per .nvmrc
nvm use

# Kill any leftover dev server from a previous run
lsof -ti:5400 -ti:5263 -ti:6400 | xargs kill 2>/dev/null; sleep 1

# Start dev server in background
npm run dev > /tmp/playground-dev.log 2>&1 &

# Wait for server to respond (up to ~120s for first build)
until curl -s -o /dev/null http://127.0.0.1:5400/website-server/ 2>/dev/null; do
  sleep 2
done
echo "Ready!"

Then use Playwright MCP to interact:

browser_navigate → http://127.0.0.1:5400/website-server/
browser_snapshot → inspect the page structure
browser_take_screenshot → visual state

Architecture: The Iframe Boundary

The Playground website has a three-layer structure that's critical to understand:

┌───────────────────────────────────────────────────┐
│ Parent page (Playground chrome / React app)       │
│ ┌───────────────────────────────────────────────┐ │
│ │ URL bar │ Save │ Settings │ Site Mgr          │ │
│ ├───────────────────────────────────────────────┤ │
│ │                                               │ │
│ │  <iframe class="playground-viewport">         │ │
│ │    Loads remote.html                          │ │
│ │    (Service Worker, Web Worker, PHP runtime)  │ │
│ │   ┌─────────────────────────────────────────┐ │ │
│ │   │  <iframe id="wp">                       │ │ │
│ │   │    WordPress runs here                  │ │ │
│ │   │    (wp-admin, front-end, editor, etc.)  │ │ │
│ │   └─────────────────────────────────────────┘ │ │
│ │                                               │ │
│ └───────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────┘

Parent page contains: URL bar, Save button, Saved Playgrounds, Site Manager, Settings gear.

Outer iframe (playground-viewport) loads remote.html, which registers the Service Worker, spawns a Web Worker for the PHP runtime, and exposes the Playground API via Comlink.

Inner iframe (#wp, nested inside the outer iframe) contains the actual WordPress site — dashboard, posts, pages, plugins, themes, block editor, front-end.

Playwright's browser_snapshot traverses both iframes automatically, so you'll see all three layers in one snapshot. When clicking elements inside WordPress, Playwright handles the iframe targeting.

Important: WordPress admin CSS positions sidebar submenu items off-screen (e.g. top: -12387px) until their parent menu is hovered. These elements appear in browser_snapshot but browser_click will fail with "element is outside of the viewport." Two workarounds:

  1. Hover parent first (preferred — mimics real user behavior):
js
async (page) => {
	const frame = page.frameLocator('iframe').first().frameLocator('iframe').first();
	await frame.locator('#menu-tools').hover();
	await frame.locator('a[href="site-health.php"]').click();
};
  1. JS click (bypasses Playwright's visibility checks):
js
async (page) => {
	const frame = page.frameLocator('iframe').first().frameLocator('iframe').first();
	await frame.locator('a[href="site-health.php"]').evaluate((el) => el.click());
};

PHP-WASM Request Pipeline

Understanding how HTTP requests flow through Playground is critical for debugging performance and hanging issues:

Browser request (navigation, AJAX, etc.)
    ↓
Service Worker intercepts fetch event
    ↓
broadcastMessageExpectReply() → broadcasts to all window clients
    ↓
remote.html window receives message (filtered by scope) → proxies to Web Worker
    ↓
PHPProcessManager.acquirePHPInstance() → Semaphore (max 2 instances, 30s timeout)
    ↓
PHP-WASM executes the PHP script
    ↓
If PHP calls wp_remote_get(): Wp_Http_Fetch → post_message_to_js() → JS fetch()
    ↓
fetch() for loopback URLs → goes BACK through Service Worker → needs another PHP instance!

Timeout mismatch: The Service Worker times out waiting for a response after 25s (DEFAULT_RESPONSE_TIMEOUT), but the PHP semaphore waits up to 30s. If PHP is stuck, the Service Worker returns ERR_FAILED while the process manager is still waiting — useful to know when diagnosing hanging requests.

Show full SKILL.md (173 more words)Show less

Dev Server Details

SettingValue
Commandnpm run dev (runs nx dev playground-website)
Main URLhttp://127.0.0.1:5400/website-server/
Ready signalHTTP 200 from http://127.0.0.1:5400/website-server/
Auto-loginYes (logged in as admin by default)
HMREnabled — code changes hot-reload

Note: npm run dev also starts a PHP CORS proxy (php -S 127.0.0.1:5263). If system PHP isn't installed, that subprocess fails — the website still loads but features relying on the CORS proxy (e.g., fetching external resources) won't work.

Workflow

1. Start the Dev Server
bash
npm run dev
# Wait for "Local:   http://127.0.0.1:5400/website-server/" in output
2. Navigate and Inspect
browser_navigate → http://127.0.0.1:5400/website-server/
browser_snapshot → see full page tree including iframe content
browser_take_screenshot → capture visual state
3. Navigate Within WordPress

To visit WordPress pages (e.g., wp-admin), use the Playground URL bar:

browser_click → click the URL bar textbox (labeled "URL to visit in the WordPress site")
browser_type → type "/wp-admin/"
browser_press_key → press "Enter"
browser_snapshot → verify the page loaded
4. Debug Common Scenarios

Check for JavaScript errors:

browser_console_messages (level: "error") → see JS errors and warnings

Check for stuck/failed network requests:

browser_network_requests (includeStatic: false) → see all XHR/fetch requests and their status

Requests showing no status code are still pending. Requests with [FAILED] net::ERR_FAILED typically indicate a service worker timeout (25s) — a sign of PHP-WASM deadlock (see "PHP-WASM Request Pipeline" above).

Time a navigation:

js
// Use browser_run_code to measure how long a navigation takes
async (page) => {
	const frame = page.frameLocator('iframe').first().frameLocator('iframe').first();
	const start = Date.now();
	await frame.locator('a[href="site-health.php"]').evaluate((el) => el.click());
	await frame.getByRole('heading', { name: 'Site Health', level: 1 }).waitFor({ timeout: 60000 });
	return `Navigation took ${Date.now() - start}ms`;
};

Inspect the block editor:

browser_click → URL bar
browser_type → /wp-admin/post-new.php
browser_press_key → Enter
browser_snapshot → see block editor structure inside iframe

Test plugin/theme UI:

browser_click → URL bar
browser_type → /wp-admin/plugins.php
browser_press_key → Enter
browser_snapshot → verify plugin list

Screenshot a specific state:

browser_take_screenshot → capture current visual state for comparison
5. Stop the Server

Kill the npm run dev process (Ctrl+C in the terminal, or lsof -ti:5400 | xargs kill).

© WordPress, GPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/playground-website-debugging of WordPress/wordpress-playground.

Open the folder on GitHubat commit 4d39322

Compare with similar skills

Playground Website Debugging next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Playground Website Debugging compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Playground Website Debugging this skillWordPress/wordpress-playground2k—~1.9kAutomated safety check: PassGPL-2.0
QA Find Bugs Dashboardbex-co/beancount-io295—~2.3kAutomated safety check: NotesMIT
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
QABuilderIO/agent-native7.1k—~3kAutomated safety check: NotesNone
Playwright Debugvoicetreelab/voicetree923—~1.2kAutomated safety check: PassCustom licence
Playwright Coretestdino-hq/playwright-skill3861 repos~1.4kAutomated safety check: PassMIT

Similar skills

  • QA Find Bugs Dashboard

    bex-co/beancount-io

    Exercise the running Beancount.io dashboard with headless Playwright, use QAEMAIL and QAPASSWORD for login, reproduce bugs, trace fixes to source, and deduplicate findings.

    295 GitHub stars~2.3k tokensUpdated yesterday
    DevelopmentAuto-check: notes

  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • QA

    BuilderIO/agent-native

    Autonomous multi-app QA sweep that drives template apps with Playwright MCP.

    7.1k GitHub stars~3k tokensUpdated today
    Testing & QAAuto-check: notes

  • Playwright Debug

    voicetreelab/voicetree

    This skill should be used when the user asks to "debug the electron app", "connect playwright to VoiceTree", "take screenshots of the running app", "interact with the live UI", "inspect the running…

    923 GitHub stars~1.2k tokensUpdated today
    Testing & QAAuto-check passed

  • Playwright Core

    testdino-hq/playwright-skill

    Battle-tested Playwright patterns for writing and debugging reliable E2E, API, component, visual, accessibility, and security tests.

    386 GitHub starsUsed in 1 repo~1.4k tokens
    Testing & QAAuto-check passed

  • Anti Detect Browser

    antibrow/anti-detect-browser-skills

    Drive Chromium from standard Playwright APIs with a real-device fingerprint applied in the kernel, one persistent isolated profile per identity, and a per-profile proxy whose exit IP sets timezone…

    932 GitHub stars~9.8k tokensUpdated 1 mo ago
    Testing & QAAuto-check: warnings

More from WordPress/wordpress-playground

  • Doc Screenshots

    WordPress/wordpress-playground

    Annotate UI screenshots with documentation callouts in Fellyph's established visual style — uniform-width orange arrows with white halos, double-stroke target outlines, numbered callout cards, dim…

    2k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Compile Php Wasm

    WordPress/wordpress-playground

    Compile PHP.wasm main modules and side modules (dynamic extensions) for Node.js and web platforms.

    2k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Debug Php Wasm Main Module

    WordPress/wordpress-playground

    Debug PHP.wasm main module crashes including Asyncify errors (unreachable, memory access out of bounds), JSPI errors (SuspendError, trying to suspend JS frames), WASM memory growth bugs, and runtime…

    2k GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • Debug Php Wasm Side Modules

    WordPress/wordpress-playground

    Debug WASM side modules (dynamic PHP extensions) including dlopen failures, SIDEMODULE loading, JSPI suspension crashes in extensions, C++ weak symbol issues, and extension runtime errors.

    2k GitHub stars~2.5k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Playground Website Debugging

What does Playground Website Debugging do?

Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP. Playground Website Debugging is an agent skill from WordPress/wordpress-playground. Debug the WordPress Playground website by running the dev server from source and interacting with it via Playwright MCP.

When should I use Playground Website Debugging?

Playground Website Debugging fits situations like: investigating UI bugs; testing website features; checking for JavaScript errors; debugging hanging requests.

How do I install Playground Website Debugging in Claude Code?

Run `npx skills add WordPress/wordpress-playground --skill playground-website-debugging -a claude-code`. Or copy the skill folder (.agents/skills/playground-website-debugging in WordPress/wordpress-playground) into .claude/skills/playground-website-debugging in your project. Claude Code loads it when a task matches its description.

How do I install Playground Website Debugging in Codex?

Run `npx skills add WordPress/wordpress-playground --skill playground-website-debugging -a codex`. Or copy the skill folder (.agents/skills/playground-website-debugging in WordPress/wordpress-playground) into .agents/skills/playground-website-debugging in your project. Codex loads it when a task matches its description.

Can I use Playground Website Debugging in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add WordPress/wordpress-playground --skill playground-website-debugging -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/playground-website-debugging, .gemini/skills/playground-website-debugging, .github/skills/playground-website-debugging and .opencode/skills/playground-website-debugging in your project.

What does Playground Website Debugging need to run?

Going by SKILL.md and its folder, Playground Website Debugging needs the command-line tools its instructions call (npm, nvm, nx and php). Our summary lists: Node.js.

Does Playground Website Debugging access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Playground Website Debugging safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Playground Website Debugging use?

Playground Website Debugging is published under the GPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Playground Website Debugging use?

About 1.9k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Playground Website Debugging?

Skills that share tags, products or a category with Playground Website Debugging: QA Find Bugs Dashboard (bex-co/beancount-io, 295 stars), Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars), QA (BuilderIO/agent-native, 7.1k stars) and Playwright Debug (voicetreelab/voicetree, 923 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Playground Website Debugging?

WordPress (a GitHub organization) maintains it in WordPress/wordpress-playground, which has 1,973 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 7, 2026.

Source: WordPress/wordpress-playground on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.