src-ui-skill

name	src-ui-skill
description	Work on garage, HUD, settings, mobile controls, transitions, and battle presentation UI.

claude-of-tanks / src/ui

Purpose

Present game and session state with fast, legible desktop/mobile interactions.

Mental model & key files

garage.js owns roster/loadout presentation; playMenu.js owns direct Solo, Private, LAN, and Ranked deployment; networkStatus.js owns reconnect feedback; hud.js owns live battle chrome; settings.js and touchControls.js own input-facing UI; transition.js, battleLoad.js, and endScreen.js own flow beats.

Patterns to follow / invariants

Consume canonical state rather than duplicating policy. Keep large/high-cost screens lazy. Preserve large touch targets and test desktop plus mobile.

Common tasks → first action

Inspect the live rendered surface, locate event/callback ownership, change the smallest screen module, then run its selftest and browser verification.

Gotchas

Several modules inject substantial CSS/DOM from JavaScript. Avoid boot-critical imports and do not leave XP/currency labels after progression removal.