$npx -y skills add TabooHarmony/roblox-brain --skill roblox-guiUse when building Roblox menus, HUDs, shops, notifications, dialogs, or responsive cross-platform UI.
| 1 | # roblox gui |
| 2 | |
| 3 | ## When to Load |
| 4 | |
| 5 | Load when building a HUD, menu, shop, dialog, notification, or UI attached to a 3D object. |
| 6 | |
| 7 | ## Quick Reference |
| 8 | |
| 9 | - Use `ScreenGui` for screen overlays, `SurfaceGui` for a surface, and `BillboardGui` for floating world labels. |
| 10 | - Let `UIListLayout`, `UIGridLayout`, and constraints own repeated layout. Avoid per-frame pixel positioning. |
| 11 | - Use `Scale` for responsive structure and `Offset` for deliberate padding or fixed-size details. |
| 12 | - Design for touch and gamepad as well as mouse and keyboard. Bind gameplay actions with `ContextActionService` where it fits. |
| 13 | - For gamepad UI, define a selected entry point and deliberate directional behavior. `GuiService.SelectedObject` plus `Selectable` is the native baseline; the Roblox Focus Navigation library is an optional reference for richer focus trees. |
| 14 | - Keep UI state separate from the server state that it displays. A button is not an authority boundary. |
| 15 | - 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. |
| 16 | - Make scrolling, text growth, clipping, and safe-area behavior explicit before adding polish. |
| 17 | |
| 18 | **Need the details?** Load `references/full.md` for layout recipes and UI lifecycle patterns. |