agentleFS
Sign inStart free
F0rger123F0rger123/CLAUDE-DESIGN-GOD-MODE/skills/game-ui/SKILL.md

game-ui

Skill1 starsChanged 20 days agoMITView on GitHub

Use when designing or upgrading the interface of a browser or mobile game (Play mode) - title screens, menus, HUDs, scoreboards, settings, pause and game-over screens, shops, and the "juice" (feedback, screen shake, particles, sound cues) that makes play feel good. Works with DOM/CSS overlays, Canvas, Phaser, PixiJS and Three.js.

3 other projects use a version of this.

Adopted by

Most recently taken up by

  • Other versions3 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 3

    1. colinurbs/claude-modeling-skills★ 14same name
    2. poorvith-mp/skills-gamedev★ 4same name
    3. AlomoesDataScience/claude-skills★ 1same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository10 other files it gives its agents.

The file

We split this skill into the rules it gives an agent

4 rules. 0 are common, 3 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 3 edited versions we read keep these.

  • 3

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Write it before touching code: era/genre + material + palette + type.

    line 11
  2. Very specific:

    HUD: only what the player needs right now.

    line 16
  3. Distinctive:

    Use in layers, scaled to the event's importance:

    line 22
  4. Distinctive:

    Every input gets an instant response (under 50ms): press scale, sound, flash.

    line 23

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Game UI (Play mode)

Players read the UI at speed, mid-action. Legibility first, personality second, both always.

Art direction in one line

Write it before touching code: era/genre + material + palette + type. Example: "1980s arcade cabinet, glossy plastic, deep violet with sun yellow, condensed sport type". Every screen follows it.

Screens

  • Title: game name large, one obvious Play button (keyboard focus on it by default), secondary items smaller. Show the game moving behind it if possible.
  • Menus: vertical lists with a strong selected state (scale 1.05 + colour + marker). Work with mouse, touch, keyboard arrows/Enter and gamepad if supported. Esc/back always works.
  • HUD: only what the player needs right now. Corners and edges, never the centre of the action. Score/time/health readable at a glance: big tabular numbers, high contrast, a dark backing plate or outline when over busy scenes.
  • Pause: dims and blurs the game, freezes time, Resume is the default focus.
  • Game over / results: the result first (score, rank, new best), then Retry as the primary action (fastest path back in), then Menu.
  • Settings: volume sliders (music/effects separate), controls, reduced motion/flash toggle, colour-blind friendly option if colour carries meaning.

Juice (feedback that makes it feel good)

Use in layers, scaled to the event's importance:

  • Every input gets an instant response (under 50ms): press scale, sound, flash.
  • Hits/scores: number pop (scale 1.4 → 1, 150ms), short screen shake (2-6px, under 200ms), particles, a sound.
  • Big moments (level up, win): hit-stop (40-80ms freeze), bigger shake, colour flash, a fanfare. Use rarely so they stay big.
  • Counters roll up rather than jump. Health bars lag a ghost bar behind the real value.
  • Respect prefers-reduced-motion and a settings toggle: drop shake and flashes, keep sound and colour feedback.

Type and colour

  • Display font with character for titles; a clean, wide, legible font for numbers and body. Numbers always tabular-nums.
  • Text over the scene: outline (-webkit-text-stroke or text-shadow in 4 directions) or a backing plate. Never rely on the scene's colour.
  • Team/state colours must differ in brightness too, not hue alone.

Technical

  • DOM overlay on top of the canvas for menus and text: sharper text, accessibility, easier styling. Keep the HUD's DOM small and update with transform/textContent, not layout-changing properties.
  • Scale UI with the viewport (clamp(), or a UI scale setting). Test 390px portrait and landscape.
  • Touch targets 48px+, with thumb-zone placement on phones (bottom corners).
  • Preload UI fonts and sounds; first interaction unlocks audio.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free