Godot Ui
Implement Godot menus, HUDs, inventories, and dialogue UIs with correct Control anchors, themes, and responsive container layouts.
Overview
Godot UI is an agent skill for the Build phase that applies Godot Control nodes, themes, and responsive layout patterns for menus, HUDs, inventories, and dialogue systems.
Install
npx skills add https://github.com/zate/cc-godot --skill godot-uiWhat is this skill?
- Deep coverage of Control anchors, offsets, size flags, and mouse_filter / focus_mode
- Container catalog: VBox, HBox, Grid, Margin, Center, Panel, Scroll, Tab, and Split layouts
- Theme and styling guidance for consistent game chrome across menus and HUDs
- Patterns for menus, HUDs, inventories, and dialogue systems
- Godot MCP tools plus Read/Write/Edit for in-project UI work
Adoption & trust: 1.4k installs on skills.sh; 15 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Godot UI scales poorly or fights input focus because anchors, containers, and theme overrides are easy to misuse without a structured reference.
Who is it for?
Indie developers building 2D or 3D Godot games who want agent-assisted UI architecture inside an existing Godot project.
Skip if: Non-Godot stacks, pure concept art requests, or teams wanting a no-code UI builder outside the engine.
When should I use this skill?
Working with Godot UI or menu creation, styling, responsive layouts, or patterns for menus, HUDs, inventories, and dialogue systems.
What do I get? / Deliverables
You get scene-ready UI structure and styling decisions aligned with Godot best practices for layouts and common game interface patterns.
- Updated Control-based scene structure and layout recommendations
- Theme and styling guidance applied to target screens
- Documented UI patterns for menus, HUDs, inventory, or dialogue flows
Recommended Skills
Journey fit
Game UI is built alongside gameplay during the Build phase when scenes, input, and presentation come together in the engine. Frontend maps to player-facing Control trees, styling, and layout—the same shelf as web UI but for Godot’s node system.
How it compares
Skill package for Godot Control expertise—not a generic frontend CSS skill or a hosted UI kit marketplace.
Common Questions / FAQ
Who is godot-ui for?
Solo and small-team Godot developers implementing in-engine menus, HUDs, inventories, and dialogue with correct layout and theme behavior.
When should I use godot-ui?
Use it during Build while creating or refactoring Godot UI scenes, styling themes, or fixing responsive layout and focus issues in player-facing screens.
Is godot-ui safe to install?
It can read and write project files and invoke Godot MCP tools; review the Security Audits panel on this page before granting repo access in shared machines.
SKILL.md
READMESKILL.md - Godot Ui
You are a Godot UI/UX expert with deep knowledge of Godot's Control node system, theme customization, responsive design, and common game UI patterns. # Core UI Knowledge ## Control Node Hierarchy **Base Control Node Properties:** - `anchor_*`: Positioning relative to parent edges (0.0 to 1.0) - `offset_*`: Pixel offset from anchor points - `size_flags_*`: How the node should grow/shrink - `custom_minimum_size`: Minimum size constraints - `mouse_filter`: Control mouse input handling (STOP, PASS, IGNORE) - `focus_mode`: Keyboard/gamepad focus behavior **Common Control Nodes:** ### Container Nodes (Layout Management) - **VBoxContainer**: Vertical stacking with automatic spacing - **HBoxContainer**: Horizontal arrangement with automatic spacing - **GridContainer**: Grid layout with columns - **MarginContainer**: Adds margins around children - **CenterContainer**: Centers a single child - **PanelContainer**: Container with panel background - **ScrollContainer**: Scrollable area for overflow content - **TabContainer**: Tabbed interface with multiple pages - **SplitContainer**: Resizable split between two children ### Interactive Controls - **Button**: Standard clickable button - **TextureButton**: Button with custom textures for states - **CheckBox**: Toggle checkbox - **CheckButton**: Toggle switch style - **OptionButton**: Dropdown selection menu - **LineEdit**: Single-line text input - **TextEdit**: Multi-line text editor - **Slider/HSlider/VSlider**: Value adjustment sliders - **SpinBox**: Numeric input with increment buttons - **ProgressBar**: Visual progress indicator - **ItemList**: Scrollable list of items - **Tree**: Hierarchical tree view ### Display Nodes - **Label**: Text display - **RichTextLabel**: Text with BBCode formatting, images, effects - **TextureRect**: Image display with scaling options - **NinePatchRect**: Scalable image using 9-slice method - **ColorRect**: Solid color rectangle - **VideoStreamPlayer**: Video playback in UI - **GraphEdit/GraphNode**: Node-graph interface ### Advanced Controls - **Popup**: Modal/modeless popup window - **PopupMenu**: Context menu - **MenuBar**: Top menu bar - **FileDialog**: File picker - **ColorPicker**: Color selection - **SubViewport**: Embedded viewport for 3D-in-2D UI ## Anchor & Container System **Anchor Presets:** ```gdscript # Common anchor configurations # Top-left (default): anchor_left=0, anchor_top=0, anchor_right=0, anchor_bottom=0 # Full rect: anchor_left=0, anchor_top=0, anchor_right=1, anchor_bottom=1 # Top wide: anchor_left=0, anchor_top=0, anchor_right=1, anchor_bottom=0 # Center: anchor_left=0.5, anchor_top=0.5, anchor_right=0.5, anchor_bottom=0.5 ``` **Responsive Design Pattern:** ```gdscript # In _ready() for responsive UI func _ready(): # Connect to viewport size changes get_viewport().size_changed.connect(_on_viewport_size_changed) _on_viewport_size_changed() func _on_viewport_size_changed(): var viewport_size = get_viewport_rect().size # Adjust UI based on aspect ratio or screen size if viewport_size.x / viewport_size.y < 1.5: # Portrait or square # Switch to mobile layout pass else: # Landscape # Use desktop layout pass ``` ## Theme System **Theme Structure:** - **StyleBoxes**: Background styles for controls (StyleBoxFlat, StyleBoxTexture) - **Fonts**: Font resources with size and variants - **Colors**: Named color values - **Icons**: Texture2D for icons and graphics - **Constants**: Numeric values (spacing, margins) **Creating Themes in Code:** ```gdscript # Create a theme var theme = Theme.new() # StyleBox for buttons var style_nor