zate/cc-godot
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
FAQ
Connect to viewport size changes and switch layouts or toggle visibility of containers based on aspect ratio or screen size.
Should I style UI in code or with Theme resources?
Prefer Theme resources (.tres) for reuse and editor tweaking; use code for dynamic or procedural style adjustments.
4 skills
This skill provides expert guidance for Godot UI creation, theming, responsive layouts, and common patterns to accelerate menus, HUDs, inventories, and
This skill helps you diagnose and fix Godot errors and crashes quickly by providing expert debugging guidance, error interpretation, and troubleshooting
This skill helps you optimize Godot game performance by profiling, identifying bottlenecks, and applying runtime and rendering optimizations.
This skill helps you develop Godot games efficiently by guiding scene structure, GDScript patterns, and common tasks with practical examples.
