Menus, HUD and screens for web games

The UI is the first thing players see and what they touch between every round. This skill covers its look, the screens and how they flow, and the HUD. It is guidance: build it with the game's own UI technology. The settings screen follows the same principles.

Build order

1. A direction (references/style.md): fonts, palette, shapes and motion that fit the game's world, written down as theme tokens before any screen is built. Offer the developer two or three directions to pick from.
2. The screen stack (references/screens.md): title, pause, results, how-to-play, credits, modals and toasts, with one place that routes Esc, back and focus.
3. The HUD (references/hud.md): only what the player needs while playing, placed by priority, clear of the Harmony badge and phone safe areas.
4. Polish: transitions, sounds, small motion on interaction, and a pass at phone width, with a controller, and with text at 150%.
5. Check and hand over (below).