메뉴
Live preview real-time cho game HTML5 (Phaser 2D, Three.js 3D, Isometric) — Vite HMR, hot-reload khi code thay đổi, browser auto-open. Dùng sau khi code xong feature, trước polish pipeline.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Game art principles — art style, color theory, animation principles, asset pipeline
Game design principles — core loop, GDD, player psychology, difficulty balancing, progression
Orchestrator game — route to implementation skill (pxhopencode) + principle-based sub-skill (agent-skills-hub)
Mobile game principles — touch input, battery, thermal, app stores, monetization
Multiplayer game principles — networking architecture, synchronization, security, matchmaking
SOC 직업 분류 기준
| name | games-preview |
| description | Live preview real-time cho game HTML5 (Phaser 2D, Three.js 3D, Isometric) — Vite HMR, hot-reload khi code thay đổi, browser auto-open. Dùng sau khi code xong feature, trước polish pipeline. |
Biến terminal thành "AI Studio" — code xong thấy ngay, không cần refresh tay.
npm init -y
npm install -D vite
Copy templates:
copy skills\games-preview\templates\vite.config.ts .
copy skills\games-preview\templates\index.html .
npx vite --open --host
Mỗi lần edit file src/, Vite auto reload browser trong < 50ms. Không mất state game.
| Engine | HMR behavior |
|---|---|
| Phaser 2D | Hot reload scene — game state giữ nguyên |
| Three.js 3D | Hot reload module — scene tự rebuild |
| Isometric | Hot reload tilemap — map update tức thì |
Sau mỗi phase code → chạy preview → test → fix → polish → verify:
code feature → npm run dev → thấy kết quả → fix nếu xấu → tiếp tục
{
"scripts": {
"dev": "vite --open --host",
"build": "vite build",
"preview": "vite preview --open"
}
}
| Excuse | Reality |
|---|---|
| "Không cần preview, code xong build rồi xem" | Mất 30 phút debug layout, animation sai |
| "Polished cuối cùng làm" | Preview cho thấy ngay cái gì cần polish |
#game hoặc #appnpx vite --open mở browser được