roblox-ui Checked

an up tweens and

connections when the screen closes or is replaced.

8. **Verify the real interface.** Use Device Emulator and Controller Emulator. Test desktop,

narrow portrait, mobile landscape, tablet-like, and console/gamepad; then respawn. Record

clipping, overlap, text, scroll, safe-area, focus path, touch target, and lifecycle results.

Production structure

StarterGui
└── InventoryGui (ScreenGui; ResetOnSpawn = false)
    ├── Root (Frame)
    │   ├── Header
    │   ├── Content
    │   │   ├── CategoryList
    │   │   ├── ItemGrid (ScrollingFrame)
    │   │   └── DetailsPanel
    │   └── Footer
    └── InventoryController (LocalScript)
ReplicatedStorage
└── UI
    ├── Components
    └── Theme

Names describe roles, not colors or temporary positions. Keep repeated item cells as templates or

components, but keep the authored shell visible in Explorer.

Patterns

### Layout that survives content and viewport changes

-- Authored properties on ItemGrid (ScrollingFrame):
--   AutomaticCanvasSize = Enum.AutomaticSize.Y
--   CanvasSize = UDim2.fromOffset(0, 0)
-- Children: UIPadding + UIGridLayout
local grid = itemGrid.UIGridLayout
local projectBreakpoint = 700 -- derive from where this composition stops being usable

local function applyComposition()
    local narrow = root.AbsoluteSize.X < projectBreakpoint
    categoryList.UIListLayout.FillDirection = if narrow
        then Enum.FillDirection.Horizontal
        else Enum.FillDirection.Vertical
    categoryList.Size = if narrow
        then UDim2.new(1, 0, 0, 40)
        else UDim2.new(0, 148, 1, 0)
    itemGrid.Position = if narrow then UDim2.fromOffset(0, 52) else UDim2.fromOffset(164, 0)
    itemGrid.Size = if narrow
        then UDim2.new(1, 0, 1, -52)
        else UDim2.new(0.58, -164, 1, 0)
    detailsPanel.Visible = not narrow -- open details as a separate narrow-screen state

    local width = itemGrid.AbsoluteSize.X
    local columns = if width < 520 then 2 elseif width < 820 then 3 else 4
    local gap = 12
    local usable = width - itemGrid.UIPadding.PaddingLeft.Offset
        - itemGrid.UIPadding.PaddingRight.Offset - gap * (columns - 1)
    grid.CellSize = UDim2.fromOffset(math.floor(usable / columns), 112)
    grid.CellPadding = UDim2.fromOffset(gap, gap)
end

root:GetPropertyChangedSignal("AbsoluteSize"):Connect(applyComposition)
applyComposition()

Use UIListLayout for one-dimensional flow, UIGridLayout for uniform cells, and

UITableLayout only when row/column alignment is truly tabular. AutomaticSize fits content;

AutomaticCanvasSize fits scroll content. Bound extremes with UISizeConstraint,

UIAspectRatioConstraint, or UITextSizeConstraint rather than one global UIScale guess.

### One activation path and explicit gamepad entry

local GuiService = game:GetService("GuiService")
local RunService = game:GetService("RunService")
local UserInputService = game:GetService("UserInputService")

local function openInventory()
    root.Visible = true
    task.spawn(function()
        RunService.RenderStepped:Wait() -- selection must be rendered and selectable
        if root.Visible and (UserInputService.GamepadEnabled
            or (UserInputService.KeyboardEnabled and not UserInputService.TouchEnabled)) then
            GuiService.SelectedObject = firstItemButton
        end
    end)
end

local function closeInventory()
    GuiService.SelectedObject = nil
    root.Visible = false
end

firstItemButton.Activated:Connect(function()
    selectItem(firstItemButton:GetAttribute("ItemId"))
end)

Prefer Activated over separate mouse/touch handlers. Set NextSelectionUp/Down/Left/Right

when automatic navigation is ambiguous, especially around grids, sidebars, and modals. A modal

must trap focus inside itself and restore a sensible selection when it closes.

For cross-device action binding, the Input Action System (InputContext/InputAction/

InputBinding) is the modern edit-time layer; see references/input-navigation.md.

Inspect Roblox's default selection adornment in context. If it overwhelms the interface, assign a

project-owned SelectionImageObject or selected-state treatment; keep it visible, valid, and

restrained rather than disabling focus feedback.

### State transition without animation noise

local TweenService = game:GetService("TweenService")
local GuiService = game:GetService("GuiService")
local fade = TweenInfo.new(0.14, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local function setPanelVisible(visible: boolean)
    panel.Visible = true -- panel is a CanvasGroup
    if GuiService.ReducedMotionEnabled then
        panel.GroupTransparency = if visible then 0 else 1
    else
        TweenService:Create(panel, fade, {
            GroupTransparency = if visible then 0 else 1,
        }):Play()
    end
    if not visible then
        task.delay(fade.Time, function()
            if panel.GroupTransparency == 1 then panel.Visible = false end
        end)
    end
end

Animate a panel or state boundary once. Do not independently bounce every descendant.

Visual quality gates

• Establish hierarchy through size, weight, contrast, grouping, and whitespace before adding

decoration. Use a small spacing scale and align to it.

• Preserve the game's fonts, palette, icons, radii, and strokes. If none exist, define a compact

token module; do not improvise per component.

• Use corners where the material/form calls f