Expert guidance for Godot's Control node system, themes, responsive layouts, and game UI patterns.
Works with
Covers all major Control node types including containers (VBoxContainer, GridContainer, ScrollContainer), interactive controls (Button, TextEdit, Slider), and display nodes (Label, RichTextLabel, TextureRect)
Provides complete theme system documentation with code examples for creating StyleBoxes, fonts, colors, and icons programmatically or as .tres resources
Includes ready-to-use scene
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versiongodot-uiExecute the skills CLI command in your project's root directory to begin installation:
Fetches godot-ui from zate/cc-godot and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate godot-ui. Access via /godot-ui in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
1
total installs
1
this week
12
GitHub stars
0
upvotes
Run in your terminal
1
installs
1
this week
12
stars
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.
Base Control Node Properties:
anchor_*: Positioning relative to parent edges (0.0 to 1.0)offset_*: Pixel offset from anchor pointssize_flags_*: How the node should grow/shrinkcustom_minimum_size: Minimum size constraintsmouse_filter: Control mouse input handling (STOP, PASS, IGNORE)focus_mode: Keyboard/gamepad focus behaviorCommon Control Nodes:
Anchor Presets:
# 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:
# 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 Structure:
Creating Themes in Code:
# Create a theme
var theme = Theme.new()
# StyleBox for buttons
var style_normal = StyleBoxFlat.new()
style_normal.bg_color = Color(0.2, 0.2, 0.2)
style_normal.corner_radius_top_left = 5
style_normal.corner_radius_top_right = 5
style_normal.corner_radius_bottom_left = 5
style_normal.corner_radius_bottom_right = 5
style_normal.content_margin_left = 10
style_normal.content_margin_right = 10
style_normal.content_margin_top = 5
style_normal.content_margin_bottom = 5
var style_hover = StyleBoxFlat.new()
style_hover.bg_color = Color(0.3, 0.3, 0.3)
# ... same corner radius and margins
var style_pressed = StyleBoxFlat.new()
style_pressed.bg_color = Color(0.15, 0.15, 0.15)
# ... same corner radius and margins
theme.set_stylebox("normal", "Button", style_normal)
theme.set_stylebox("hover", "Button", style_hover)
theme.set_stylebox("pressed", "Button", style_pressed)
# Apply to Control node
$MyControl.theme = theme
Theme Resources:
Best practice: Create .tres theme files and save them in resources/themes/
CanvasLayer
├── MarginContainer (margins for screen edges)
│ └── VBoxContainer (vertical menu layout)
│ ├── TextureRect (logo)
│ ├── VBoxContainer (button container)
│ │ ├── Button (New Game)
│ │ ├── Button (Continue)
│ │ ├── Button (Settings)
│ │ └── Button (Quit)
│ └── Label (version info)
CanvasLayer
├── ColorRect (semi-transparent overlay)
└── PanelContainer (settings panel)
└── MarginContainer
└── VBoxContainer
├── Label (Settings Header)
├── TabContainer
│ ├── VBoxContainer (Graphics Tab)
│ │ ├── HBoxContainer
│ │ │ ├── Label (Resolution:)
│ │ │ └── OptionButton
│ │ └── HBoxContainer
│ │ ├── Label (Fullscreen:)
│ │ └── CheckBox
│ └── VBoxContainer (Audio Tab)
│ ├── HBoxContainer
│ │ ├── Label (Master Volume:)
│ │ └── HSlider
│ └── HBoxContainer
│ ├── Label (Music Volume:)
│ └── HSlider
└── HBoxContainer (button row)
├── Button (Apply)
└── Button (Back)
CanvasLayer (layer = 10 for top rendering)
├── MarginContainer (screen margins)
│ └── VBoxContainer
│ ├── HBoxContainer (top bar)
│ │ ├── TextureRect (health icon)
│ │ ├── ProgressBar (health)
│ │ ├── Control (spacer)
│ │ ├── Label (score)
│ │ └── TextureRect (coin icon)
│ ├── Control (spacer - expands)
│ └── HBoxContainer (bottom bar)
│ ├── TextureButton (inventory)
│ ├── TextureButton (map)
│ └── TextureButton (pause)
CanvasLayer
├── ColorRect (overlay background)
└── PanelContainer (inventory panel)
└── MarginContainer
└── VBoxContainer
├── Label (Inventory Header)
├── HBoxContainer (main area)
│ ├── GridContainer (item grid - columns=5)
│ │ ├── TextureButton (item slot)
│ │ ├── TextureButton (item slot)
│ │ └── ... (more slots)
│ └── PanelContainer (item details)
│ └── VBoxContainer
│ ├── TextureRect (item image)
│ ├── Label (item name)
│ ├── RichTextLabel (description)
│ └── Button (Use/Equip)
└── Button (Close)
CanvasLayer (layer = 5)
├── Control (spacer)
└── PanelContainer (dialogue box - anchored to bottom)
└── MarginContainer
└── VBoxContainer
├── HBoxContainer (character info)
│ ├── TextureRect (character portrait)
│ └── Label (character name)
├── RichTextLabel (dialogue text with BBCode)
└── VBoxContainer (choice container)
├── Button (choice 1)
├── Button (choice 2)
└── Button (choice 3)
CanvasLayer (layer = 100)
├── ColorRect (semi-transparent overlay - modulate alpha)
└── CenterContainer (full rect anchors)
└── PanelContainer (menu panel)
└── MarginContainer
└── VBoxContainer
├── Label (PAUSED)
├── Button (Resume)
├── Button (Settings)
├── Button (Main Menu)
└── Button (Quit)
@onready var start_button = $VBoxContainer/StartButton
func _ready():
# Connect button signals
start_button.pressed.connect(_on_start_button_pressed)
# Or use Inspector to connect signals visually
func _on_start_button_pressed():
# Handle button press
get_tree().change_scene_to_file("res://scenes/main_game.tscn")
func _ready():
# Set first focusable button
$VBoxContainer/StartButton.grab_focus()
# Configure focus neighbors for gamepad navigation
$VBoxContainer/StartButton.focus_neighbor_bottom = $VBoxContainer/SettingsButton.get_path()
$VBoxContainer/SettingsButtonImplementation Guide
Prerequisites
- ›Claude Desktop or compatible AI client with skill support
- ›Clear understanding of task or problem to solve
- ›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
- 1Install skill using provided installation command
- 2Test with simple use case relevant to your work
- 3Evaluate output quality and relevance
- 4Iterate on prompts to improve results
- 5Integrate into regular workflow if valuable
Common Pitfalls
- ⚠Expecting perfect results without iteration
- ⚠Not providing enough context in prompts
- ⚠Using skill for tasks outside its intended scope
- ⚠Accepting outputs without review and validation
Best Practices
✓ Do
- +Start with clear, specific prompts
- +Provide relevant context and constraints
- +Review and refine all outputs before using
- +Iterate to improve output quality
- +Document successful prompt patterns
✗ Don't
- −Don't use without understanding skill limitations
- −Don't skip validation of outputs
- −Don't share sensitive information in prompts
- −Don't expect skill to replace human judgment
💡 Pro Tips
- ★Be specific about desired format and style
- ★Ask for multiple options to choose from
- ★Request explanations to understand reasoning
- ★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
- 1Familiarize yourself with skill capabilities and limitations
- 2Start with low-risk, non-critical tasks
- 3Progress to more complex and valuable use cases
- 4Build expertise through regular use and experimentation
Related Skills
frontend-design
660anthropics/claude-code
Frontendsame categoryui-animation
242mblode/agent-skills
Frontendsame categorypremium-frontend-ui
236github/awesome-copilot
Frontendsame categoryantigravity-design-expert
209sickn33/antigravity-awesome-skills
Frontendsame categoryhigh-end-visual-design
191leonxlnx/taste-skill
Frontendsame categoryinterior-design-expert
144erichowens/some_claude_skills
Frontendsame categoryReviews
4.5★★★★★46 reviews- GGanesh Mohane★★★★★Dec 28, 2024
godot-ui fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- KKiara Huang★★★★★Dec 20, 2024
We added godot-ui from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- DDiya Garcia★★★★★Dec 20, 2024
Useful defaults in godot-ui — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- SShikha Mishra★★★★★Dec 4, 2024
Useful defaults in godot-ui — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- YYash Thakker★★★★★Nov 23, 2024
godot-ui has been reliable in day-to-day use. Documentation quality is above average for community skills.
- HHana Chen★★★★★Nov 23, 2024
godot-ui fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- CChinedu Flores★★★★★Nov 11, 2024
godot-ui has been reliable in day-to-day use. Documentation quality is above average for community skills.
- MMin Wang★★★★★Nov 7, 2024
I recommend godot-ui for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- MMin Park★★★★★Oct 26, 2024
Useful defaults in godot-ui — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- DDhruvi Jain★★★★★Oct 14, 2024
Solid pick for teams standardizing on skills: godot-ui is focused, and the summary matches what you get after install.
showing 1-10 of 46
1 / 5Discussion
Comments — not star reviews- No comments yet — start the thread.