# Game UI Workflow

Design and implement game HUDs, menus, icons and portrait systems from visual proposals...

- Repository: https://github.com/witnesstodark/mr-mak-workspace (642 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add witnesstodark/mr-mak-workspace --skill game-ui-workflow -g -a claude-code -y`
Codex: `npx skills add witnesstodark/mr-mak-workspace --skill game-ui-workflow -g -a codex -y`
Cursor: `npx skills add witnesstodark/mr-mak-workspace --skill game-ui-workflow -g -a cursor -y`
Gemini CLI: `npx skills add witnesstodark/mr-mak-workspace --skill game-ui-workflow -g -a gemini-cli -y`

## Description

Design and implement game HUDs, menus, icons and portrait systems from visual proposals through reusable engine assets and input checks. Use when a game interface needs a coherent visual and behavior contract.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Game UI workflow

Inspect the current game camera, input rules, UI framework and representative
screens. Reuse the project's selected visual language and framework. Establish
the information and actions the player needs before generating decorative art.

## Design against real gameplay

Use a native game capture as the context for a proposal. Keep it intact when
comparing HUD alternatives, so changing the background cannot disguise contrast
or obstruction. Define shared surface, type, spacing and selection tokens;
preserve semantic colours for ownership, health, danger and accepted choices.

Separate visual art from live data. Decide which values come from runtime state,
which actions dispatch existing commands and what remains unimplemented. Show
unavailable data honestly instead of inventing a currency, timer or gameplay rule.
Include hover, selected, disabled, empty and overflow states when relevant.

Review the actual interface scale and aspect ratios. Corner anchors, minimum
sizes, long labels and compact rosters should remain usable at a narrow viewport.
Test the intended selection/grouping rules; unit type and team may be independent
keys. A combined health display and a range of differing stats are different data.

## Prepare reusable assets

Keep approved art and source masters, with stable asset IDs and a manifest of
source paths/hashes. Export icons at their intended display scale. Check alpha
edges on light/dark backgrounds, shared optical weight and silhouette readability.
For stretchable panels, identify border regions explicitly; verify corners at
several sizes before choosing nine-slicing or another rendering approach.

The rest: https://github.com/witnesstodark/mr-mak-workspace/blob/HEAD/.agents/skills/game-ui-workflow/SKILL.md