What problem does it solve? Building game interfaces with raw HTML and CSS requires manual DOM manipulation, separate styling, and no integration with the Phaser scene lifecycle, camera, or rendering pipeline. This Skill provides patterns for creating UI directly inside Phaser scenes using text objects, graphics, containers, and interactive elements. ## Core Features & Use Cases - Text and HUD Elements: Create score displays, health bars, and timers with add.text() and Graphics, fixed to the camera via setScrollFactor(0). - Interactive Buttons: Build buttons with hover, press, and click states using setInteractive() and tween-based feedback effects. - Dialogs and Containers: Group UI elements into containers and implement typewriter-style dialog boxes with keyboard advancement. - HTML DOM Integration: Embed HTML overlays with this.add.dom() for pause menus and complex styled layouts. - Use Case: When building an idle game like a bakery simulator, use this Skill to create a responsive HUD showing currency totals, producer buttons with hover effects, and a daily-reward dialog that scales across screen sizes. ## Quick Start Ask the AI to create a Phaser UI scene with a score display, an interactive start button with hover effects, and a health bar fixed to the camera.
