This is your reference when you're wiring up Roblox UI, whether it's a HUD overlay, a progress bar, or floating name tags above player heads. It covers the three container types (ScreenGui for 2D overlays, SurfaceGui for in-world screens, BillboardGui for 3D floating elements), walks through UDim2 sizing with scale versus offset, and shows TweenService patterns for animating menus and health bars. The common mistakes table is genuinely helpful: it catches the usual traps like ResetOnSpawn killing your GUI on respawn, forgetting TextScaled on mobile, and clicks passing through transparent frames. Good for both initial setup and debugging layout issues.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
38
skills.sh installs
1.3K
GitHub stars
31
last updated
Aug 21, 2026

Install

$ npx -y skills add sentinelcore/roblox-skills --skill roblox-gui --agent claude-code

Installs into .claude/skills of the current project.

Files

Roblox GUI Reference

GUI Container Types

ContainerParentUse Case
ScreenGuiPlayerGuiHUDs, menus, overlays — always faces screen
SurfaceGuiBasePartWorld-space UI on a part surface (signs, screens)
BillboardGuiBasePart or ModelFloats 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

Sponsors

Details

Repository
github.com/sentinelcore/roblox-skills
Categories
Frontend Development, Debugging
First seen
Jun 3, 2026

More from sentinelcore/roblox-skills

All 6
1next-safe-action avatarsafe-action-formsnext-safe-action/skillsUse when integrating next-safe-action with forms -- react-hook-form adapter (useHookFormAction, useHookFormOptimisticAction, mapToHookFormErrors), native HTML f1.2Kskills.sh installs
2mindrally avatarmodern-web-developmentmindrally/skillsModern web development best practices for TypeScript, Next.js 14, React Server Components, Supabase, GraphQL, and Tailwind CSS.1.2Kskills.sh installs
3jezweb avatarvite-flare-starterjezweb/claude-skillsScaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query 1.2Kskills.sh installs
4davila7 avatarsenior-architectdavila7/claude-code-templatesComprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flut1.2Kskills.sh installs
5am-will avatarcontext7am-will/codex-skillsFetch up-to-date library documentation via Context7 CLI. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User a1.2Kskills.sh installs
6alirezarezvani avatarsenior-qaalirezarezvani/claude-skillsGenerates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analy1.2Kskills.sh installs