game-ui-design
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
- Installs
- 3.9K
- Last 24h
- +19
- Trending rank
- #6066
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/omer-metin/skills-for-antigravity --skill game-ui-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads game-ui-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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:
- If players notice the UI, something is wrong
- Every element must earn its screen space
- Animation is communication, not decoration
- Controller navigation is the real test of UI architecture
- Accessibility options are features, not afterthoughts
- Safe zones exist because TVs are chaos
- 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.
FAQ
What does the game-ui-design skill do?
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
How do I install game-ui-design?
Run npx skills add https://github.com/omer-metin/skills-for-antigravity --skill game-ui-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/game-ui-design/ (personal) or .claude/skills/game-ui-design/ (project).
Which AI agents can use game-ui-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is game-ui-design safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer flagged items to review; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains game-ui-design?
It is published by omer-metin in omer-metin/skills-for-antigravity. It has 3,923 recorded installs.
More from omer-metin/skills-for-antigravity
pixel-art-sprites
omer-metin/skills-for-antigravity
Specialist in pixel art creation, sprite animation, and limited palette designUse when "pixel art, sprites, sprite sheet, sprite animation, retro game art, 8-bit, 16-bit, character sprites, tile art, pixel animation, aseprite, pixel-art, sprites, animation, game-art, retro, indie-games, 2d-graphics, sprite-sheets" mentioned.
quantitative-research
omer-metin/skills-for-antigravity
World-class systematic trading research - backtesting, alpha generation, factor models, statistical arbitrage. Transform hypotheses into edges. Use when "backtest, alpha, factor model, statistical arbitrage, quant research, systematic trading, mean reversion, momentum strategy, regime detection, walk forward, " mentioned.
technical-analysis
omer-metin/skills-for-antigravity
Master of price action, chart patterns, and technical indicators - combining classical Wyckoff/Dow theory with modern quantitative validation for edge identificationUse when "technical analysis, chart pattern, indicator, RSI, MACD, support resistance, trend, candlestick, price action, fibonacci, trading, technical-analysis, charts, indicators, price-action, patterns, support-resistance, trend-following" mentioned.
3d-modeling
omer-metin/skills-for-antigravity
Expert 3D modeling specialist with deep knowledge of topology, UV mapping, game-ready and film-ready pipelines, DCC tool workflows (Blender, Maya, ZBrush, 3ds Max, Houdini), retopology, LOD systems, and export pipelines. This skill represents years of production experience distilled into actionable guidance. Use when "3d model, 3d modeling, mesh topology, uv unwrap, uv mapping, retopology, retopo, low poly, high poly, subdivision, subdiv, edge flow, edge loops, polygon modeling, box modeling, hard surface, organic modeling, sculpting, zbrush, blender modeling, maya modeling, 3ds max, LOD, level of detail, game ready mesh, film ready, baking normals, high to low, fbx export, gltf export, texel density, 3d, modeling, topology, uv, game-dev, vfx, blender, maya, zbrush, retopology, lod, hard-surface, organic, sculpting" mentioned.
crypto-trading-bots
omer-metin/skills-for-antigravity
Comprehensive expertise in automated crypto trading systems, including DEX sniping bots, arbitrage strategies, MEV protection, Telegram trading bots, and anti-rug protection. Use when "trading bot, sniping bot, arbitrage bot, Telegram trading, DEX bot, MEV bot, copy trading, auto trading, token sniper, " mentioned.
gamification-loops
omer-metin/skills-for-antigravity
Expert in gamification mechanics - points, badges, streaks, progress bars, and the psychology that makes them work. Covers variable reward systems, progress mechanics, social competition, and ethical considerations. Knows how to create engagement without manipulation. Use when "gamification, points, badges, streaks, leaderboard, achievements, engagement, retention loop, " mentioned.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.