leanentropy/threejs-phaser-game-skills

threejs-game-ui-designer

Design premium Three.js game UI.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/leanentropy/threejs-phaser-game-skills --skill threejs-game-ui-designer

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Three.js Game UI Designer

Purpose

Make game UI intentional, readable, responsive, and genre-specific.

Workflow

Load references/ui-patterns.md as the first action when designing HUDs, menus, overlays, pause/win/lose screens, settings, touch controls, typography, responsive layout, safe areas, text fit, icons, or UI/world cohesion. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the UI phase complete while this reference is skipped for interface work.

Load references/checklists/game-ui-quality.md, references/checklists/hud-readability.md, and references/checklists/responsive-ui-fit.md before claiming UI/HUD/menu work is complete. Load references/checklists/mobile-input.md when touch controls or mobile safe areas are in scope.

Load references/prompt-templates.md only when the user asks for reusable prompts, a UI pass prompt, or a task template.

Load threejs-image-generator when logos, icons, GUI art, faction marks, menu backgrounds, decals, or 2D HUD assets would improve quality. Use threejs-3d-generator only for 3D menu/showcase objects or diegetic 3D UI props, not normal flat HUD elements.

  1. Capture/inspect desktop and mobile screenshots.
  2. Inventory UI states: gameplay, pause, settings, fail/retry, win/milestone, loading, touch controls.
  3. Define hierarchy: survival/status, objective, feedback, 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, hover/pressed/focus/disabled states.
  6. Wire UI to game state, not duplicated rules.
  7. Verify text fit, overlap, safe areas, touch targets, responsive screenshots, and real state changes.

Common Failure Modes

  • Generic dashboard/stat-card HUD.
  • UI covers player/threats.
  • Text shifts/clips on mobile.
  • Decorative panels reduce readability.
  • Touch controls look right but do not emit intents.

Final Response

Report the reference ledger, UI state checklist, UI intent, states covered, files changed, screenshots, text-fit/overlap checks, safe-area/touch-target evidence, controls, and remaining risks.

Verwandte Aufgaben

aus demselben Repository

Weitere Skills

Alle Skills
leanentropy
Community

threejs-3d-generator

Generate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games using the Tripo API. Use for text-to-3D, image-to-3D, 2D concept to 3D conversion, game-ready GLB/FBX assets, characters, creatures, buildings, props, weapons, terrain pieces, auto-rigging, animation retargeting, model texturing, LEGO/voxel/Minecraft-style stylization, low-poly/quad conversion, and browser asset pipelines. Pair with threejs-image-generator for concepts, texture references, sky/background

Installationen
1
GitHub Stars
0
Aktualisiert
23. Juni
leanentropy
Community

threejs-aaa-graphics-builder

Upgrade Three.js games from basic/prototype visuals to premium AAA-inspired browser graphics. Combines art-direction critique, procedural model building, mandatory external asset sourcing decisions, threejs-3d-generator assets, threejs-image-generator concept/texture workflows, scene visual polish, material/texture libraries, world prop kits, VFX, render pipeline, and visual scorecard gates. For premium games with characters, vehicles, ships, weapons, buildings, signature props, skies, textures,

Installationen
1
GitHub Stars
0
Aktualisiert
23. Juni
leanentropy
Community

threejs-audio-generator

Generate, convert, clean, and prepare audio assets for Three.js browser games using ElevenLabs. Use for sound effects, looping ambience, UI sounds, impact/weapon/vehicle audio, creature or boss stingers, announcer/dialogue TTS, scratch-performance voice conversion, voice cleanup/isolation, audio manifests, and game-ready web audio integration.

Installationen
1
GitHub Stars
0
Aktualisiert
23. Juni
leanentropy
Community

threejs-debug-profiler

Debug and profile Three.js browser games. Combines scene debugging, render/runtime/loading/animation/resize/mobile input fixes, performance profiling, draw calls, triangles, textures, memory, shader/post-processing cost, bundle size, and mobile DPR/input issues.

Installationen
1
GitHub Stars
0
Aktualisiert
23. Juni