Threejs Game Ui Designer

Builds game HUDs, menus, and overlays for Three.js projects with an opinionated workflow that loads reference patterns and checklists before you start. Instead of letting you build generic stat cards, it pushes you toward hierarchy, readability, responsive layouts, safe areas, and touch target sizing. Captures desktop and mobile screenshots, wires UI to game state instead of duplicating logic, and verifies text fit and overlap before calling anything done. Most useful when you're prototyping a game and the UI feels like an afterthought, or when you need mobile-safe touch controls that actually work. The reference-first approach is strict but keeps you from shipping blurry text or buttons that cover enemies.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 8
skills.sh installs: 3.9K
GitHub stars: 2.8K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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.