Skills

Game UI Workflow

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

Install

npx skills add witnesstodark/mr-mak-workspace --skill game-ui-workflow -g -a claude-code -y
Category
Design
Updated
4d ago
License
MIT
Context cost
Lightabout 802 tokens
Runs scripts
No, instructions only

What it does

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.

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.

Read the whole SKILL.md on GitHub

More in Design