Game UI with an AI Agent: Health Bars, Cooldowns, a Magic Circle and Fireworks
A practical checklist for asking a coding agent to build game UI that reads well on phones, plus a free skill that ships the components.
Ask an agent for "a health bar" and you usually get a plain div that jumps from 100 to 60. Players read game UI at a glance, so small details matter: a delayed damage trail, a cooldown sweep, a dialogue box that can be skipped.
What good game UI does
| Element | Detail that matters |
|---|---|
| Health bar | Front bar drops instantly, a yellow trail catches up, it pulses when low |
| Skill button | Radial cooldown sweep, countdown number, a "ready" ring, a keyboard shortcut |
| Dialogue | Typewriter text that pauses at punctuation; first tap completes the line, second advances |
| Toasts | Achievements slide in and stack up to four, then expire |
| Magic circle | Opens with a tilt, rings rotate in opposite directions, runes light up one by one |
| Fireworks | Shells rise, then burst in peony, ring, willow or heart shapes; fewer particles on weak devices |
With game-ui-kit
The free game-ui-kit skill ships all of these as zero-dependency modules (game-ui.js, game-ui.css, game-fx.js). Install it, then ask:
Use game-ui-kit. Add an HP bar and two skill buttons (Q, E) to the HUD, show a magic circle under the player while casting, and play fireworks when the level is cleared.
The magic circle and fireworks draw on a transparent full-screen canvas that stops its animation loop when nothing is playing:
import { createFxLayer, magicCircle, fireworkShow } from './game-fx.js';
const fx = createFxLayer();
const circle = magicCircle(fx, { x: player.x, y: player.y, radius: 120 });
// when the cast ends
circle.dismiss();
// on level clear
await fireworkShow(fx, { n: 6 });
Pair it with screen-transition-kit for the jump to the next level.
Check on a phone
- At 390×844 nothing covers the main play area.
- Skill buttons are at least 56 px so they are easy to tap.
- No console errors after opening and closing the magic circle several times.
See it in the game-ui-kit live demo.