threejs-game-ui-designer

Name: threejs-game-ui-designer
Author: majidmanzarpour

910installs108forks

How to install threejs-game-ui-designer?

majidmanzarpour/threejs-game-skills/threejs-game-ui-designer

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Three.js Game UI Designer
2
3	## Purpose
4
5	Make game UI intentional, readable, responsive, and genre-specific.
6
7	## Workflow
8
9	Load `references/ui-patterns.md` as the first action when designing HUDs, menus, overlays, pause/win/lose screens, settings, touch controls, typography, responsive layout, safe areas, text fit, icons, or UI/world cohesion. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the UI phase complete while this reference is skipped for interface work.
10
11	Load `references/checklists/game-ui-quality.md`, `references/checklists/hud-readability.md`, and `references/checklists/responsive-ui-fit.md` before claiming UI/HUD/menu work is complete. Load `references/checklists/mobile-input.md` when touch controls or mobile safe areas are in scope.
12
13	Load `references/prompt-templates.md` only when the user asks for reusable prompts, a UI pass prompt, or a task template.
14
15	Load `threejs-image-generator` when logos, icons, GUI art, faction marks, menu backgrounds, decals, or 2D HUD assets would improve quality. Use `threejs-3d-generator` only for 3D menu/showcase objects or diegetic 3D UI props, not normal flat HUD elements.
16
17	1. Capture/inspect desktop and mobile screenshots.
18	2. Inventory UI states: gameplay, pause, settings, fail/retry, win/milestone, loading, touch controls.
19	3. Define hierarchy: survival/status, objective, feedback, flavor.
20	4. Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
21	5. Use stable dimensions, safe-area padding, text-fit constraints, hover/pressed/focus/disabled states.
22	6. Wire UI to game state, not duplicated rules.
23	7. Verify text fit, overlap, safe areas, touch targets, responsive screenshots, and real state changes.
24
25	## Common Failure Modes
26
27	- Generic dashboard/stat-card HUD.
28	- UI covers player/threats.
29	- Text shifts/clips on mobile.
30	- Decorative panels reduce readability.
31	- Touch controls look right but do not emit intents.
32
33	## Final Response
34
35	Report the reference ledger, UI state checklist, UI intent, states covered, files changed, screenshots, text-fit/overlap checks, safe-area/touch-target evidence, controls, and remaining risks.

People who liked this also viewed

6 picks

Type

threejs-game-ui-designer

910installs108forks

View on GitHub

How to install threejs-game-ui-designer?

majidmanzarpour/threejs-game-skills/threejs-game-ui-designer

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Three.js Game UI Designer
2
3	## Purpose
4
5	Make game UI intentional, readable, responsive, and genre-specific.
6
7	## Workflow
8
9	Load `references/ui-patterns.md` as the first action when designing HUDs, menus, overlays, pause/win/lose screens, settings, touch controls, typography, responsive layout, safe areas, text fit, icons, or UI/world cohesion. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the UI phase complete while this reference is skipped for interface work.
10
11	Load `references/checklists/game-ui-quality.md`, `references/checklists/hud-readability.md`, and `references/checklists/responsive-ui-fit.md` before claiming UI/HUD/menu work is complete. Load `references/checklists/mobile-input.md` when touch controls or mobile safe areas are in scope.
12
13	Load `references/prompt-templates.md` only when the user asks for reusable prompts, a UI pass prompt, or a task template.
14
15	Load `threejs-image-generator` when logos, icons, GUI art, faction marks, menu backgrounds, decals, or 2D HUD assets would improve quality. Use `threejs-3d-generator` only for 3D menu/showcase objects or diegetic 3D UI props, not normal flat HUD elements.
16
17	1. Capture/inspect desktop and mobile screenshots.
18	2. Inventory UI states: gameplay, pause, settings, fail/retry, win/milestone, loading, touch controls.
19	3. Define hierarchy: survival/status, objective, feedback, flavor.
20	4. Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
21	5. Use stable dimensions, safe-area padding, text-fit constraints, hover/pressed/focus/disabled states.
22	6. Wire UI to game state, not duplicated rules.
23	7. Verify text fit, overlap, safe areas, touch targets, responsive screenshots, and real state changes.
24
25	## Common Failure Modes
26
27	- Generic dashboard/stat-card HUD.
28	- UI covers player/threats.
29	- Text shifts/clips on mobile.
30	- Decorative panels reduce readability.
31	- Touch controls look right but do not emit intents.
32
33	## Final Response
34
35	Report the reference ledger, UI state checklist, UI intent, states covered, files changed, screenshots, text-fit/overlap checks, safe-area/touch-target evidence, controls, and remaining risks.

People who liked this also viewed

6 picks

Type