threejs-game-ui-designer

어떤 스킬인가요?

Design premium Three.js game UI: HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

interface:
  display_name: "Three.js Game UI Designer"
  short_description: "Design premium Three.js game UI"
  default_prompt: "Use $threejs-game-ui-designer to improve this game's interface and check the affected states on its target viewports."

# Game UI Patterns

Build the game interface, not a web dashboard.

## Hierarchy and states

Order: survival/status → objective/progress → immediate feedback → flavor. Reach for meters, icons, reticles, badges, alert strips, cooldown rings, inventory slots, minimaps, diegetic labels, and compact clusters before generic stat cards. UI stays outside the play path and clear of threats, pickups, the player, and the next decision, and it carries the world's art direction through material cues, color roles, icon shapes, and motion.

Inventory the states before designing: gameplay HUD, pause/resume, settings (audio/accessibility) when useful, fail/retry, win or milestone, loading/empty/error when assets load async, touch controls when mobile is in scope, and debug UI gated separately. A premium game has more than one HUD state.

Where an icon, affordance, or direct interaction can carry the meaning, use it instead of text explaining an obvious control.

## HUD composition

Zones: top-left for objective, wave, distance, timer, route · top-right for score, currency, combo, inventory, pause · bottom corners for touch movement and action controls · center-top or near-player for short event banners, combos, warnings · near-world for diegetic prompts, target markers, offscreen indicators.

- Fixed-width numeric containers for score, timer, ammo, speed, health, best — values that change width shift layout mid-play.
- Icons plus short labels for unfamiliar resources; meter fills for quantities read at a glance.
- Consistent alert colors across danger, reward, shield, boost, objective, disabled.
- Brief state animation: count-up, meter fill, pulse, slide, snap, ring cooldown.
- Never stack multiple large banners over the play path.

## Menus and overlays

Primary action first (resume, retry, continue, next), then secondary (settings, quit, restart, level select). Restrained panels with meaningful geometry, borders, ticks, glow accents, and material cues — not nested cards or a marketing hero layout inside a game. Icon buttons for pause, sound, restart, fullscreen, settings. Focus, hover, pressed, and disabled states on everything interactive. Debug panels sit behind a dev flag or query param.

## Touch controls

- Pointer events, emitting the same game intents as keyboard and mouse.
- Handle `pointerup`, `pointercancel`, `lostpointercapture`, blur, and visibility change — a missed cancel leaves a control stuck down.
- Safe-area insets; touch targets around 44 CSS pixels; adjacent controls separated enough to prevent mispresses.
- `touch-action` scoped to control regions and the game surface, so page scroll cannot steal input.
- Controls clear of HUD warnings and the play path.

## Responsive constraints

Stable dimensions from CSS variables, `clamp`, grid tracks, fixed icon slots, and fixed-width numerals. Don't scale text purely with viewport width, and avoid negative letter spacing. Check desktop, laptop, narrow tablet, and phone, using the longest likely values — high score, long labels, multi-digit timers. Nothing clipped, overlapping, unreadably small, or shifting as values change; menus stay reachable on every viewport.

## Style and cohesion

Match the genre: arcade racers need speed and status readability, fighters need health/round/impact hierarchy, exploration needs inventory and objective clarity. A limited status palette over neutral surfaces. Connect UI motifs to world decals, faction marks, vehicle panels, pickups, and hazards. One-note purple/blue gradient UI needs a reason from the game world.

## Generated 2D assets

`threejs-image-generator` covers what hand-coded CSS and icons cannot: faction logos, team crests, title marks; pickup/ability/weapon/inventory/achievement/objective icons; hazard signs, decals, lane glyphs, cockpit labels, item badges; menu, loading, and background plates; GUI material references such as glass panels, metal frames, holographic strips, parchment, tactical screens.

`threejs-3d-generator` is for UI that needs a real 3D object — rotating character preview, vehicle garage, weapon inspect, trophy, diorama, diegetic menu prop.

## State wiring

UI reads from a single source of truth and dispatches intents rather than mutating simulation internals. It updates on pause, restart, resize, orientation, mute, fail/win, score, health, boost, combo, inventory, and accessibility changes — with no stale values after a restart.

## Recurring failures

Generic stat-card HUD · nested cards and oversized decorative panels · UI covering threats, pickups, player, or the next decision · text explaining controls that should have been designed as affordances · ignored safe areas · touch controls that look right but emit nothing · layout shifting as values change · debug UI shipped as player UI.

---
name: threejs-game-ui-designer
description: "Design premium Three.js game UI: HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion."
---

# Three.js Game UI Designer

Make game UI intentional, readable, responsive, and specific to the genre.

Preserve the user's requested scope and style. For a narrow HUD fix, retain the existing design and check the changed state and target viewports. For a complete UI pass, use the full workflow below. Mobile input is required when mobile is a target, not because a desktop-only game has UI.

## Reference

`references/ui-patterns.md` — hierarchy and required states, HUD zones, menus, touch controls, responsive constraints, style cohesion, and state wiring. Read it before designing HUDs, menus, overlays, touch controls, or responsive layout.

Load `threejs-image-generator` when logos, icons, GUI art, faction marks, menu backgrounds, or 2D HUD assets would raise the quality. `threejs-3d-generator` only for genuine 3D menu objects and diegetic props, not flat HUD elements.

## Workflow

1. Capture desktop and mobile screenshots of what exists.
2. Inventory the UI states: gameplay, pause, settings, fail and retry, win or milestone, loading, touch controls.
3. Set the hierarchy: survival and status, then objective, then feedback, then flavor.
4. Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
5. Use stable dimensions, safe-area padding, text-fit constraints, and hover/pressed/focus/disabled states.
6. Wire UI to game state rather than duplicating game rules inside UI code.
7. Check text fit and overlap with the longest likely values, safe areas, touch targets, and real state changes on both viewports.

## What goes wrong

A generic dashboard of stat cards · UI covering the player, threats, or the next decision · text that shifts and clips on mobile · decorative panels that reduce readability · touch controls that look right but emit no intents.

## Report

UI intent and states covered, files changed, target-viewport screenshots, text-fit and overlap findings, safe-area and touch-target evidence where applicable, and remaining risks. Feed these results into the lead's consolidated pass rather than rerunning unchanged game-wide checks.