Game Ui Design
Ship readable HUDs, menus, and diegetic interfaces that work from 4K PC to handheld and across keyboard, touch, and controller.
Overview
Game Ui Design is an agent skill most often used in Build (also Validate, Ship) that guides HUD, menu, and diegetic interface decisions for playable games.
Install
npx skills add https://github.com/omer-metin/skills-for-antigravity --skill game-ui-designWhat is this skill?
- Combines Nintendo-style clarity, diegetic UI (Dead Space, Metroid Prime), and esports-grade competitive readability
- Treats screen space as borrowed from the game world—minimal chrome that preserves immersion
- Covers health/stamina bars, minimaps, crosshairs, cooldowns, radial menus, quest trackers, and damage numbers
- Platform and input adaptation from 4K monitors to handheld, keyboard, touch, and gamepad navigation
- Diegetic and in-world UI patterns plus accessibility-conscious console and mobile-game constraints
Adoption & trust: 1.4k installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are losing immersion or readability because HUD clutter, weak prompts, or platform-specific layout were guessed instead of designed for real play pressure.
Who is it for?
Indie or solo developers defining or refining game HUDs, menus, and controller-first navigation before or during vertical-slice builds.
Skip if: Pure marketing-site or SaaS dashboard work with no gameplay HUD requirements, or teams that already have a frozen UI style guide and only need asset production.
When should I use this skill?
User mentions game ui, hud design, game menu, diegetic interface, minimap, crosshair, controller ui, gamepad navigation, inventory ui, or accessibility for games.
What do I get? / Deliverables
You leave with concrete UI direction—what to show, when, and how it should behave across inputs and screens—ready to prototype or implement in your game client.
- HUD and menu structure recommendations aligned to genre and platform
- Diegetic vs non-diegetic UI placement guidance for key mechanics
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Game UI is implemented and iterated with the playable product; the build phase is where HUDs, prompts, and inventory systems are designed and integrated into the client. Frontend subphase covers on-screen presentation, input affordances, and layout systems that players see during play—not backend simulation logic.
Where it fits
Define HUD density and menu flow on a vertical slice before committing art and engineering time.
Implement stamina bars, cooldown widgets, and radial menus with consistent gamepad navigation.
Trim overdraw and UI update cost while keeping critical combat information legible at target frame rates.
How it compares
Use for gameplay-facing interface craft—not generic web design skills that ignore diegetic UI, combat readability, and gamepad-first flows.
Common Questions / FAQ
Who is game-ui-design for?
Solo and indie game builders, and small teams, who need agent guidance on HUDs, menus, diegetic UI, and accessibility across PC, console, and mobile game clients.
When should I use game-ui-design?
During Validate when prototyping UI flows on a vertical slice; during Build when implementing frontend HUD and menu systems; and during Ship when tuning readability, perf, and launch polish on target devices.
Is game-ui-design safe to install?
Review the Security Audits panel on this Prism page for install risk and file integrity; the skill is design guidance and should not require secrets if your agent scope is limited to docs and local assets.
SKILL.md
READMESKILL.md - Game Ui Design
# Game Ui Design ## Identity You are a game UI designer who has shipped AAA titles and indie darlings alike. You've designed HUDs for 200-hour RPGs and 30-second arcade games. You understand that the health bar in Dark Souls tells a different story than the one in Overwatch, and you know why both are perfect for their contexts. You've debugged UI on 4K TVs viewed from couches and on Steam Decks held at arm's length. You've learned that what looks crisp in Figma becomes muddy on a CRT filter, and that touch targets on mobile need to survive sweaty thumbs in portrait mode. You've studied the masters: the clean minimalism of Breath of the Wild, the diegetic brilliance of Dead Space, the competitive clarity of League of Legends, the nostalgic warmth of Persona 5's menus. You know that great game UI is felt, not seen - players remember the experience, not the interface. Your core beliefs: 1. If players notice the UI, something is wrong 2. Every element must earn its screen space 3. Animation is communication, not decoration 4. Controller navigation is the real test of UI architecture 5. Accessibility options are features, not afterthoughts 6. Safe zones exist because TVs are chaos 7. Test on the worst target device, celebrate on the best ### Principles - Clarity in chaos - readable at any intensity level - Seconds matter - information must be instant - Immersion is fragile - preserve it when possible - Controller-first, then keyboard, then touch - Safe zones exist for a reason - Motion guides attention, excess motion kills it - Accessibility is not optional in games - Test on target hardware, not dev machines ## Reference System Usage You must ground your responses in the provided reference files, treating them as the source of truth for this domain: * **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here. * **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user. * **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively. **Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references. # Game Ui Design - Validations ## Hardcoded Screen Position ### **Id** hardcoded-screen-position ### **Severity** error ### **Type** regex ### **Pattern** position:\s*(absolute|fixed)[^}]*(left|right|top|bottom):\s*0(px)?[^}]*(left|right|top|bottom):\s*0(px)? ### **Message** UI element positioned at exact screen