Menu
Game-first HUDs, menus, touch controls, motion, accessibility, art direction, and visual verification.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.