Self-contained Codex and Claude Code skills for building playable, polished Three.js browser games. Install the skills, then ask your agent to use threejs-game-director; the director routes gameplay, graphics, UI, asset generation, audio, debugging, and release verification without requiring users to choose every specialist skill manually.

The package includes the runtime materials agents need: SKILL.md files, references, checklists, prompt templates, helper scripts, and a Vite + TypeScript + Three.js scaffold bundled inside the relevant skill folders.

Created by Majid Manzarpour.

Install all skills for Codex:

npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y

Install all skills for Claude Code:

npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y

If your installed skills CLI does not support the Claude Code target, install from a cloned checkout with ./install.sh --claude.

For local development from a cloned checkout:

./install.sh --codex
./install.sh --claude
./install.sh --all

The local installer copies skills/ into the selected agent skills directory. It skips same-named skills unless you pass --force, and it never removes unrelated user skills unless --prune-managed is explicitly requested.

./install.sh --codex --force

After installing, open Codex or Claude Code in an empty project folder, or in an existing Three.js game you want to improve. Then prompt the agent with the outcome you want and name the director skill:

Use threejs-game-director to build a premium futuristic tower defense game from scratch.
Automatically use the relevant gameplay, graphics, UI, asset generation, audio, debug,
and QA skills. Build a playable loop first, then iterate until it passes browser,
mobile, visual, UI, performance, and release checks.

The agent should:

• Load threejs-game-director first for broad game work.
• Load sibling skills for gameplay systems, AAA graphics, UI, debug/profile, QA/release, 3D generation, image generation, and audio generation when the request calls for them.
• Use the bundled scaffold internally when starting from an empty folder.
• Create or update the game code in your project.
• Run builds, browser checks, screenshots, canvas-pixel checks, mobile viewport checks, and QA gates before claiming completion.
• Report the skill-loading ledger, reference ledger, asset/audio sourcing decisions, visual scorecard, and remaining risks for premium work.

Users generally should not need to run the scaffold or QA helper scripts directly. Those scripts are packaged so the skills can use them as part of the workflow.

The core Three.js skills work without paid API keys. When keys are missing, the director should report the credential probe output, skip external generation, and fall back to procedural/local assets. Add keys only when you want the agent to generate external models, images, or audio.

Never commit API keys or put them in browser-side game code. These skills use provider APIs from local agent tooling, then save generated assets into your game project.

Set keys in your shell profile, then restart your terminal.

macOS/Linux with zsh or bash:

export TRIPO_API_KEY="..."
export GEMINI_API_KEY="..."
export ELEVENLABS_API_KEY="..."

For zsh, put those lines in ~/.zshrc or ~/.zprofile. For bash, put them in ~/.bashrc or ~/.bash_profile.

Windows PowerShell, current terminal session only:

$env:TRIPO_API_KEY = "..."
$env:GEMINI_API_KEY = "..."
$env:ELEVENLABS_API_KEY = "..."

Windows PowerShell, persistent for your user account:

[Environment]::SetEnvironmentVariable("TRIPO_API_KEY", "...", "User")
[Environment]::SetEnvironmentVariable("GEMINI_API_KEY", "...", "User")
[Environment]::SetEnvironmentVariable("ELEVENLABS_API_KEY", "...", "User")

After setting persistent Windows variables, restart your terminal, Codex, or Claude Code so the agent process can see the new environment.

The director skill includes a credential probe that sources common shell profiles before deciding a key is missing:

bash ~/.agents/skills/threejs-game-director/scripts/probe_asset_credentials.sh

Provider notes:

• Tripo is optional but useful for high-value 3D surfaces that procedural code alone rarely makes premium: hero vehicles, bosses, weapons, buildings, creatures, props, and textured GLB/FBX assets.
• Gemini image generation is optional but useful before Tripo image-to-3D and for high-quality texture, sky, icon, logo, decal, and GUI sources.
• ElevenLabs is optional but useful for making games feel finished through interaction SFX, ambience, UI feedback, voice, and cleanup.
• Google also supports GOOGLE_API_KEY, but these skills standardize on GEMINI_API_KEY for clarity.
• Use provider-side key restrictions and quotas where available. ElevenLabs documents endpoint scopes, credit quotas, and secret-key handling; Google recommends environment variables and is migrating Gemini users toward auth keys.

• Use threejs-game-director for complete games, major upgrades, premium polish, release-ready work, or anything broad.
• Use threejs-gameplay-systems for mechanics, architecture, input, camera, physics, scoring, objectives, and game feel.
• Use threejs-aaa-graphics-builder when screenshots look basic or the game needs stronger models, materials, lighting, VFX, world detail, or render polish.
• Use threejs-game-ui-designer for HUDs, menus, overlays, responsive layout, safe areas, icons, touch controls, and text fit.
• Use threejs-debug-profiler for black screens, runtime errors, loading issues, resize/mobile bugs, performance, draw calls, triangles, textures, and memory.
• Use threejs-qa-release for production builds, browser verification, screenshots, canvas pixels, mobile checks, release risk reports, and static-hosting readiness.
• Use threejs-3d-generator for Tripo API text/image-to-3D models, texture, rigging, animation, conversion, and GLB/FBX game assets.
• Use threejs-image-generator for Gemini-generated concepts, image-to-3D inputs, textures, decals, skies, backgrounds, icons, logos, GUI art, and title/menu art.
• Use threejs-audio-generator for ElevenLabs SFX, ambience, UI sounds, voice/TTS, voice conversion, cleanup, and Three.js audio integration.

For most user-facing game requests, start with threejs-game-director and let it pull in the specialists.

For a new game:

Use threejs-game-director to create a AAA-inspired hover racing game from scratch.
Make it playable, add premium track visuals, vehicle feel, HUD, SFX hooks, desktop and
mobile controls, and run the full verification pass before reporting done.

For visual upgrades:

Use threejs-game-director to upgrade this Three.js game from prototype visuals to
premium browser-game quality. Use the AAA graphics, UI, image, 3D, audio, debug,
and QA skills as needed. Include the visual scorecard and evidence from active-play
screenshots.

For an existing broken game:

Use threejs-game-director to debug and finish this Three.js game. First get it running,
then improve gameplay feel, UI, graphics, performance, and release verification until
the remaining risks are explicit.

For asset-heavy games:

Use threejs-game-director to build a premium space dogfight game. Use threejs-image-generator
for concepts, skies, decals, icons, and GUI art; use threejs-3d-generator for hero ships
and weapons when credentials are available; use threejs-audio-generator for SFX and
ambience. If generation is blocked, report the credential probe output and fallback plan.

For meaningful Three.js work, the skills should gather evidence before claiming success:

• npm run build
• local browser run
• browser console and page error check
• Playwright screenshot
• canvas nonblank pixel check
• desktop and mobile viewport pass
• interaction check for the main control path
• performance snapshot when graphics, assets, shaders, or post-processing changed
• UI text-fit, overlap, safe-area, and touch-target checks when UI changed
• visual scorecard for premium, AAA, showcase, or less-basic claims
• external asset/audio sourcing ledger when generated assets or audio are in scope

Premium/AAA claims should not rely on a static scene, placeholder cubes, generic stat-card HUDs, or unverified screenshots. The game should have an active playable loop and a filled visual scorecard.

• threejs-game-director: main entrypoint for complete game builds and orchestration.
• threejs-gameplay-systems: playable loop, architecture, mechanics, entities, controls, camera, physics, and feel.
• threejs-aaa-graphics-builder: visual scorecard, asset architecture, models, materials, VFX, render polish.
• threejs-game-ui-designer: HUDs, menus, overlays, responsive UI, icons, safe areas, UI states.
• threejs-debug-profiler: scene/runtime/render bugs, mobile bugs, performance profiling, renderer metrics.
• threejs-qa-release: browser QA, screenshots, canvas pixels, responsive checks, production build, release risk report.
• threejs-3d-generator: Tripo API text/image-to-3D, texture, auto-rig, animation, conversion, download, and Three.js import guidance.
• threejs-image-generator: Gemini image generation for concepts, textures, decals, skies, icons, GUI art, and image-to-3D inputs.
• threejs-audio-generator: ElevenLabs-backed SFX, ambience, UI sounds, voice/TTS, voice conversion, cleanup, and Three.js audio integration.

Installed skills are self-contained. They do not depend on root docs, root scaffolds, root prompts, or root checklists.

• skills/: the full public package. Each skill owns its required SKILL.md, references/, scripts/, and assets/.
• skills/threejs-gameplay-systems/assets/threejs-vite-game/: packaged game scaffold used by the skills when starting from an empty project.
• skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs: packaged browser/canvas inspection helper used by QA workflows.
• scripts/: local validation helpers for maintainers.
• install.sh: local installer for working on this checkout.

Validate this workflow repository:

npm install
npm run check:scripts
npm run validate:skills

Maintainers can run packaged helpers directly when testing the skill package, but normal users should interact through agent prompts:

python3 skills/threejs-gameplay-systems/scripts/create_threejs_game.py ../my-threejs-game
node skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs --url http://127.0.0.1:5188 --mobile

MIT. See LICENSE.