菜单
本專案網頁驗證流程(Playwright、hash 路由、Godot iframe、多人對戰)。當需要在瀏覽器中驗證頁面行為、截圖、測 /battle 多人同步、或 Playwright MCP 啟不動時使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Godot 遊戲開發循環(匯出、測試、產物 commit)。當需要修改 godot-src/(RPG)或 godot-candy-src/(糖果)的 GDScript/場景/關卡,或要重新匯出 Web build、同步地圖 JSON 時使用。
使用 Google libwebp CLI (`cwebp`) 將 JPG/PNG 圖片批次轉換為 WebP 格式。當需要壓縮圖片、批次轉檔、或將專案圖片統一為 WebP 時使用。
2D 地圖場景動態繪製與 RPGRoom 擴展指南。提供如何使用編輯器、匯出場景 JSON、設定碰撞邊界、NPC 對話、場景傳送門以及離屏 Canvas 預渲染機制的標準化流程。
Design intelligence skill providing professional UI/UX knowledge for building production-grade interfaces. Includes design system architecture, token management, color palettes, typography, UX guidelines, and accessibility standards. Adapted for Vue 3 + Quasar + Tailwind CSS v4 stack.
為 RpgRoom 生成 2D RPG 地圖場景 JSON（房屋外觀、室內房間、布置場景）。當使用者要求新增/修改 RPG 地圖、場景、房間布置、NPC 配置時使用。支援「設計 [長x寬] 的 [風格] 場景，出入口接 [場景名]」參數化需求。
將 2D 俯視場景圖（截圖/AI 繪製稿/手繪 mockup）轉換成 RpgRoom 地圖 JSON。當使用者提供場景圖片並要求轉成遊戲室地圖時使用，例如「根據 [圖片] 製作 [場景名]，出入口設置在 [場景2名]」。不符合格式的圖片防呆拒絕執行。
| name | verify-web |
| description | 本專案網頁驗證流程(Playwright、hash 路由、Godot iframe、多人對戰)。當需要在瀏覽器中驗證頁面行為、截圖、測 /battle 多人同步、或 Playwright MCP 啟不動時使用。 |
createHashRouter,dev 網址格式:http://localhost:5173/collect/#/<route>(base path /collect/,hash 路由)pnpm dev 輸出)優先用 playwright MCP(mcp__playwright__browser_*)。MCP 要求 /opt/google/chrome/chrome(安裝需 sudo,無法自動化);缺 Chrome 時改用快取的 chromium 跑 node 腳本:
// 方式一:npx 快取的 playwright(hash 目錄會變,先 ls /home/bal/.npm/_npx/*/node_modules/playwright 確認)
import { chromium } from '/home/bal/.npm/_npx/<hash>/node_modules/playwright/index.mjs'
const browser = await chromium.launch({
// 版本目錄會變,先 ls /home/bal/.cache/ms-playwright/ 確認
executablePath: '/home/bal/.cache/ms-playwright/chromium-<ver>/chrome-linux64/chrome',
headless: true,
args: ['--enable-unsafe-swiftshader'], // WebGL(Godot/Babylon)需要
})
# 方式二:臨時安裝 playwright-core(不會自動下載瀏覽器,須給 executablePath)
npm i --no-save --prefix /tmp/pwtest playwright-core@1.56.0
NODE_PATH=/tmp/pwtest/node_modules node script.cjs # require('playwright-core')
# 注意:npx -p 無法讓 /tmp 下的 require 解析到模組,要用 NODE_PATH
addInitScript 監聽 message 事件收 bridge 訊息:RPG 為 source === 'godot-rpg',糖果為 source === 'godot-candy'game.gd 支援 DEBUG_STATE 指令,可回報玩家/NPC 狀態browser.newContext()(各自 IndexedDB)。同 context 開多分頁會共用 Firebase 匿名 uid → 「不同玩家」同 uid,players 子集合只有 1 筆,看起來像同步失敗dkbo-collect(專案 test-73ce3),.env.local 需 VITE_FIREBASE_FIRESTORE_DB=dkbo-collect;env 留空連 (default) 必死(它是 Datastore Mode)FAILED_PRECONDITION: Cloud Firestore API is not available → 連到 Datastore-mode 的 (default)PERMISSION_DENIED: requires billing to be enabled → 具名 DB 需 Blaze 帳單10.255.255.254 對瀏覽器無效)。解法:node dns.resolve4 先解析 identitytoolkit / securetoken / firestore.googleapis.com,再以 --host-resolver-rules=MAP <host> <ip> 注入 chromium 啟動參數VITE_FIREBASE_FORCE_LONG_POLLING=1(src/core/firebase 支援)