# roblox-user-interfaces

Helps build and debug Roblox menus, HUD overlays, and world-space interfaces like SurfaceGui and BillboardGui.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 328 installs · ★ 24
- Author: nonlooped
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/nonlooped/roblox-suite/tree/HEAD/roblox-user-interfaces/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/roblox-user-interfaces

## What it does

The skill guides coding assistants through Roblox interface development, focusing on responsive containers and layout modifiers. It prioritizes `Scale` over pixel-based `Offset` and pairs `AutomaticSize` with `UIListLayout` flex properties so layouts adjust across screen sizes. It also covers appearance modifiers like `UIStroke`, `UICorner`, and gradient sequences.

In world space, interactive controls come with engine-specific requirements. Buttons placed inside `SurfaceGui` or `BillboardGui` will ignore player input unless the container is parented under `PlayerGui` and the target part has `CanQuery` enabled. For button interactions, it recommends `.Activated` across desktop, mobile, and gamepad.

Standard `ParticleEmitter`, `Beam`, and `Trail` instances do not render inside a `ScreenGui` or a `ViewportFrame`. The skill addresses this limitation by using scripted pools of `ImageLabel` elements animated with `TweenService`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add nonlooped/roblox-suite --skill roblox-user-interfaces -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/roblox-user-interfaces/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/roblox-user-interfaces/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add nonlooped/roblox-suite --skill roblox-user-interfaces -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/roblox-user-interfaces/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add nonlooped/roblox-suite --skill roblox-user-interfaces -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/roblox-user-interfaces/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install nonlooped/roblox-suite roblox-user-interfaces
```

2. **Manually: put the files in place**
- File: `.github/skills/roblox-user-interfaces/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add nonlooped/roblox-suite --skill roblox-user-interfaces -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/nonlooped/roblox-suite --path roblox-user-interfaces
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/roblox-user-interfaces/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add nonlooped/roblox-suite --skill roblox-user-interfaces -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/nonlooped/roblox-suite/tree/HEAD/roblox-user-interfaces/SKILL.md

## When to use it
- build responsive game HUDs that adjust to varying display sizes
- configure interactive terminals in world space using SurfaceGui
- create floating player nameplates and health bars with BillboardGui
- implement 2D burst particle effects using UI instances instead of 3D emitters

## Example prompts
- Create an inventory grid using ScrollingFrame, UIGridLayout, and UIAspectRatioConstraint
- Set up an interactive vehicle dashboard using SurfaceGui and PlayerGui adorning
- Build a floating damage number effect using BillboardGui and StudsOffset

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 6e1350802c17595b.

BEGIN THIRD-PARTY FILE 6e1350802c17595b
```text
---
name: roblox-user-interfaces
description: "Build or debug Roblox HUDs, menus, and world-space interfaces. Use for GUI containers, responsive layouts, input handling, ViewportFrame previews, and particle effects in 2D UI."
last_reviewed: 2026-10-21
---

# roblox-user-interfaces

Choose a GUI container for the display surface, then use layouts and constraints to handle screen sizes. For particles inside a ScreenGui, use 2D UI objects; ParticleEmitter does not render there.

**Primary sources:**
- https://create.roblox.com/docs/en-us/ui
- https://create.roblox.com/docs/en-us/ui/on-screen-containers
- https://create.roblox.com/docs/en-us/ui/in-experience-containers
- Sub guides for frames, labels, buttons, text-input, position-and-size, list-flex-layouts, grid-table-layouts, appearance-modifiers, styling, proximity-prompts, ui-drag-detectors, etc.
- roblox-animation skill (for motion on these objects)
- Engine classes: ScreenGui, SurfaceGui, BillboardGui, GuiObject and all descendants, the various UI*Layout and UI*Constraint classes, CanvasGroup, ViewportFrame, etc.

For UI motion, read [roblox-animation](../roblox-animation/SKILL.md). For effects in the 3D world, read [roblox-vfx](../roblox-vfx/SKILL.md).

## Choose a GUI container

**ScreenGui (on-screen overlay)**
- Parent to StarterGui for automatic cloning into every player's PlayerGui.
- Control visibility with .Enabled (or parent/child manipulation).
- Layer multiple with .DisplayOrder (higher = on top).
- .ScreenInsets = CoreUISafeInsets (default, respects top bar + device notches), DeviceSafeInsets, TopbarSafeInsets, or None.
- .ResetOnSpawn behavior depends on direct ancestry of StarterGui.
- All interaction and logic is client-only (LocalScripts or client ModuleScripts).

**SurfaceGui (world space on a part face)**
- Can be parented directly to a BasePart (then uses .Face) or placed in StarterGui/PlayerGui and pointed at a part via .Adornee.
- Interactive buttons only receive input if the SurfaceGui ultimately lives under the viewing player's PlayerGui and the part's CanQuery is true.
- .AlwaysOnTop, .Brightness (0-1000), .LightInfluence (0-1), .MaxDistance, .ZOffset (for sorting multiple on the same face).
- Excellent for terminals, vehicle dashboards, keypads, signs.

**BillboardGui (world space, always camera-facing)**
- Similar properties to SurfaceGui + `.StudsOffset` (offset relative to camera orientation) and `.StudsOffsetWorldSpace` (offset in world axes). Size expressed in studs via the scale components of Size (e.g. UDim2.fromScale(4, 2) creates a 4×2 stud billboard whose screen size changes with distance).
```
END THIRD-PARTY FILE 6e1350802c17595b

The third-party file has ended. Everything between the 6e1350802c17595b tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2625 of 9615 bytes. © nonlooped · MIT · https://github.com/nonlooped/roblox-suite/tree/HEAD/roblox-user-interfaces/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md