Skip to main content
skill CX Codex

game-ui-design — Claude Code skill: what it does, how to install

Provides game UI design guidelines for HUDs, inventory screens, and radial menus. Built around controller navigation, safe zones, and rapid readability during action.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add omer-metin/skills-for-antigravity --skill game-ui-design -a claude-code
Open on GitHub

What game-ui-design does

The skill instructs your coding agent on game UI architecture. It draws from Nintendo clarity, diegetic HUDs like Dead Space, and readability standards from esports titles. Screen space is treated as borrowed from the game world, with an explicit focus on controller-first input before keyboard or touch.

The setup relies on three reference files as strict domain truth. Creation workflows consult references/patterns.md. Diagnosing bugs uses references/sharp_edges.md, while input review checks references/validations.md. If a user prompt conflicts with these reference files, the agent is instructed to correct it.

Without the local files in references/, the skill cannot enforce its patterns. It forces you to respect TV safe zones and test layouts on weak target hardware rather than dev machines.

What it helps with

  • design a diegetic HUD optimized for gamepad navigation
  • structure radial menus and cooldown indicators for combat clarity
  • audit inventory layouts against TV safe zones
  • adapt UI elements for handheld displays and mobile touch targets

Example prompts for the agent

  • Design a radial ability selection menu optimized for controller thumbsticks
  • Review this inventory interface layout against references/validations.md
  • Create a diegetic health indicator for a third-person survival game

How to install game-ui-design

1Skills CLI (Vercel)

npx skills add omer-metin/skills-for-antigravity --skill game-ui-design -a claude-code

2Manually: put the files in place

~/.claude/skills/game-ui-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/game-ui-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about game-ui-design

How to install game-ui-design in Claude Code?

Run npx skills add omer-metin/skills-for-antigravity --skill game-ui-design -a claude-code. The command registers the skill directly into Claude Code.

What does the game-ui-design skill do?

It guides the agent in designing game HUDs, minimaps, health bars, and button prompts. It prioritizes controller navigation and instant readability in high-intensity gameplay.

Which reference files does the skill require?

It depends on three files: references/patterns.md for layout creation, references/sharp_edges.md for diagnosing risks, and references/validations.md for constraint checks.

Source text

SKILL.md · Apache-2.0
---
name: game-ui-design
description: World-class game UI design expertise combining the clarity of Nintendo's UI philosophy, the immersive diegetic interfaces of Dead Space and Metroid Prime, and the competitive readability principles from esports titles. Game UI is the invisible bridge between player intent and game response.  Great game UI serves the player without breaking immersion. It communicates critical information at a glance during intense action, guides new players without patronizing veterans, and adapts gracefully from 4K monitors to handheld screens and from keyboard to touch to controller. The best game UI designers understand that every pixel of screen space is sacred - borrowed from the game world itself. Use when "game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game tooltip, game-ui, hud, game-interface, game-menu, controller-ui, diegetic, game-design, accessibility, console, mobile-games" mentioned. 
---

# 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.

© omer-metin · Apache-2.0 · omer-metin/skills-for-antigravity

Similar skills

Everything for Design →

From the same set16

quantitative-research A systematic trading skill: it backtests a hypothesis, validates alpha signals and hunts for overfitting. Useful when a strategy looks great on history. CX Codex +1 2,700installs pixel-art-sprites Guides the assistant in drawing pixel sprites and game tilesets. Handy when designing 2D retro assets with strict palette limits. CX Codex +1 2,700installs technical-analysis A skill that puts your agent in the seat of a chart reader: candlesticks, levels, indicators, plus a demand for statistical backup before any signal is trusted. CX Codex +1 2,000installs 3d-modeling A skill that turns your agent into a senior 3D artist: topology, UV unwrapping, retopology and LOD advice. Useful when you prep a mesh for a game or film. CX Codex +1 1,200installs crypto-trading-bots A skill that gives your coding agent reference material on automated crypto trading: DEX snipers, arbitrage, MEV protection and anti-rug checks. CX Codex +1 917installs gamification-loops A skill for designing points, badges, streaks and leaderboards around motivation psychology. Useful when you want retention rather than raw numbers. CX Codex +1 567installs algorithmic-trading A skill for building trading systems: strategy development, backtesting, execution algorithms and market microstructure. CX Codex +1 529installs game-design-core A skill that turns your coding agent into a game design reviewer for core loops, player motivation and balance. Useful when you are shaping mechanics or writing a GDD. CX Codex +1 533installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor