EP17. "wp-playground-development Playground 开发与复现环境审查"
🔒 登录后可标记已读- 报 bug 时甩一句「我这边重现不了」，多半是复现步骤本身就有问题——WordPress Playground 能在浏览器里跑起一个完整的 WordPress，
wp-playground-development就是专门审查这类零安装 demo/复现环境搭得靠不靠谱 - 这是
jorgerosal/wordpress-skills开源 skill 包里的其中一个，专门审查 Blueprint 结构、本地 CLI 用法、内嵌 demo、bug 复现环境 - 核心原则：Playground 环境要确定（deterministic）、要方便携带（portable）、光看 Blueprint 或 CLI 入口就该看得懂在干嘛，不能藏着没写出来的手动步骤
- 📌 这个 skill 在上游仓库的 README 里标注为 🚧 in progress（截至 2026-09 撰写本篇笔记时），代表作者认为它还在持续打磨中；不代表内容不能用，下面的内容是照实际抓到的 SKILL.md 整理的
- 前置知识：先看过 Overview 系列的「Claude Code 是什么与新手上手」「进阶功能：Skills、Plugins 与 Routines」两篇，知道 Skill 是什么、怎么装
重点内容
这个 Skill 是做什么的
WordPress Playground 是官方出的「浏览器里跑 WordPress」工具，靠一份 Blueprint（JSON 格式的设置脚本）描述要装哪些插件/主题、要跑哪些 WP-CLI 步骤、要预先写好哪些内容。wp-playground-development 审查的就是这份 Blueprint 写得靠不靠谱、CLI 用法对不对、内嵌 demo 或 bug 复现环境有没有藏着没写清楚的手动步骤。
适合用在：
- 审查一份 Blueprint JSON 文件
- 审计文档里内嵌或链接到 Playground 的部分
- 搭一个零安装的 bug 复现环境或产品 demo
- 审查本地工作流程或测试里用到的 Playground CLI
- 给 block/插件/主题设计一套可重复使用的环境
不适合用在：
- 不涉及 Playground 的一般 block/插件审查
- Playground 环境之外的 WP-CLI 操作（交给
wp-wpcli-and-ops） - 单纯的静态分析或 CI 设置
触发方式
| 方式 | 写法 | 说明 |
|---|---|---|
| 斜线指令（完整版） | /wp-playground-review [path] | 完整审查，按文件、按严重度分组给结果 |
| 斜线指令（快速版） | /wp-playground [path] | 只抓高风险问题，适合快速过一遍 |
| 自然语言 | 「帮我看看这份 Blueprint 写得对不对」「review this Playground demo」 | Claude 判断意图符合就会自动触发 |
📌 path 留空扫整个当前项目，也可以指定到某个 Blueprint JSON 文件或 demo 文档。
审查流程
- 找出 Playground 入口 — Blueprint JSON、Playground CLI 指令、内嵌 iframe 或 blueprint URL、用来复现问题的本地文档/脚本
- 先看能不能重现 — 有没有明确写清楚需要的 WordPress/PHP 版本；步骤是不是按顺序、自成一体；有没有藏在 Blueprint/文档之外的隐藏手动步骤
- 审查设置步骤 — 主题/插件的安装与启用、登录/站点选项/预先写入的内容、文件写入/复制/挂载、Blueprint 里用到的 WP-CLI 步骤
- 审查开发者体验 — 别人能不能不用猜就重新跑一次；落地页（landing page）有没有意义；本地流程跟浏览器流程有没有分清楚
- 给严重度分级
严重度分级
| 严重度 | 定义 | 举例 |
|---|---|---|
| CRITICAL | 环境根本没法重现、隐藏依赖没写出来、步骤顺序断掉、依赖了没写文档的外部假设 | Blueprint 缺少让它能正常运作的关键设置步骤 |
| WARNING | 版本没写清楚、挂载方式太脆弱、落地页让人摸不着头脑、为了一个小问题搭了太重的复现环境 | 版本兼容性有讲究却没设 preferredVersions；复现环境依赖 Blueprint 旁边的文件却没写文档 |
| INFO | 可以做得更简洁，但不是风险 | 可以简化步骤、把 demo 内容跟测试数据分开、用更清楚的 Blueprint 写法 |
按面向抓的坑
| 面向 | 主要检查项 |
|---|---|
| Blueprint 文件 | 有没有漏掉让 Blueprint 能正常运作的关键设置步骤；版本兼容性有讲究时有没有设 preferredVersions；复现环境依赖 Blueprint 旁边的文件却没写文档；landingPage 有没有指到有意义的位置 |
| Playground CLI 工作流程 | 本地流程用 server/start 时有没有说明挂载了什么；Blueprint 路径或自动挂载的假设有没有讲清楚；能不能改用 run-blueprint 或 build-snapshot 让流程更确定 |
| 内嵌 demo 与复现环境 | demo 是不是依赖 Blueprint 之外的手动后台设置；内嵌示例是不是为了展示的问题而言太大太笼统；教学用内容跟 bug 复现内容有没有分开 |
实操示例：Blueprint 写得完不完整
// ❌ WARNING：没写版本要求，也没交代 Blueprint 旁边还需要哪些文件
{
"landingPage": "/wp-admin/",
"steps": [
{ "step": "installPlugin", "pluginData": { "resource": "url", "url": "./my-plugin.zip" } }
]
}
// ✅ GOOD：明确版本、落地页指到能直接看到问题的位置、步骤自成一体不依赖外部手动操作
{
"landingPage": "/wp-admin/edit.php?post_type=page",
"preferredVersions": { "php": "8.1", "wp": "6.5" },
"steps": [
{ "step": "login", "username": "admin", "password": "password" },
{ "step": "installPlugin", "pluginData": { "resource": "url", "url": "https://example.com/my-plugin.zip" } },
{ "step": "activatePlugin", "pluginName": "my-plugin/my-plugin.php" }
]
}📌 这份 SKILL.md 里没有给出更完整的「实操示例」代码块（比如带 wp-cli 步骤或多阶段设置的 Blueprint），上面这组 GOOD/BAD 是照它文档里列出的检查项（关键设置步骤、preferredVersions、landingPage）自己组出来的示范写法，不是照抄原文的现成代码——如果要更完整的范例，仓库里有一份 references/sample-playground-blueprint.json 可以直接参考。
怎么安装
这个 skill 是 wordpress-skills 这个开源仓库（jorgerosal/wordpress-skills）打包的 18 个技能之一，安装一次，18 个技能一起到位，不用逐个装：
Claude Code：
| 方式 | 指令 | 适用场景 |
|---|---|---|
| 装进单个项目（推荐） | git submodule add https://github.com/jorgerosal/wordpress-skills.git .claude/plugins/wordpress-skills | 只想在这个项目用，团队成员 clone 项目就一起有 |
| 装到自己账号 | git clone https://github.com/jorgerosal/wordpress-skills.git ~/.claude/plugins/wordpress-skills | 所有项目都能用 |
| 只装这一个 skill | cp -r claude-skills/wp-playground-development ~/.claude/skills/ | 只想要 Playground 审查这一个功能，不要其他 17 个 |
装完重启 Claude Code，进到一个 WordPress 项目里跑 /wordpress-skills:wp-playground-review 验证有没有装成功（用 marketplace/submodule 方式装的话，指令前面会带插件命名空间 wordpress-skills:；用「只装这一个 skill」的方式则不带命名空间，直接 /wp-playground-review）。
Claude Desktop / claude.ai： 走 Settings → Capabilities → Skills，上传技能文件夹（把 claude-skills/wp-playground-development 这个文件夹打包上传，里面要包含 SKILL.md）——跟 Claude Code 的 git submodule/marketplace 安装方式不同，Desktop 端是手动上传 UI，装好之后同样能用自然语言或 slash 指令触发。
常见错误
- ❌ 把 demo 内容跟 bug 复现内容混在同一份 Blueprint 里——两者目的不一样，复现环境要尽量精简到只留下重现问题需要的东西，教学 demo 可以丰富一点，混在一起会让复现环境变得又大又难排查
- ❌ 版本兼容性明明有讲究，却没设
preferredVersions就假设默认版本一定能重现——不同版本组合可能根本重现不了原本的问题 - ❌ 复现环境依赖 Blueprint 文件旁边的其他文件（比如没写进 steps 里的本地文件），却没在文档里说明——别人拿到 Blueprint 单独跑就会卡住
- 💡 判断一个 Playground 设置好不好，标准就是「别人能不能只靠 Blueprint 或 CLI 指令本身重新跑一次，不用猜」
Sources
官方文档：
- wordpress-skills（GitHub 仓库）— https://github.com/jorgerosal/wordpress-skills
- wp-playground-development SKILL.md — https://github.com/jorgerosal/wordpress-skills/blob/main/claude-skills/wp-playground-development/SKILL.md