mcpField
R
roblox-ui-implementation

roblox-ui-implementation

github.com/ashexplainedDesign & UI38123 installsUpdated 17w ago
Repository

About roblox-ui-implementation

A skill for implementing Roblox interfaces that adapt to screen sizes and reflect real game state. It requires an approved design brief and emphasizes server-side validation for valuable actions.

Key features

  1. 01Require an approved UI design brief
  2. 02Build responsive, touch-friendly layouts
  3. 03Separate client UI from server decisions
  4. 04Cover loading, error, and empty states
  5. 05Verify across device sizes

Use cases

  1. 01Implement mobile-first Roblox HUDs
  2. 02Build shops, upgrades, and reward panels
  3. 03Connect interface actions to game state
  4. 04Check UI behavior through playtests

MCP support

Describes a Roblox MCP build workflow using tools to find and inspect scripts and GUI instances, make edits, run the game, provide input, capture screens, and check console output.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ashexplained/roblox-skills --skill roblox-ui-implementation

After installing, type/roblox-ui-implementationin Claude Code to confirm it loaded.

Details

From the project README

Roblox UI Implementation

Goal

Build Roblox UI that is readable, responsive, touch-friendly, and connected to real game state without trusting the client for valuable decisions.

Design Gate (read before building)

Do not improvise UI. Before building a non-trivial surface, read its approved design brief:

  • design/DESIGN.md — global palette, type scale, spacing, and patterns.
  • design/features/<feature-slug>/design.md — this surface's layout, states, and mobile/tablet/desktop behavior. It must say Status: approved.

If the brief is missing or still draft, stop and run roblox-game-ux to produce and approve it first (or get an explicit user override). Build every state the brief specifies — default, empty, loading, error, and permission/locked — not just the happy path, and match the mobile/tablet/desktop behavior it describes.

Architecture

  • Keep UI construction and state updates in client-side controllers.
  • Keep reward, purchase, inventory, and currency decisions on the server.
  • Put shared UI constants or formatting helpers in ReplicatedStorage.
  • Use remotes to request actions, not to grant value directly.
  • Separate HUD state, menu state, notification state, and input handling when the UI grows.

Layout Rules

  • Design phone-first.
  • Use UIScale, constraints, and anchors deliberately.
  • Keep important buttons away from corners and system gesture zones.
  • Use large tap targets and clear pressed/disabled/loading states.
  • Avoid text that can overflow in small buttons or compact panels.
  • Keep core HUD visible without blocking the playfield.

Common Surfaces

  • HUD: objective, currency, health/energy, progress, next reward.
  • Upgrade panel: current value, next value, cost, affordability.
  • Shop: optional offers, clear benefit, no first-session pressure.
  • Rewards: short celebration, visible delta, next goal.
  • Settings: audio, graphics/performance, input preferences.

MCP Build Workflow

  1. Locate UI scripts and GUI instances with script_search, script_grep, and search_game_tree.
  2. Read scripts with script_read and inspect GUI instances with inspect_instance.
  3. Use multi_edit for code changes or execute_luau for targeted GUI construction.
  4. Use start_stop_play, user_mouse_input, user_keyboard_input, and screen_capture to verify.
  5. Check get_console_output.

Verification

Confirm:

  • Text fits on mobile-sized screens.
  • Buttons have obvious affordances and state.
  • UI does not block first action.
  • Valuable actions are server-validated.
  • The built surface matches the approved design brief across mobile, tablet, and desktop, including empty/loading/error states.
  • No new console errors.

Next

Verify the surface with roblox-mobile-playtest and roblox-playtest-qa. If the UI drove new server actions, review the trust boundary with roblox-security-economy. Return to roblox-to-issues / roblox-game-development-lifecycle for the next slice.

Comments

Markdown supported