threejs-game-ui-designer
majidmanzarpour/threejs-game-skills
Design premium Three.js game UI: HUDs, menus, overlays, and responsive layouts for any genre.
What is threejs-game-ui-designer?
A Three.js game UI design skill for creating intentional, readable, and responsive user interfaces. Use it when building or refining game HUDs, menus, pause/win/lose screens, settings panels, touch controls, and ensuring UI cohesion across desktop and mobile viewports.
- Design HUDs, menus, overlays, and modal states with proper hierarchy and responsive layout
- Create touch-friendly controls and icon-based UI elements for mobile and desktop
- Implement text-fit constraints, safe-area padding, and state management (hover, pressed, focus, disabled)
- Wire UI to game state rather than duplicating game logic
- Validate text overlap, touch targets, and viewport-specific rendering on both desktop and mobile
- Ensure visual cohesion between UI style and game world aesthetic
How to install threejs-game-ui-designer
npx skills add https://github.com/majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer- Three.js project with existing game structure
- Understanding of game state management and viewport constraints
- Optional: threejs-image-generator for logos, icons, and 2D HUD assets
- Optional: threejs-3d-generator for genuine 3D menu objects only
How to use threejs-game-ui-designer
- 1.Capture desktop and mobile screenshots of the current UI state
- 2.Inventory all UI states: gameplay, pause, settings, fail/retry, win, loading, and touch controls
- 3.Define UI hierarchy: survival/status first, then objective, feedback, and flavor elements
- 4.Replace generic stat cards with authored clusters, meters, badges, icons, and alerts
- 5.Apply stable dimensions, safe-area padding, text-fit constraints, and interactive states
- 6.Wire UI elements to game state and validate text fit, overlap, and touch targets on both viewports
- 7.Generate a report covering intent, files changed, screenshots, and remaining risks
Use cases
- Building a complete UI pass for a new Three.js game across desktop and mobile
- Fixing a specific HUD element while preserving existing design and checking state changes
- Designing pause, settings, win/lose, and loading screens with proper state wiring
- Creating responsive touch controls and icon layouts for mobile gameplay
- Auditing existing UI for text fit, safe-area compliance, and touch-target sizing
- Game developers building Three.js games
- UI/UX designers working on game interfaces
- Developers targeting both desktop and mobile platforms
- Teams needing responsive, state-driven game UI systems
threejs-game-ui-designer FAQ
Load threejs-image-generator for logos, icons, GUI art, faction marks, and 2D HUD assets. Use threejs-3d-generator only for genuine 3D menu objects and diegetic props, not flat HUD elements.
Prioritize survival and status information first, then objective, then feedback, then flavor elements. This ensures critical gameplay information is always visible and readable.
Use text-fit constraints, validate the longest likely values, check safe areas, and test on real mobile viewports. The skill includes a workflow step specifically for this validation.
No. Wire UI to game state instead of duplicating game logic. This keeps UI and game logic synchronized and maintainable.
Validate text fit and overlap with longest values, safe areas, touch targets (minimum size), and real state changes on both desktop and mobile viewports.
Full instructions (SKILL.md)
Source of truth, from majidmanzarpour/threejs-game-skills.
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
- Capture desktop and mobile screenshots of what exists.
- Inventory the UI states: gameplay, pause, settings, fail and retry, win or milestone, loading, touch controls.
- Set the hierarchy: survival and status, then objective, then feedback, then flavor.
- Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
- Use stable dimensions, safe-area padding, text-fit constraints, and hover/pressed/focus/disabled states.
- Wire UI to game state rather than duplicating game rules inside UI code.
- 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.
Related skills
More from majidmanzarpour/threejs-game-skills and the wider catalog.
threejs-gameplay-systems
Build playable Three.js game systems with design briefs, core loops, physics, and tuning for browser games.
threejs-image-generator
Generate and edit 2D game assets for Three.js with Google's Gemini image API.
threejs-qa-release
QA and release verification for Three.js browser games with automated testing, visual regression, and risk reporting.
threejs-3d-generator
Generate game-ready 3D assets for Three.js via Tripo API: text-to-3D, image-to-3D, rigging, animation, and stylization.
notion-cli
CLI tool to interact with Notion API, manage workers, and upload files.
effect-best-practices
Enforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.