Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

verify-web

Étoiles3

Forks1

Mis à jour12 juin 2026 à 03:39

本專案網頁驗證流程(Playwright、hash 路由、Godot iframe、多人對戰)。當需要在瀏覽器中驗證頁面行為、截圖、測 /battle 多人同步、或 Playwright MCP 啟不動時使用。

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

dkbo

dkbo/collect

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Analystes en assurance qualité des logiciels et testeursProfessions informatiques et mathématiques·SOC 15-1253

SKILL.md

readonly

name	verify-web
description	本專案網頁驗證流程(Playwright、hash 路由、Godot iframe、多人對戰)。當需要在瀏覽器中驗證頁面行為、截圖、測 /battle 多人同步、或 Playwright MCP 啟不動時使用。

網頁驗證流程

路由與 dev server

路由是 createHashRouter,dev 網址格式:http://localhost:5173/collect/#/<route>(base path /collect/,hash 路由)
port 被占用時 vite 自動跳 5174/5175,跑驗證前先確認實際 port(看 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

Godot iframe 驗證

用 addInitScript 監聽 message 事件收 bridge 訊息:RPG 為 source === 'godot-rpg',糖果為 source === 'godot-candy'
RPG 的 game.gd 支援 DEBUG_STATE 指令,可回報玩家/NPC 狀態

多人對戰(/battle)驗證

每位玩家必須用獨立的 browser.newContext()(各自 IndexedDB)。同 context 開多分頁會共用 Firebase 匿名 uid → 「不同玩家」同 uid,players 子集合只有 1 筆,看起來像同步失敗
Firestore 是具名資料庫 dkbo-collect(專案 test-73ce3),.env.local 需 VITE_FIREBASE_FIRESTORE_DB=dkbo-collect;env 留空連 (default) 必死(它是 Datastore Mode)
排查「client is offline」:SDK 訊息是包裝,先用 node 直連探針看 gRPC 真錯誤碼(initializeFirestore + signInAnonymously + getDoc/setDoc):
- FAILED_PRECONDITION: Cloud Firestore API is not available → 連到 Datastore-mode 的 (default)
- PERMISSION_DENIED: requires billing to be enabled → 具名 DB 需 Blaze 帳單

WSL 環境陷阱

瀏覽器內 DNS 壞(WSL DNS proxy 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 支援)

Plus depuis ce dépôt

même dépôt

godot-dev

dkbo/collect

Godot 遊戲開發循環(匯出、測試、產物 commit)。當需要修改 godot-src/(RPG)或 godot-candy-src/(糖果)的 GDScript/場景/關卡,或要重新匯出 Web build、同步地圖 JSON 時使用。

2026-06-123

img-to-webp

dkbo/collect

使用 Google libwebp CLI (`cwebp`) 將 JPG/PNG 圖片批次轉換為 WebP 格式。當需要壓縮圖片、批次轉檔、或將專案圖片統一為 WebP 時使用。

2026-06-123

map-scene-drawing

dkbo/collect

2D 地圖場景動態繪製與 RPGRoom 擴展指南。提供如何使用編輯器、匯出場景 JSON、設定碰撞邊界、NPC 對話、場景傳送門以及離屏 Canvas 預渲染機制的標準化流程。

2026-06-123

ui-ux-pro-max

dkbo/collect

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.

2026-06-123

rpg-map-generator

dkbo/collect

為 RpgRoom 生成 2D RPG 地圖場景 JSON（房屋外觀、室內房間、布置場景）。當使用者要求新增/修改 RPG 地圖、場景、房間布置、NPC 配置時使用。支援「設計 [長x寬] 的 [風格] 場景，出入口接 [場景名]」參數化需求。

2026-06-043

rpg-scene-image-to-json

dkbo/collect

將 2D 俯視場景圖（截圖/AI 繪製稿/手繪 mockup）轉換成 RpgRoom 地圖 JSON。當使用者提供場景圖片並要求轉成遊戲室地圖時使用，例如「根據 [圖片] 製作 [場景名]，出入口設置在 [場景2名]」。不符合格式的圖片防呆拒絕執行。

2026-06-043

網頁驗證流程

路由與 dev server

路由是 createHashRouter,dev 網址格式:http://localhost:5173/collect/#/<route>(base path /collect/,hash 路由)

port 被占用時 vite 自動跳 5174/5175,跑驗證前先確認實際 port(看 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

Godot iframe 驗證

用 addInitScript 監聽 message 事件收 bridge 訊息:RPG 為 source === 'godot-rpg',糖果為 source === 'godot-candy'

RPG 的 game.gd 支援 DEBUG_STATE 指令,可回報玩家/NPC 狀態

多人對戰(/battle)驗證

每位玩家必須用獨立的 browser.newContext()(各自 IndexedDB)。同 context 開多分頁會共用 Firebase 匿名 uid → 「不同玩家」同 uid,players 子集合只有 1 筆,看起來像同步失敗

Firestore 是具名資料庫 dkbo-collect(專案 test-73ce3),.env.local 需 VITE_FIREBASE_FIRESTORE_DB=dkbo-collect;env 留空連 (default) 必死(它是 Datastore Mode)

排查「client is offline」:SDK 訊息是包裝,先用 node 直連探針看 gRPC 真錯誤碼(initializeFirestore + signInAnonymously + getDoc/setDoc):

FAILED_PRECONDITION: Cloud Firestore API is not available → 連到 Datastore-mode 的 (default)
PERMISSION_DENIED: requires billing to be enabled → 具名 DB 需 Blaze 帳單

WSL 環境陷阱

瀏覽器內 DNS 壞(WSL DNS proxy 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 支援)