majidmanzarpour/threejs-game-skills

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.

查看源码
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

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.

来自同一仓库

更多 Skills

全部 Skills
majidmanzarpour
社区

threejs-3d-generator

Generate, 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.

安装量
6
GitHub Stars
2468
最近更新
9月28日
majidmanzarpour
社区

threejs-debug-profiler

Debug 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.

安装量
6
GitHub Stars
2468
最近更新
9月28日
majidmanzarpour
社区

threejs-aaa-graphics-builder

Upgrade 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.

安装量
6
GitHub Stars
2468
最近更新
9月28日
majidmanzarpour
社区

threejs-game-director

Entrypoint 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.

安装量
5
GitHub Stars
2468
最近更新
9月28日