Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

threejs-game-ui-designer — Claude Code skill: game UI design

Skill for designing game UIs in Three.js: HUDs, menus, pause and win screens, responsive layout for mobile and desktop. Prevents overlaps, ensures readability, and keeps UI cohesive with game style.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer -a claude-code
Open on GitHub

What threejs-game-ui-designer does

The skill guides UI design through seven steps: capture existing state in screenshots, inventory screen states (gameplay, pause, settings, fail, win, loading, touch controls), set hierarchy (survival and status first, then objective, then feedback, then flavor), replace stat cards with authored clusters, meters, badges, icons, alerts, and modal states, use stable dimensions and safe-area padding, wire UI to game state rather than duplicate game rules, check text overflow and touch targets on both viewports.

The references/ui-patterns.md file holds hierarchy schemas, HUD zones, touch controls, responsive constraints, and state binding. The skill loads threejs-image-generator for logos, icons, menu backgrounds, and 2D assets when quality calls for it, and threejs-3d-generator only for genuine 3D menu objects, not flat HUD elements.

Output is a report of covered states, files changed, screenshots of both viewports, text overflow and overlap findings, safe-area and touch-target evidence, and remaining risks. These results feed into a consolidated design pass without rerunning unchanged checks.

What it helps with

  • design a HUD with element hierarchy and states for different scenes
  • adapt UI to mobile screens without clipping or overlaps
  • verify text and buttons fit safe areas on any resolution
  • bind UI visuals to game logic
  • style pause, settings, win, and lose screens in one visual language

Example prompts for the agent

  • Design an arcade game HUD: health bar on the left, score in center, item icons right, touch buttons at bottom
  • Rework the pause screen: replace stat cards with authored blocks, check readability on mobile
  • Create a settings menu respecting iPhone safe area and long parameter names on small screens

How to install threejs-game-ui-designer

1Skills CLI (Vercel)

npx skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer -a claude-code

2Manually: put the files in place

~/.claude/skills/threejs-game-ui-designer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/threejs-game-ui-designer/

From the same set4

The whole set →
threejs-gameplay-systems majidmanzarpour Scaffolds and tunes playable Three.js browser games with Vite and TypeScript. Helps design core loops, handle input, camera motion, and Rapier physics. Claude Code CX Codex Cursor +1 3,300installs threejs-game-director majidmanzarpour A director skill for Three.js browser games: it runs the work from a playable loop to graphics, UI and browser checks by handing phases to sibling skills. Claude Code CX Codex Cursor +1 3,000installs threejs-audio-generator majidmanzarpour A skill that turns ElevenLabs into game audio for Three.js: effects, loops, music and voice lines, written straight into the project. Claude Code CX Codex Cursor +1 2,900installs

Similar

survival-crafting gamedev-skills A playbook for survival games: the gather, craft and build loop, hunger and thirst, tool tiers. Comes with pseudocode for the core systems and the knobs that keep the loop from turning into a grind. Claude Code CX Codex Cursor +1 5,700installs godot-csharp gamedev-skills Skill for writing Godot 4.7 games in C# with partial classes, lifecycle methods, Export attributes, signals as C# events, and GDScript interop. Requires Godot .NET build and .NET SDK 8+. Claude Code CX Codex Cursor +1 5,600installs godot-multiplayer gamedev-skills Configures Godot 4.7 high-level multiplayer via ENet, @rpc calls, node authority, and state replication with MultiplayerSpawner and MultiplayerSynchronizer. Claude Code CX Codex Cursor +1 5,600installs threejs-gltf-loading gamedev-skills Loads glTF/GLB models into three.js and plays their baked or skinned clips, with patterns for DRACO, Meshopt and KTX2. For the case where the file imports but nothing shows up on screen. Claude Code CX Codex Cursor +1 5,400installs unity-physics gamedev-skills Sets up 3D PhysX physics in Unity 6.3 LTS with proper Rigidbody motion, collision layers, and raycasts. Useful when writing character controllers or tuning physics interactions. Claude Code CX Codex Cursor +1 5,400installs unity-input-system gamedev-skills A Claude Code skill that wires player input in Unity 6.3 LTS with the Input System package: action maps, PlayerInput, values read in C#. Claude Code CX Codex Cursor +1 5,400installs orbit-card heygen-com Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths. Claude Code CX Codex Cursor +1 9,800installs sdf earthtojake This skill authors and validates SDFormat files for models and worlds, then helps prepare them for simulator handoff. Claude Code CX Codex Cursor +1 10,500installs

Questions about threejs-game-ui-designer

How do I install threejs-game-ui-designer in Claude Code?

Run npx skills add majidmanzarpour/threejs-game-skills --skill threejs-game-ui-designer -a claude-code, then open ~/.claude/skills/threejs-game-ui-designer/SKILL.md.

What does threejs-game-ui-designer do?

The skill guides you through designing readable, responsive game UI in Three.js across seven steps: from screenshots and screen inventory to text overflow and touch-target checks on both viewports.

When should I load threejs-image-generator or threejs-3d-generator?

Load threejs-image-generator for logos, icons, menu backgrounds, and 2D assets to raise quality. Use threejs-3d-generator only for genuine 3D menu objects, not flat HUD elements.

Source text

SKILL.md · MIT 
---
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

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.

© majidmanzarpour · MIT · majidmanzarpour/threejs-game-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor