메뉴
Game-first HUDs, menus, touch controls, motion, accessibility, art direction, and visual verification.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Main skill — intake, foundation, and routing for JGengine games.
Scene truth is data. Invoke before verifying anything works or renders.
Invoke on any mechanical leg — verify, ship, scout, sweep. Standing authorization.
Rebuild a one-model agent as orchestrator plus cheap workers. Invoke to cut cost.
Do any task in this repo AND leave the engine better than you found it. Same harvest instinct as harvest-game/harvest-full-game — but the carrier isn't a game, it's whatever task you were given (a fix, a feature, a refactor, a question, a doc pass). Complete the task, and treat every gap, friction, workaround, and doc error you hit along the way as an engine-improvement opportunity to close now or file. Invoke with the task, or nothing to have the standing gap list picked from.
| name | jgengine-ui |
| description | Game-first HUDs, menus, touch controls, motion, accessibility, art direction, and visual verification. |
Use this skill for the visual and interaction design of the game interface: title screens, HUDs, menus, prompts, maps, inventories, dialogue, touch controls, transitions, pause/results states, accessibility, and screenshot critique.
Do not use this skill as a React, routing, state-management, or hooks reference. The main jgengine skill owns routing and points to the engine APIs. When implementation needs @jgengine/react hooks or shell APIs, follow the links in the main skill and the compact API appendix in reference.md; keep this skill focused on what the player sees and feels.
A JGengine game must read as a self-contained game, not a responsive website with a canvas inside it.
Before shipping UI:
The main jgengine skill owns intake, engine architecture, API routing, hooks, commands, state, and verification routing. This skill owns presentation quality.
Read reference.md when building or reviewing a game interface. It contains the implementation quality bar, layout rules, art-direction template, touch-control requirements, acceptance criteria, and the compact existing React API surface.
ui/GameUI.tsx composition layer.Every game ships src/preview.tsx: a static default frame (default export, used by the website card) plus a states named export (GamePreviewStates from @jgengine/react/preview) keying named UI states — stage_1, game_over, boss_intro — to components. Build state entries from the game's real UI components with fixture snapshots (canned props/state), not redrawn lookalikes; that turns every key into a capturable render test. Capture any state instantly with bun run shoot <game> --preview <stateKey> — no sim, no three.js, no hang risk — and use it as the screenshot-critique loop for HUD/menu/overlay work before any full-shell --mode ui/play glance.
Reject and revise the UI when it could be mistaken for a SaaS dashboard, landing page, admin panel, documentation page, or generic emulator overlay.