# Roblox Gui

> Use when building Roblox menus, HUDs, shops, notifications, dialogs, or responsive cross-platform UI.

- Skill: `tabooharmony/roblox-gui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tabooharmony/roblox-gui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tabooharmony/roblox-gui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tabooharmony (https://skillmd.com/u/tabooharmony)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tabooharmony/roblox-gui

---


# roblox gui

## When to Load

Load when building a HUD, menu, shop, dialog, notification, or UI attached to a 3D object.

## Quick Reference

- Use `ScreenGui` for screen overlays, `SurfaceGui` for a surface, and `BillboardGui` for floating world labels.
- Let `UIListLayout`, `UIGridLayout`, and constraints own repeated layout. Avoid per-frame pixel positioning.
- Use `Scale` for responsive structure and `Offset` for deliberate padding or fixed-size details.
- Design for touch and gamepad as well as mouse and keyboard. Bind gameplay actions with `ContextActionService` where it fits.
- For gamepad UI, define a selected entry point and deliberate directional behavior. `GuiService.SelectedObject` plus `Selectable` is the native baseline; the Focus Navigation library is optional for richer trees.
- Keep UI state separate from the server state that it displays. A button is not an authority boundary.
- In Server Authority projects, a UI may show predicted state that is later corrected. Keep durable inventory, currency, and ownership displays tied to confirmed state, and use the Input Action System for gameplay-affecting input.
- Make scrolling, text growth, clipping, and safe-area behavior explicit before adding polish.
- Build custom loading UI in `ReplicatedFirst`; never use a client-side character teleport as the readiness gate.

**Need the details?** Load `references/full.md` for layout recipes and UI lifecycle patterns.