القائمة
本專案網頁驗證流程(Playwright、hash 路由、Godot iframe、多人對戰)。當需要在瀏覽器中驗證頁面行為、截圖、測 /battle 多人同步、或 Playwright MCP 啟不動時使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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 支援)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名]」。不符合格式的圖片防呆拒絕執行。