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. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/ui-ux && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/ui-ux/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/ui-ux/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/ui-ux/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/ui-ux/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
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