Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "ui-ux" skill in my project. Repository: https://github.com/majiayu000/claude-skill-registry Please read the repo to find the SKILL.md file(s), then: 1. Download them into the correct skills directory (.claude/skills/ or .cursor/skills/) 2. Include any companion files referenced by the skill 3. Confirm what was installed and where
Description
Implements UI/UX systems including responsive design, animations, input handling, HUD elements, and menu systems. Use when building game interfaces, menus, HUDs, or any user-facing UI.
Roblox UI/UX Systems
When implementing UI systems, follow these patterns for responsive and polished interfaces.
Professional UI Design Consensus
Based on official Roblox documentation and community best practices, these are the key principles for professional Roblox UI design.
Mobile-First Design (Critical)
70%+ of Roblox players are on mobile devices. Design for mobile first, then scale up for desktop. `lua -- GOOD: Mobile-first sizing with Scale local button = Instance.new("TextButton") button.Size = UDim2.new(0.8, 0, 0.12, 0) -- 80% width, 12% height button.Position = UDim2.new(0.5, 0, 0.5, 0) button.AnchorPoint = Vector2.new(0.5, 0.5) -- BAD: Fixed pixel sizes don't scale local button = Instance.new("TextButton") button.Size = UDim2.new(0, 300, 0, 50) -- Looks tiny on mobile, huge on 4K `
Scale vs Offset Best Practices
| Use Case | Recommendation | |----------|----------------| | Main containers | Scale (0.8, 0) for responsiveness | | Padding/margins | Offset (0, 10) for consistent spacing | | Icon sizes | Offset with UISizeConstraint for crisp icons | | Text containers | Scale width, auto-height via TextBounds | | Buttons | Scale with UISizeConstraint min/max | `lua -- Hybrid approach: Scale with pixel constraints local panel = Instance.new("Frame") panel.Size = UDim2.new(0.6, 0, 0.7, 0) -- Responsive local sizeConstraint = Instance.new("UISizeConstraint") sizeConstraint.MinSize = Vector2.new(300, 400) -- Never too small sizeConstraint.MaxSize = Vector2.new(800, 900) -- Never too large sizeConstraint.Parent = panel `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster