Skip to main content
affpapa.org
RU EN
skill CX Codex

build-mobile-threejs-games — Claude Code skill: mobile Three.js games

A skill for building and testing a Three.js game for mobile web: touch controls, responsive HUD, performance budgets.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add MengTo/Skills --skill build-mobile-threejs-games -a claude-code
Open on GitHub

What build-mobile-threejs-games does

The skill frames mobile as the primary surface for controls and performance, not a shrunken desktop. Reach for it when the game already runs in a browser but feels wrong under a thumb.

Three blocks of rules sit inside. Controls: a clear movement scheme, reachable primary actions, target selection, cancel and reset paths, and non-drag alternatives for inventory. Nothing lands in unsafe areas or overlaps another action zone, and held, unavailable and queued actions all give feedback. The responsive HUD covers portrait and landscape viewports — status, target data, inventory, tooltips and dialogs stay legible without covering the playfield, and an orientation change does not reset gameplay state.

The third block is performance and QA. The skill advises device-appropriate quality defaults and adaptive decorative effects. Testing covers touch targets, multi-touch, long sessions, audio unlock, pause and background return, reduced motion, low-end quality and real mobile-size viewports in the repository-approved browser. Without a real phone on hand, half of those checks are guesswork.

What it helps with

  • build touch movement a thumb can actually reach
  • separate action zones so buttons stop overlapping
  • keep the HUD readable in portrait and landscape
  • survive an orientation change without resetting the game
  • test multi-touch and background return on a real phone

Example prompts for the agent

  • build mobile controls for this Three.js game: movement, primary action, cancel
  • rework the HUD so it stops covering the playfield in portrait
  • run the mobile QA checklist: touch targets, multi-touch, long session, background return

How to install build-mobile-threejs-games

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill build-mobile-threejs-games -a claude-code

2Manually: put the files in place

~/.claude/skills/build-mobile-threejs-games/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/build-mobile-threejs-games/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about build-mobile-threejs-games

How do I install build-mobile-threejs-games in Claude?

Run npx skills add MengTo/Skills --skill build-mobile-threejs-games -a claude-code. The skill file then lives at ~/.claude/skills/build-mobile-threejs-games/SKILL.md.

What does build-mobile-threejs-games do?

It gives the agent rules for building, tuning and testing a Three.js game for mobile web: touch controls, responsive HUD, performance budgets and mobile browser QA.

Which platforms does the skill support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each has its own install command — for Cursor it is npx skills add MengTo/Skills --skill build-mobile-threejs-games -a cursor.

Source text

SKILL.md · MIT 
---
name: build-mobile-threejs-games
description: Build, tune, or test a Three.js game for mobile web. Use for touch movement, action controls, target selection, touch inventory, safe areas, portrait/landscape layouts, responsive HUD, battery/performance budgets, and real mobile browser QA.
---

# Build Mobile Three.js Games

Treat mobile as a primary control and performance surface.

## Controls

Provide a clear movement control, reachable primary actions, target selection, cancel/reset paths, and non-drag alternatives for inventory. Keep controls out of unsafe areas, avoid overlapping action zones, and show feedback for held, unavailable, and queued actions.

## Responsive HUD

Design for representative portrait and landscape viewports. Keep vital status, target data, inventory, tooltips, and dialogs legible without covering the playfield. Support orientation changes without resetting gameplay state.

## Performance and QA

Use device-appropriate quality defaults and adaptive decorative effects. Test touch targets, multi-touch, long sessions, audio unlock, pause/background return, reduced motion, low-end quality, and actual mobile-size viewports in the repository-approved browser.

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →
godot-platform-mobile thedivergentai A skill that steers your coding agent through Godot's mobile side: touch input, screen cutouts, throttling and Android permissions. CX Codex +1 421installs threejs-game-ui-designer majidmanzarpour 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. CX Codex +1 3,300installs threejs-aaa-graphics-builder majidmanzarpour A skill for upgrading Three.js games from rough prototypes to production visuals: builds materials, lighting, VFX, shaders, and evaluates scenes against a scorecard. CX Codex +1 3,200installs threejs-game OpusGameLabs Locks in a project layout and four core modules for building 3D browser games with Three.js. Useful when the agent scaffolds a scene and game loop from scratch. CX Codex +1 1,100installs mint-threejs-skills mintdotgg Guides agents to build browser 3D apps, games, and viewers in Three.js with Mint MCP asset generation. It coordinates asset pipelines, runtime loaders, and scene directors. CX Codex +1 616installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. CX Codex +1 86,600installs

From the same set148

unicorn-studio Guides you through embedding Unicorn Studio interactive WebGL scenes on a page: container setup, responsive sizing, performance tuning, layering with UI. CX Codex +1 1,400installs skeuomorphic-ui Generates tactile skeuomorphic web CSS with layered gradients, inset shadows, and reflective edges. Useful when buttons or panels need physical depth without cartoon gloss. CX Codex +1 1,400installs background-grid-webgl A skill that tells your coding agent how to build a perspective WebGL grid background with fading lines, particle haze and slow forward drift. CX Codex +1 1,500installs article-prompts-to-skills Convert tutorials, articles, or prompt packs into standalone AgentSkills packages with demos and tests. Use it when ideas need packaging into working agent capabilities. CX Codex +1 1,300installs design-game-encounters A skill for designing and tuning combat encounters in Three.js action games: arenas, enemies, waves, boss phases. CX Codex +1 1,300installs design-action-combat Guides the design and testing of tactical combat for web games using deterministic state machines. Useful when tuning parry windows, attack startup, and hit registration. CX Codex +1 1,300installs build-game-audio-feedback Guides an agent through designing responsive audio cues for a Three.js or browser game: hits, blocks, music states. CX Codex +1 1,300installs optimize-threejs-games A skill that profiles and speeds up Three.js and WebGL games: it finds whether the CPU or the GPU is the bottleneck, then fixes it without breaking gameplay. CX Codex +1 1,300installs

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