godot-ui_skill

Overview

This skill provides expert guidance on Godot's UI system, covering Control nodes, themes, responsive layouts, and common game UI patterns like menus, HUDs, inventories, and dialogue systems. It focuses on practical, reusable patterns and scripting tips to build polished, performant interfaces in Godot. Use it when creating or styling in-game UI, optimizing UI performance, or implementing accessibility and gamepad navigation.

How this skill works

The skill inspects Control node properties (anchors, offsets, size flags, focus and mouse handling) and recommends container-based layouts (VBox/HBox/Grid/Margin/Center containers) for responsive design. It explains theme creation with StyleBoxes, fonts, colors, and icons, shows how to script dynamic UI (button signals, list population, health bars, popups), and provides performance and accessibility best practices. Examples include scene hierarchies for main menu, settings, HUD, inventory, dialogue, and pause screens.

When to use it

• Building menus, HUDs, inventories, dialogue systems, or any in-game UI
• Creating or exporting reusable theme resources and consistent styles
• Making UI responsive to varying screen sizes and aspect ratios
• Implementing gamepad/keyboard navigation and accessibility features
• Optimizing UI performance for mobile or constrained hardware

Best practices

• Use container nodes for layout and anchors for precise positioning; avoid hardcoded pixel layouts
• Create .tres Theme resources with StyleBoxes, fonts, colors and share them across scenes
• Pool frequently created UI nodes and disable processing when UI is hidden
• Use CanvasLayer for rendering depth, clip ScrollContainer content, and batch textures with atlases
• Set up focus chains and scale fonts programmatically to support gamepads and accessibility

Example use cases

• Main menu with a centered logo, vertical button list and version label using VBoxContainer inside a MarginContainer
• Settings panel using TabContainer with separate graphics and audio tabs and HBox rows for labels + controls
• HUD built on a high-priority CanvasLayer with health ProgressBar, score Label and quick-action TextureButtons
• Inventory panel combining GridContainer for item slots and a detail panel with TextureRect and RichTextLabel
• Dialogue box anchored to the bottom with character portrait, RichTextLabel for BBCode text, and choice Buttons