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.
Resumen
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.
Archivos 3 archivos
Instálala a mano
Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designerMás de 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 instalaciones en 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 instalaciones en 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 instalaciones en 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 instalaciones en 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 instalaciones en skills.sh0
