본문으로 건너뛰기
cccskills
무료GitHub에 공개

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

실행 점수 미검증

설치 방법 보기

포함된 파일(3)

  • SKILL.md2.3 KB
  • agents/openai.yaml248 B
  • references/ui-patterns.md5.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

Generate, convert, clean, and integrate audio for Three.js browser games with ElevenLabs: sound effects, looping ambience, music tracks and loops (menu, gameplay, boss, victory/defeat stingers), UI sounds, impact/weapon/vehicle audio, creature and boss stingers, announcer and dialogue TTS, voice conversion from a scratch performance, voice cleanup, audio manifests, and Web Audio integration.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majidmanzarpour/threejs-game-skills2.6천2026년 9월 28일 업데이트

majidmanzarpour의 스킬 모두 보기

이 스킬의 문제 신고