Babylon.js Game UI Designer

Purpose

Make game UI intentional, readable, responsive, and genre-specific using Babylon GUI (@babylonjs/gui) or DOM overlay.

This is a thin mirror of threejs-game-ui-designer. Load that skill's SKILL.md for the complete UI design methodology, pattern library, and quality checklists. This file adds Babylon-specific GUI system guidance.

Reference Gate

Load threejs-game-ui-designer/SKILL.md for the full UI design workflow. Load threejs-game-ui-designer/references/ui-patterns.md for layout patterns, typography, iconography, and state management. Load threejs-game-ui-designer/references/checklists/game-ui-quality.md, hud-readability.md, responsive-ui-fit.md, and mobile-input.md for quality gates.

Then load this skill's references/babylon-gui-patterns.md for Babylon-specific GUI implementation details.

Babylon GUI System

Babylon.js provides a built-in GUI system via @babylonjs/gui: