roblox-ui-mastery

Stars12

Forks3

UpdatedFebruary 28, 2026 at 17:58

Advanced Roblox UI engineering with React-Lua. Use when creating, modifying, or debugging any React-Lua UI component for Roblox games. Triggers: React-Lua, Roact, UI component, createElement, useState, useEffect, useSpring, Binding, animation, tween, spring, modal, panel, selector, tooltip, dropdown, tab, toast, notification, cooldown display, health bar, leaderboard, inventory UI, shop UI, HUD, overlay, popup, fade, slide, bounce, glow effect, shadow effect, gradient, responsive layout, mobile UI, gamepad UI, DesignSystem, tokens, theme, UI performance, memo, virtual scroll, Context API, useReducer, custom hook, BillboardGui, SurfaceGui, ViewportFrame, EditableImage, UIListLayout, UIGridLayout, UIFlexItem, UIDragDetector, Path2D, RichText, ScreenGui, CanvasGroup, UIStroke, UIGradient, UICorner. Tech stack: jsdotlua/react, ReactRoblox, react-spring (chriscerie/react-spring), Luau --!strict, Rojo, Wally.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

ohzw

ohzw/roblox-dev-skills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

9 files

SKILL.md

readonly

name	roblox-ui-mastery
description	Advanced Roblox UI engineering with React-Lua. Use when creating, modifying, or debugging any React-Lua UI component for Roblox games. Triggers: React-Lua, Roact, UI component, createElement, useState, useEffect, useSpring, Binding, animation, tween, spring, modal, panel, selector, tooltip, dropdown, tab, toast, notification, cooldown display, health bar, leaderboard, inventory UI, shop UI, HUD, overlay, popup, fade, slide, bounce, glow effect, shadow effect, gradient, responsive layout, mobile UI, gamepad UI, DesignSystem, tokens, theme, UI performance, memo, virtual scroll, Context API, useReducer, custom hook, BillboardGui, SurfaceGui, ViewportFrame, EditableImage, UIListLayout, UIGridLayout, UIFlexItem, UIDragDetector, Path2D, RichText, ScreenGui, CanvasGroup, UIStroke, UIGradient, UICorner. Tech stack: jsdotlua/react, ReactRoblox, react-spring (chriscerie/react-spring), Luau --!strict, Rojo, Wally.
metadata	{"internal":true}

Roblox UI Mastery Skill

React-Lua による本番品質の Roblox UI コンポーネント構築スキル。

Core Rules

--!strict 必須 — 全ファイル先頭に記載。関数引数・戻り値に型注釈。export type でProps定義
Binding = アニメーション、State = ロジック — 毎フレーム変化する視覚値は Binding（再レンダーなし）、構造に影響する値は State
DesignSystem トークン使用 — 色・スペーシング・フォントサイズ・角丸をハードコードしない
ResponsiveUI で全サイズ指定 — 生のピクセル値禁止。scaleValue() / scaleUDim2() を通す
useEffect は必ず cleanup — 接続・Tween・spawn したタスクは return 関数で切断
React.memo でリストアイテム — ループ内コンポーネントは必ず memo でラップ
useCallback でイベントハンドラ — memo された子に渡すコールバックは useCallback
実装前に制限を確認 — docs/roblox-ui-limitations.md を読んでから着手

Binding vs State 判断

値が毎秒1回以上変化する?
├── YES → 純粋に視覚的（位置/サイズ/透明度）?
│   ├── YES → Binding + Heartbeat/Tween
│   └── NO  → State（throttle検討）
└── NO  → State

Reference Docs

実装前に該当 doc を Read すること。推測で実装しない。

Doc	いつ読む
`docs/react-lua-animation.md`	アニメーション・トランジション
`docs/react-lua-state-management.md`	State > 2フィールド、共有State
`docs/react-lua-custom-hooks.md`	再利用ロジック、Robloxシグナル統合
`docs/react-lua-component-patterns.md`	複合コンポーネント、Portal、Render Props
`docs/react-lua-performance.md`	リスト > 20件、頻繁な更新、ジャンク
`docs/roblox-ui-limitations.md`	新規UI作業前に必ずスキム
`docs/roblox-ui-libraries.md`	ライブラリ評価・依存追加時
`docs/roblox-ui-responsive.md`	マルチデバイスUI、サイズ・位置

docs パスは .claude/skills/roblox-ui-mastery/ 配下。

プラットフォーム制約（クイックリファレンス）

NATIVE（そのまま使える）
  UIListLayout Flex, UIDragDetector, EditableImage, Path2D,
  カスタムフォント, RichText, タッチジェスチャー, ViewportFrame

WORKAROUND（docs参照）
  ドロップシャドウ → offset dark Frame
  グロー → UIStroke + 拡大半透明Frame
  放射グラデーション → EditableImage
  仮想スクロール → 手動Visible切替

IMPOSSIBLE（試みない）
  要素別ブラー、UIGradient on ScrollingFrame/TextBox、
  放射/円錐UIGradient、React.Suspense/lazy、回転要素のClipDescendants

More from this repository

same repository

building-3d-objects

ohzw/roblox-dev-skills

Build 3D objects, props, and room-scale structures in Roblox Studio via MCP. Use when: user asks to create, build, or place a single physical object — furniture, animals, vehicles, gates, towers, decorations, street props, room interiors, or any individual tangible structure. Triggers on: "○○を作って", "○○を置いて", "build me a ___", "create a ___", "make a ___" in the context of Roblox Studio. Also use when user mentions CSG, Union, Subtract, Part placement, or 3D modeling in Roblox. If the user is in a Roblox project and asks to "make" or "build" something physical, this skill should trigger even without explicit mention of "3D" or "Roblox". Scope boundary: applies if the result can be grouped into a single `Model`. For full maps, arenas, lobbies, hubs, or multi-zone environments → use building-maps instead. Dispatch rule: When the user requests multiple related/variant objects (e.g., "5 types of swords", "3 chair styles"), dispatch ALL variants to a SINGLE agent. Do NOT spawn parallel agents. Consistency requires

2026-03-0212

roblox-build-retrospective

ohzw/roblox-dev-skills

Retrospective analysis skill for Roblox 3D object building sessions. It analyzes what worked, what failed, and why, then feeds validated learnings back into roblox-object-builder docs. Trigger after Roblox builds that create or modify Parts, Models, CSG, or map elements via mcp__roblox__run_code, and when users request review keywords such as "振り返り", "retrospective", "what went wrong", or "analyze the result".

2026-02-2812

building-maps

ohzw/roblox-dev-skills

Build maps, areas, zones, and large-scale environments in Roblox Studio via MCP. Use when: user asks to create a map, battle arena, lobby, hub, town, village, open area, game world, level design, or any environment that spans multiple zones or regions. Triggers on: "マップを作って", "エリアを作って", "フィールドを作りたい", "build a map", "create an arena", "make a lobby", "design a level", "make a hub world", "create a town", or any request involving spatial layout, zone planning, or multi-area environments. Scope boundary: applies to multi-zone layouts. For a single object, prop, or room interior → use building-3d-objects instead.

2026-02-2812

roblox-design-consultant

ohzw/roblox-dev-skills

Interactive design consultant for Roblox objects. Use when the user's request is abstract or lacks structural details. This agent specializes in extracting requirements through dialogue BEFORE any implementation begins. Triggers on: abstract requests like "make a kitchen", "build something cool", or when building-3d-objects detects fatal ambiguity.

2026-02-2812

name	roblox-ui-mastery
description	Advanced Roblox UI engineering with React-Lua. Use when creating, modifying, or debugging any React-Lua UI component for Roblox games. Triggers: React-Lua, Roact, UI component, createElement, useState, useEffect, useSpring, Binding, animation, tween, spring, modal, panel, selector, tooltip, dropdown, tab, toast, notification, cooldown display, health bar, leaderboard, inventory UI, shop UI, HUD, overlay, popup, fade, slide, bounce, glow effect, shadow effect, gradient, responsive layout, mobile UI, gamepad UI, DesignSystem, tokens, theme, UI performance, memo, virtual scroll, Context API, useReducer, custom hook, BillboardGui, SurfaceGui, ViewportFrame, EditableImage, UIListLayout, UIGridLayout, UIFlexItem, UIDragDetector, Path2D, RichText, ScreenGui, CanvasGroup, UIStroke, UIGradient, UICorner. Tech stack: jsdotlua/react, ReactRoblox, react-spring (chriscerie/react-spring), Luau --!strict, Rojo, Wally.
metadata	{"internal":true}

Roblox UI Mastery Skill

React-Lua による本番品質の Roblox UI コンポーネント構築スキル。

Core Rules

--!strict 必須 — 全ファイル先頭に記載。関数引数・戻り値に型注釈。export type でProps定義
Binding = アニメーション、State = ロジック — 毎フレーム変化する視覚値は Binding（再レンダーなし）、構造に影響する値は State
DesignSystem トークン使用 — 色・スペーシング・フォントサイズ・角丸をハードコードしない
ResponsiveUI で全サイズ指定 — 生のピクセル値禁止。scaleValue() / scaleUDim2() を通す
useEffect は必ず cleanup — 接続・Tween・spawn したタスクは return 関数で切断
React.memo でリストアイテム — ループ内コンポーネントは必ず memo でラップ
useCallback でイベントハンドラ — memo された子に渡すコールバックは useCallback
実装前に制限を確認 — docs/roblox-ui-limitations.md を読んでから着手

Binding vs State 判断

値が毎秒1回以上変化する?
├── YES → 純粋に視覚的（位置/サイズ/透明度）?
│   ├── YES → Binding + Heartbeat/Tween
│   └── NO  → State（throttle検討）
└── NO  → State

Reference Docs

実装前に該当 doc を Read すること。推測で実装しない。

Doc	いつ読む
`docs/react-lua-animation.md`	アニメーション・トランジション
`docs/react-lua-state-management.md`	State > 2フィールド、共有State
`docs/react-lua-custom-hooks.md`	再利用ロジック、Robloxシグナル統合
`docs/react-lua-component-patterns.md`	複合コンポーネント、Portal、Render Props
`docs/react-lua-performance.md`	リスト > 20件、頻繁な更新、ジャンク
`docs/roblox-ui-limitations.md`	新規UI作業前に必ずスキム
`docs/roblox-ui-libraries.md`	ライブラリ評価・依存追加時
`docs/roblox-ui-responsive.md`	マルチデバイスUI、サイズ・位置

docs パスは .claude/skills/roblox-ui-mastery/ 配下。

プラットフォーム制約（クイックリファレンス）

NATIVE（そのまま使える）
  UIListLayout Flex, UIDragDetector, EditableImage, Path2D,
  カスタムフォント, RichText, タッチジェスチャー, ViewportFrame

WORKAROUND（docs参照）
  ドロップシャドウ → offset dark Frame
  グロー → UIStroke + 拡大半透明Frame
  放射グラデーション → EditableImage
  仮想スクロール → 手動Visible切替

IMPOSSIBLE（試みない）
  要素別ブラー、UIGradient on ScrollingFrame/TextBox、
  放射/円錐UIGradient、React.Suspense/lazy、回転要素のClipDescendants