roblox-gui
Use when building, animating, or debugging Roblox GUI elements including HUDs, menus, world-space UI, and player labels. Triggers on: ScreenGui setup, SurfaceGui or BillboardGui placement, UDim2 sizing questions, TweenService UI animations, responsive scaling, LocalScript GUI logic, ResetOnSpawn issues, or any Frame/TextLabel/ImageButton layout work.
- Installs
- 1.2K
- Last 24h
- +10
- Trending rank
- #8658
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sentinelcore/roblox-skills --skill roblox-gui- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads roblox-gui automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Roblox GUI Reference
GUI Container Types
| Container | Parent | Use Case |
|---|---|---|
ScreenGui | PlayerGui | HUDs, menus, overlays — always faces screen |
SurfaceGui | BasePart | World-space UI on a part surface (signs, screens) |
BillboardGui | BasePart or Model | Floats above a part in 3D space (name tags, health bars) |
ScreenGui
-- LocalScript in StarterGui or StarterPlayerScripts
local player = game:GetService("Players").LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Name = "HUD"
screenGui.ResetOnSpawn = false -- keep GUI across respawns
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
screenGui.Parent = playerGui
SurfaceGui
local surfaceGui = Instance.new("SurfaceGui")
surfaceGui.Face = Enum.NormalId.Front
surfaceGui.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
surfaceGui.PixelsPerStud = 50
surfaceGui.Parent = workspace.ScreenPart
local label = Instance.new("TextLabel")
label.Size = UDim2.fromScale(1, 1)
label.Text = "Hello World"
label.Parent = surfaceGui
BillboardGui
local billboard = Instance.new("BillboardGui")
billboard.Size = UDim2.fromOffset(200, 50)
billboard.StudsOffset = Vector3.new(0, 2.5, 0) -- float above head
billboard.AlwaysOnTop = false
billboard.Parent = character:WaitForChild("Head")
local nameLabel = Instance.new("TextLabel")
nameLabel.Size = UDim2.fromScale(1, 1)
nameLabel.BackgroundTransparency = 1
nameLabel.Text = player.DisplayName
nameLabel.Parent = billboard
UDim2 Sizing and Positioning
UDim2.new(xScale, xOffset, yScale, yOffset) — scale is 0–1 relative to parent, offset is pixels.
frame.Size = UDim2.new(1, 0, 0, 50) -- full width, 50px tall
frame.Position = UDim2.new(0, 0, 0, 0) -- top-left corner
frame.Size = UDim2.fromScale(0.6, 0.4) -- 60% wide, 40% tall
frame.Position = UDim2.new(0.2, 0, 0.3, 0) -- centered (0.2 = (1-0.6)/2)
UDim2.fromScale(0.5, 0.5) -- scale only
UDim2.fromOffset(300, 150) -- pixels only
AnchorPoint shifts the element's pivot (0–1 on each axis):
frame.AnchorPoint = Vector2.new(0.5, 0.5) -- pivot at center
frame.Position = UDim2.fromScale(0.5, 0.5) -- truly centered on screen
Responsive Design
Prefer scale over offset so UI adapts to all screen sizes.
button.Size = UDim2.fromScale(0.2, 0.07)
button.Position = UDim2.new(0.4, 0, 0.85, 0)
-- Prevent distortion with UIAspectRatioConstraint
local arc = Instance.new("UIAspectRatioConstraint")
arc.AspectRatio = 4 -- width:height = 4:1
arc.Parent = button
TweenService Animations
local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local menuFrame = script.Parent
local function openMenu()
TweenService:Create(menuFrame, tweenInfo, {
Position = UDim2.new(0.05, 0, 0.1, 0)
}):Play()
end
local function closeMenu()
TweenService:Create(menuFrame, tweenInfo, {
Position = UDim2.new(-0.5, 0, 0.1, 0)
}):Play()
end
-- Animated progress bar
local function setProgress(bar, pct)
TweenService:Create(bar, TweenInfo.new(0.2), {
Size = UDim2.new(pct, 0, 1, 0)
}):Play()
end
LocalScript Placement
| Location | Notes |
|---|---|
StarterGui | Cloned into PlayerGui on join; use ResetOnSpawn = false to persist |
StarterPlayerScripts | Runs once, not reset on respawn; good for persistent managers |
StarterCharacterScripts | Re-runs each spawn; suited for character-dependent UI |
-- Safe pattern: wait for character
local player = game:GetService("Players").LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")
humanoid.HealthChanged:Connect(function(health)
-- update health bar
end)
ResetOnSpawn
screenGui.ResetOnSpawn = false -- persist across respawns (inventory, settings)
screenGui.ResetOnSpawn = true -- re-create on respawn (respawn timer) — default
Common Patterns Quick Reference
| Pattern | Key Setup |
|---|---|
| Full-screen overlay | Size = UDim2.fromScale(1,1), Position = UDim2.fromScale(0,0) |
| Bottom-center HUD bar | AnchorPoint = (0.5,1), Position = UDim2.new(0.5,0,1,-10) |
| Padded list | UIPadding + UIListLayout inside a Frame |
| Scrollable list | ScrollingFrame + UIListLayout; set CanvasSize from UIListLayout.AbsoluteContentSize |
| Rounded corners | UICorner with CornerRadius = UDim.new(0, 8) |
| Scaled text | TextScaled = true on TextLabel/TextButton so font grows with container |
| Dynamic frame height | AutomaticSize = Enum.AutomaticSize.Y so frame expands to fit children |
| Health bar | Nested frames: outer = background, inner tweened by Size.X.Scale |
| Name tag | BillboardGui on Head, StudsOffset = Vector3.new(0, 2.5, 0) |
Common Mistakes
| Mistake | Fix |
|---|---|
| GUI disappears on respawn | Set ResetOnSpawn = false or use StarterPlayerScripts |
| UI looks wrong on mobile | Use UDim2.fromScale + UIAspectRatioConstraint |
Script can't find PlayerGui | Use player:WaitForChild("PlayerGui") |
| Tween doesn't run | Ensure the property is tweenable; Text is not, Position and Size are |
| BillboardGui visible through walls | Verify AlwaysOnTop = false |
AbsoluteSize is zero on first frame | Read it inside task.defer or after first render step |
| Clicks pass through overlapping frames | Add a transparent input-blocking Frame or set Modal = true |
| SurfaceGui flickers | Set LightInfluence = 0; ensure part isn't too thin |
| Text tiny on mobile | Set TextScaled = true — fixed TextSize doesn't adapt to screen size |
| UI hard to test on mobile | Use Studio's Device Emulator (Test tab → Device) to preview layouts |
FAQ
What does the roblox-gui skill do?
Use when building, animating, or debugging Roblox GUI elements including HUDs, menus, world-space UI, and player labels. Triggers on: ScreenGui setup, SurfaceGui or BillboardGui placement, UDim2 sizing questions, TweenService UI animations, responsive scaling, LocalScript GUI logic, ResetOnSpawn issues, or any Frame/TextLabel/ImageButton layout work.
How do I install roblox-gui?
Run npx skills add https://github.com/sentinelcore/roblox-skills --skill roblox-gui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/roblox-gui/ (personal) or .claude/skills/roblox-gui/ (project).
Which AI agents can use roblox-gui?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is roblox-gui safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains roblox-gui?
It is published by sentinelcore in sentinelcore/roblox-skills. It has 1,189 recorded installs.
More from sentinelcore/roblox-skills
roblox-animations
sentinelcore/roblox-skills
Use when working with Roblox animation systems including playing, stopping, or blending animations on Humanoid characters or non-Humanoid models, handling AnimationTrack events, replacing default character animations, or debugging animation priority and blending issues.
roblox-performance
sentinelcore/roblox-skills
Use when optimizing a Roblox game for better frame rates, reducing lag, improving server or client performance, diagnosing FPS drops, handling large worlds, or when asked about streaming, draw calls, object pooling, LOD, MicroProfiler, or expensive loop operations.
roblox-security
sentinelcore/roblox-skills
Use when writing Roblox game scripts that handle player actions, currencies, stats, damage, or any RemoteEvent/RemoteFunction communication. Use when reviewing code for exploitable patterns, implementing anti-cheat logic, validating client requests on the server, or setting up rate limiting.
roblox-datastores
sentinelcore/roblox-skills
Use when implementing player data persistence in Roblox, saving/loading player stats or inventory, building leaderboards with ordered datastores, handling data migration between versions, diagnosing data loss issues, or adding auto-save and shutdown-safe data handling with DataStoreService.
roblox-remote-events
sentinelcore/roblox-skills
Use when implementing client-server communication in Roblox, firing events between LocalScripts and Scripts, passing data across the network boundary, syncing game state, or defending against exploits that abuse RemoteEvents or RemoteFunctions.
roblox-monetization
sentinelcore/roblox-skills
Use when developing Roblox games or experiences and need to earn Robux through Game Passes, Developer Products, UGC avatar items, or Premium Payouts — covers both Studio scripting and Creator Hub dashboard setup.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.