Catalog
fairoosansar-coder/game-ui-icons

fairoosansar-coder

game-ui-icons

Deep guide for game UI assets: buttons with interaction states, panels, bars, wordmark logos, and icon sets. Use whenever generating game UI elements, HUD assets, inventory icons, icon sets, buttons, or title logos. Complements game-asset-core.

v1.0LATEST
NewUpdated Oct 29, 2026

Game UI & Icons

UI is a SYSTEM: the set matters more than any piece. Users state WHAT they need, not how — apply everything here even when the request never mentions it.

1. Interaction states (normal/hover/pressed)

  • Generate NORMAL first; hover and pressed are image_edits of it with an explicit freeze-list: "same shape, same size, same ornament, same frame thickness, same background — change ONLY ".
  • Standard treatments: hover = subtle outer glow / slight brighten; pressed = darker + inset/inner shadow. States must be distinguishable at a glance AND identical in geometry — overlay-compare: outlines should coincide, frame thickness included.

2. Icon sets

  • One style contract for the whole set, decided before generating: same stroke weight, same fill treatment (all outlined OR all solid — never mixed), same palette family, same padding, same background, same visual weight. Verify the set side by side; one icon with a different treatment (e.g. sitting in a filled tile while others float) fails the SET even if it's individually fine.
  • Generate icon 1, then edit-chain the rest from it to inherit the contract.
  • Each icon must read at 32px: squint-test the thumbnail.

3. Panels, bars, wordmarks

  • Panels/dialogs: blank, text-ready, borders that survive 9-slicing (uniform edges, ornament concentrated in corners).
  • Bars: clear frame vs fill separation; fill design must work at any percentage.
  • Wordmark logos: image models garble text — generate, then READ THE TEXT BACK letter by letter; any wrong/merged/extra letter = retry. Deliver as an isolated asset on flat/keyable background, not a full scene, unless a title SCREEN is requested.

4. No text anywhere else

Buttons, panels, icons: no lettering unless explicitly requested — models garble it and engines localize it.

Overall Score

78/100

Grade

B

Good

Grades are signals, not a certification. Always review a skill yourself before use.

Safety

92

Quality

72

Clarity

82

Completeness

68

Summary

A specialized guidance document for generating game UI assets, focusing on interaction states, icon sets, panels, and wordmarks. The skill provides a cohesive system-level approach to UI design with emphasis on consistency, visual hierarchy, and proper use of image generation and editing tools to create game HUD elements.

Detected Capabilities

image generationimage editingasset creationUI design guidancevisual consistency validation

Trigger Keywords

Phrases that agents use to match this skill to user intent.

game UI buttonsicon set designHUD assetsgame panel designinteraction stateswordmark logoUI consistencybutton hover states

Use Cases

  • Generate button states (normal, hover, pressed) for game interfaces
  • Create consistent icon sets with unified visual treatment and style contracts
  • Design UI panels and dialog boxes with proper 9-slice borders for scalability
  • Develop progress bars and status indicators that scale correctly at any fill percentage
  • Create wordmark and title logos with verified text accuracy for games
  • Build complete HUD asset libraries with cohesive visual language

Quality Notes

  • Clear system-level thinking: emphasizes that UI is a set with unified rules, not isolated components
  • Practical workflow guidance: specifies generation order and edit-chain methodology to maintain consistency
  • Precise technical constraints: 32px readability, 9-slice borders, stroke weight uniformity prevent common design failures
  • Strong emphasis on validation: overlay-compare for geometry, squint-test for readability, text verification by letter
  • Good pedagogical structure: breaks down UI categories with specific requirements for each (buttons/icons/panels/bars)
  • Preventive guidance: explicitly warns against common LLM failures (text garbling, mixed icon treatments, inconsistent padding)
  • Context-aware scope: references complementary skill (game-asset-core) indicating awareness of skill ecosystem
  • One limitation: assumes user has access to image generation/editing tools; does not specify tool names or API integration patterns
  • Could enhance clarity with visual examples or side-by-side comparisons of correct vs incorrect icon sets
  • No explicit error recovery: does not state what to do if text verification fails repeatedly or set consistency check fails
Model: claude-haiku-4-5-20251001Analyzed: Oct 29, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Use fairoosansar-coder/game-ui-icons in your dev environment

Command Palette

Search for a command to run...