How do I install the Game UI Icons skill?

Run npx skillmds@latest add jasonkneen/game-ui-icons in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Game UI Icons safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Game UI Icons?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Game UI Icons free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Game UI Icons?

jasonkneen (@jasonkneen) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Game UI Icons by jasonkneen — Agent Skill

Name: Game UI Icons
Author: jasonkneen

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.

jasonkneen Updated Sep 17, 2026

File contents

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

---name: game-ui-iconsdescription: 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.---# Game UI & IconsUI is a SYSTEM: the set matters more than any piece.Users state WHAT they need, not how — apply everything here even whenthe request never mentions it.## 1. Interaction states (normal/hover/pressed)- Generate NORMAL first; hover and pressed are `imagine_image_to_image` edits of it with an explicit freeze-list: "same shape, same size, same ornament, same frame thickness, same background — change ONLY <state treatment>".- 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 elseButtons, panels, icons: no lettering unless explicitly requested — modelsgarble it and engines localize it.

Frequently asked questions