Three.js Game Skills
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, helper scripts, and a Vite + TypeScript + Three.js scaffold bundled inside the relevant skill folders. Generated games ship with deterministic test hooks, a seeded RNG, and Playwright templates for smoke tests, visual-regression baselines, and bot playtests so agents can verify their own work end to end.
One shared pack of nine skills serves Codex and Claude Code. The director preserves your scope and art direction, uses specialist guidance automatically, delegates independent work when the runner supports it, and scales verification to the change. Full games get a complete production pass; a small HUD fix stays a small HUD fix. No particular model or paid API key is required.
Created by Majid Manzarpour.
Demos
Install
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 one of these targets, install from a cloned checkout instead: ./install.sh --codex for Codex, ./install.sh --claude for Claude Code, or ./install.sh --all for both.
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
Use The Skills
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.
Both runners share the same SKILL.md files and auto-discover the skills once installed; the prompt above works in either:
- Claude Code reads skills from
~/.claude/skills and routes from each SKILL.md description. Invoke the director with /threejs-game-director, or just name it in a prompt — it loads the sibling skills itself.
- Codex discovers global skills in
~/.agents/skills through the public install above. Each skill's agents/openai.yaml supplies its display name and a short $skill-name kickoff prompt. Use $threejs-game-director or name it naturally. The checkout's local --codex installer also supports the legacy ~/.codex/skills location; avoid installing duplicate copies in both roots.
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.
- Establish art direction, gameplay camera scale, and a representative playable scene before expanding levels or asset families.
- For substantial builds, preserve constraints, completed work, pending asset jobs, and next actions in a compact project note so corrections do not restart completed generation.
- Run checks appropriate to the change: full games include production builds, real input, screenshots, canvas pixels, supported viewports, and motion evidence when animated models matter.
- Put detailed evidence and the premium visual scorecard in a project artifact; keep the final answer focused on what works and remaining risks.
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.
Background tools, subagents, native async execution, user-steering delivery, and reasoning settings depend on the host. Installing these skills does not enable an API feature or change your model settings. When delegation is unavailable, the agent works directly.
Optional API Keys
The core Three.js skills work without paid API keys. When keys are genuinely missing or credits are exhausted, the director continues with procedural/local assets and reports the affected limitation. Temporary failures trigger bounded recovery of the existing job, not an immediate downgrade or duplicate paid submission. Explicitly procedural or no-external-service requests remain procedural. 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.
| Provider |
Skill |
Environment variable |
Use cases |
Key setup |
| Tripo API |
threejs-3d-generator |
TRIPO_API_KEY |
Text/image/multiview to 3D, game-ready GLB/FBX hero models, vehicles, props, buildings, weapons, textures, rigging, animation, stylization, mesh conversion, post-processing. |
Tripo quick start and Tripo API overview. |
| Gemini image API |
threejs-image-generator |
GEMINI_API_KEY |
Concept art, image-to-3D source images, texture references, decals, skies, backgrounds, icons, logos, GUI art, title/menu art. |
Gemini API key docs and Google AI Studio keys. |
| ElevenLabs API |
threejs-audio-generator |
ELEVENLABS_API_KEY |
SFX, music tracks and loops, ambience loops, UI sounds, announcer lines, dialogue TTS, voice conversion, audio cleanup, game audio manifests. |
ElevenLabs quickstart and API authentication. |
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. Run it from wherever you installed the skills:
# Claude Code
bash ~/.claude/skills/threejs-game-director/scripts/probe_asset_credentials.sh
# Codex
bash ~/.agents/skills/threejs-game-director/scripts/probe_asset_credentials.sh
It prints TRIPO_API_KEY=SET|MISSING (and the same for Gemini and ElevenLabs) without ever printing key values.
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, music, 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.
Best Entry Points
- 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, music, 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.
What Good Usage Looks Like
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.
Expected Evidence
For a complete game, the skills should gather evidence before claiming success. Narrow edits use the affected subset, not an unrelated full release audit:
npm run build- local browser run
- browser console and page error check
- Playwright screenshot
- canvas nonblank pixel check, plus the inspector's measured metrics (color entropy, edge density, luminance contrast, render budget rows)
- supported-viewport checks (desktop and mobile by default)
- interaction check for the main control path
- game design brief, core loop contract, and level/encounter plan for broad game creation
- performance snapshot when graphics, assets, shaders, or post-processing changed
- technical art budget target-vs-actuals when premium graphics changed
- UI text-fit, overlap, safe-area, and touch-target checks when UI changed
- visual scorecard with measured evidence for premium, AAA, showcase, or less-basic claims
- visual test harness decision (screenshot baselines added/extended/skipped) for release-ready visual QA
- bot playtest metrics for release-ready gameplay claims
- generated asset paths and task IDs, or the credential probe output, when external assets are in scope
- short motion captures for animated models: rig deformation, clip transitions, foot sliding, and attack/contact timing
- a current-run manifest declaring required viewport/state captures and artifact paths, with acknowledged states and a matching run ID
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.
Skill System
threejs-game-director: main entrypoint for complete game builds: scope and quality bar, specialist routing, bounded delegation, continuity notes, asset recovery, current-run evidence.threejs-gameplay-systems: playable loop, architecture, game design and level design, mechanics, entities, controls, camera, physics selection, and game feel (hitstop, screenshake, easing, impact feedback).threejs-aaa-graphics-builder: visual scorecard with calibration anchors, technical art budgets, shader/material cookbook, 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 with measured metrics, visual test harness, bot playtests, responsive checks, production build, release risk report.threejs-3d-generator: Tripo API text/image-to-3D, texture, auto-rig, animation, conversion, download, checkpoint/resume, staged inspection, 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, music, ambience, UI sounds, voice/TTS, voice conversion, cleanup, and Three.js audio integration.
Packaged Resources
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. Ships deterministic test hooks (__THREE_GAME_TEST_HOOKS__), a seeded RNG, and tests/ templates for smoke tests, visual-regression baselines, and bot playtests.skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs: packaged browser/canvas inspection helper: pixel metrics and render-budget rows. --manifest captures every declared viewport/state in one browser and prints one summary line per capture; explicit --state captures require an awaited matching acknowledgment.skills/threejs-aaa-graphics-builder/assets/scorecard-anchors/: calibration reference screenshots for the visual scorecard.skills/threejs-game-director/scripts/check_evidence.py: --manifest validates a declared capture set and run ID without scanning historical reports. The legacy --report interface checks cited artifact files but cannot prove freshness or complete capture coverage. Neither replaces visual inspection or gameplay tests.skills/threejs-game-director/scripts/probe_asset_credentials.sh: prints KEY=SET|MISSING for all three providers, sourcing the shell profile the agent process does not inherit.scripts/: local validation helpers for maintainers.install.sh: local installer for working on this checkout.
Maintainer Checks
Validate this workflow repository:
npm install
npm run check:scripts
npm run validate:skills
npm run test:helpers
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
node skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs --manifest artifacts/evidence.json --url http://127.0.0.1:5188 --seed 12345
python3 skills/threejs-game-director/scripts/check_evidence.py ../my-threejs-game --manifest artifacts/evidence.json
The manifest reference documents capture paths and the state-hook contract. The workflow evaluation scenarios compare observable behavior with fixed prompts, seeds, environments, and model settings. Helper tests use mocked provider responses without spending credits; passing them is not a claim of improved visual quality.
The shared orchestration policy incorporates OpenAI's model guidance on instruction conflicts, delegation, momentum, and proportionate checks. Native async tools and steering remain hosting-application capabilities, not requirements of this pack.
License
MIT. See LICENSE.
一套共九个自包含的技能包（SKILL.md 文件），教 Codex 和 Claude Code 如何端到端构建可玩、精致的 Three.js 浏览器游戏，涵盖玩法、3A 级画质、UI、QA，以及可选的 AI 生成 3D、图像和音频资源。