Skip to content
Marketplace

threejs-game-ui-designer

by majidmanzarpour

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.

Overview

SKILL.mdRead at 8286774

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.

Files 3 files

Install it by hand

Deska runs this for you, for every agent you pick. To run it yourself in a terminal:

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

More from majidmanzarpour

  • threejs-3d-generatormajidmanzarpourGenerate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games via the Tripo API. Use for text-to-3D, image-to-3D, game-ready GLB/FBX, characters, creatures, buildings, props, weapons, terrain, auto-rigging, animation retargeting, model texturing, voxel/LEGO stylization, and low-poly conversion. Pair with threejs-image-generator for concept and texture references first.2,900 installs on skills.sh0
  • threejs-gameplay-systemsmajidmanzarpourBuild and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics, scoring, objectives, and game feel. Use for first playable slices, new Vite/TypeScript/Three.js setups, level/arena/track/wave/hole/puzzle design, combat encounters, difficulty tuning, and juice.2,700 installs on skills.sh0
  • threejs-aaa-graphics-buildermajidmanzarpourUpgrade Three.js games from prototype visuals to premium browser graphics: art-direction critique, procedural model building, material and texture libraries, world prop kits, shaders, VFX, lighting and render pipeline, LOD and instancing, render budgets, and a 10-category visual scorecard. Use when screenshots still look basic or the user asks for premium, AAA, high-fidelity, showcase, or less-basic graphics.2,600 installs on skills.sh0
  • threejs-debug-profilermajidmanzarpourDebug and profile Three.js browser games: blank canvases, render and runtime bugs, asset and audio loading, animation, resize, mobile input, plus performance profiling of draw calls, triangles, textures, memory, shader and post-processing cost, and bundle size.2,500 installs on skills.sh0
  • threejs-game-directormajidmanzarpourEntrypoint for building, upgrading, and finishing Three.js browser games. Routes work across the sibling threejs-* skills for gameplay, graphics, UI, 3D/image/audio asset generation, debugging, and release. Use for any request to build, upgrade, polish, or ship a Three.js game as a whole, at any scope from a small arcade prototype to a premium release.2,500 installs on skills.sh0
All skills by majidmanzarpour