game-ui-ux

The game-ui-ux skill teaches an agent to design and build game UI/UX — HUDs, menus, and overlays — that stays correct across every screen and input device: a phone, an ultrawide monitor, and a TV, on both gamepad and mouse. It owns the engine-neutral UI architecture (responsive layout, scaling, focus navigation, screen flow, and how UI talks to game state) and defers concrete widget APIs to the detected engine's UI skill.

Its core workflow covers seven principles with worked examples: anchor-based layout with containers instead of absolute pixel coordinates; a scaling strategy built on a reference resolution plus an aspect-ratio policy (letterbox, expand, or anchor corners outward); safe-area insets for notches and TV overscan; full keyboard/gamepad focus navigation with an initial focused control and defined neighbors; modeling screens as a push/pop stack rather than boolean flag soup; driving the HUD from events (health_changed, score_changed) instead of per-frame polling; and verifying across resolutions and devices. Examples are given concretely for Godot 4.7 (GDScript, anchors, DisplayServer safe area, focus neighbors, signals) and Unity 6.3 LTS (RectTransform anchors, CanvasScaler, Screen.safeArea, EventSystem navigation). A pitfalls section catalogs the common failures — single-resolution layouts, missing aspect-ratio policy, ignored safe areas, and no initial focus — and a layout-and-flow reference expands the guidance.

It targets game developers building HUDs and menus who want them responsive, controller-navigable, and cleanly decoupled from gameplay. Typical uses include building a health/ammo HUD, a pause or settings menu, an inventory or shop screen, fixing UI that breaks at other resolutions or is unusable on a controller, and structuring title-to-game-to-pause screen flow. It pairs with engine UI skills and cross-references game-feel, dialogue-systems, and input-systems.