{
  "markdown": "# Three.js Game Skills\n\nSelf-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.\n\nThe 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. 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.\n\nCreated by [Majid Manzarpour](https://x.com/majidmanzarpour).\n\n## Demos\n\n| Game | Video | Play |\n| --- | --- | --- |\n| Neon Ridge Drift | [Watch on X](https://x.com/majidmanzarpour/status/2064565389036540327) | [ridgedrift.netlify.app](https://ridgedrift.netlify.app) |\n| Championship Snooker Arena | [Watch on X](https://x.com/majidmanzarpour/status/2064673249129071096) | [snookerarena.netlify.app](https://snookerarena.netlify.app) |\n| Starship Dogfight | [Watch on X](https://x.com/majidmanzarpour/status/2065065340510281888) | [starshipdogfight.netlify.app](https://starshipdogfight.netlify.app) |\n| Tide Singer | [Watch on X](https://x.com/majidmanzarpour/status/2065570428723007555) | [tidesinger.netlify.app](https://tidesinger.netlify.app) |\n| Ripcore | [Watch on X](https://x.com/majidmanzarpour/status/2066687620709544070) | [ripcore.netlify.app](https://ripcore.netlify.app) |\n\n## Install\n\nInstall all skills for Codex:\n\n```bash\nnpx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y\n```\n\nInstall all skills for Claude Code:\n\n```bash\nnpx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y\n```\n\nIf 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.\n\nFor local development from a cloned checkout:\n\n```bash\n./install.sh --codex\n./install.sh --claude\n./install.sh --all\n```\n\nThe 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.\n\n```bash\n./install.sh --codex --force\n```\n\n## Use The Skills\n\nAfter 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:\n\n```text\nUse threejs-game-director to build a premium futuristic tower defense game from scratch.\nAutomatically use the relevant gameplay, graphics, UI, asset generation, audio, debug,\nand QA skills. Build a playable loop first, then iterate until it passes browser,\nmobile, visual, UI, performance, and release checks.\n```\n\nBoth runners share the same `SKILL.md` files and auto-discover the skills once installed; the prompt above works in either:\n\n- **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.\n- **Codex** reads skills from `~/.codex/skills`, with each skill's `agents/openai.yaml` supplying its display name and a default kickoff prompt. Name the director in your prompt and it pulls in the specialists the same way.\n\nThe agent should:\n\n- Load `threejs-game-director` first for broad game work.\n- 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.\n- Use the bundled scaffold internally when starting from an empty folder.\n- Create or update the game code in your project.\n- Run builds, browser checks, screenshots, canvas-pixel checks, mobile viewport checks, and QA gates before claiming completion.\n- Report the skill-loading ledger, reference ledger, asset/audio sourcing decisions, visual scorecard, and remaining risks for premium work.\n\nUsers 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.\n\n## Optional API Keys\n\nThe 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.\n\nNever 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.\n\n| Provider | Skill | Environment variable | Use cases | Key setup |\n| --- | --- | --- | --- | --- |\n| 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](https://platform.tripo3d.ai/docs/quick-start) and [Tripo API overview](https://www.tripo3d.ai/api). |\n| 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](https://ai.google.dev/gemini-api/docs/api-key) and [Google AI Studio keys](https://aistudio.google.com/app/apikey). |\n| ElevenLabs API | `threejs-audio-generator` | `ELEVENLABS_API_KEY` | SFX, ambience loops, UI sounds, announcer lines, dialogue TTS, voice conversion, audio cleanup, game audio manifests. | [ElevenLabs quickstart](https://elevenlabs.io/docs/eleven-api/quickstart) and [API authentication](https://elevenlabs.io/docs/api-reference/authentication). |\n\nSet keys in your shell profile, then restart your terminal.\n\nmacOS/Linux with `zsh` or `bash`:\n\n```bash\nexport TRIPO_API_KEY=\"...\"\nexport GEMINI_API_KEY=\"...\"\nexport ELEVENLABS_API_KEY=\"...\"\n```\n\nFor `zsh`, put those lines in `~/.zshrc` or `~/.zprofile`. For `bash`, put them in `~/.bashrc` or `~/.bash_profile`.\n\nWindows PowerShell, current terminal session only:\n\n```powershell\n$env:TRIPO_API_KEY = \"...\"\n$env:GEMINI_API_KEY = \"...\"\n$env:ELEVENLABS_API_KEY = \"...\"\n```\n\nWindows PowerShell, persistent for your user account:\n\n```powershell\n[Environment]::SetEnvironmentVariable(\"TRIPO_API_KEY\", \"...\", \"User\")\n[Environment]::SetEnvironmentVariable(\"GEMINI_API_KEY\", \"...\", \"User\")\n[Environment]::SetEnvironmentVariable(\"ELEVENLABS_API_KEY\", \"...\", \"User\")\n```\n\nAfter setting persistent Windows variables, restart your terminal, Codex, or Claude Code so the agent process can see the new environment.\n\nThe 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:\n\n```bash\n# Claude Code\nbash ~/.claude/skills/threejs-game-director/scripts/probe_asset_credentials.sh\n# Codex\nbash ~/.codex/skills/threejs-game-director/scripts/probe_asset_credentials.sh\n```\n\nIt prints `TRIPO_API_KEY=SET|MISSING` (and the same for Gemini and ElevenLabs) without ever printing key values.\n\nProvider notes:\n\n- 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.\n- Gemini image generation is optional but useful before Tripo image-to-3D and for high-quality texture, sky, icon, logo, decal, and GUI sources.\n- ElevenLabs is optional but useful for making games feel finished through interaction SFX, ambience, UI feedback, voice, and cleanup.\n- Google also supports `GOOGLE_API_KEY`, but these skills standardize on `GEMINI_API_KEY` for clarity.\n- 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.\n\n## Best Entry Points\n\n- Use `threejs-game-director` for complete games, major upgrades, premium polish, release-ready work, or anything broad.\n- Use `threejs-gameplay-systems` for mechanics, architecture, input, camera, physics, scoring, objectives, and game feel.\n- Use `threejs-aaa-graphics-builder` when screenshots look basic or the game needs stronger models, materials, lighting, VFX, world detail, or render polish.\n- Use `threejs-game-ui-designer` for HUDs, menus, overlays, responsive layout, safe areas, icons, touch controls, and text fit.\n- Use `threejs-debug-profiler` for black screens, runtime errors, loading issues, resize/mobile bugs, performance, draw calls, triangles, textures, and memory.\n- Use `threejs-qa-release` for production builds, browser verification, screenshots, canvas pixels, mobile checks, release risk reports, and static-hosting readiness.\n- Use `threejs-3d-generator` for Tripo API text/image-to-3D models, texture, rigging, animation, conversion, and GLB/FBX game assets.\n- Use `threejs-image-generator` for Gemini-generated concepts, image-to-3D inputs, textures, decals, skies, backgrounds, icons, logos, GUI art, and title/menu art.\n- Use `threejs-audio-generator` for ElevenLabs SFX, ambience, UI sounds, voice/TTS, voice conversion, cleanup, and Three.js audio integration.\n\nFor most user-facing game requests, start with `threejs-game-director` and let it pull in the specialists.\n\n## What Good Usage Looks Like\n\nFor a new game:\n\n```text\nUse threejs-game-director to create a AAA-inspired hover racing game from scratch.\nMake it playable, add premium track visuals, vehicle feel, HUD, SFX hooks, desktop and\nmobile controls, and run the full verification pass before reporting done.\n```\n\nFor visual upgrades:\n\n```text\nUse threejs-game-director to upgrade this Three.js game from prototype visuals to\npremium browser-game quality. Use the AAA graphics, UI, image, 3D, audio, debug,\nand QA skills as needed. Include the visual scorecard and evidence from active-play\nscreenshots.\n```\n\nFor an existing broken game:\n\n```text\nUse threejs-game-director to debug and finish this Three.js game. First get it running,\nthen improve gameplay feel, UI, graphics, performance, and release verification until\nthe remaining risks are explicit.\n```\n\nFor asset-heavy games:\n\n```text\nUse threejs-game-director to build a premium space dogfight game. Use threejs-image-generator\nfor concepts, skies, decals, icons, and GUI art; use threejs-3d-generator for hero ships\nand weapons when credentials are available; use threejs-audio-generator for SFX and\nambience. If generation is blocked, report the credential probe output and fallback plan.\n```\n\n## Expected Evidence\n\nFor meaningful Three.js work, the skills should gather evidence before claiming success:\n\n- `npm run build`\n- local browser run\n- browser console and page error check\n- Playwright screenshot\n- canvas nonblank pixel check, plus the inspector's measured metrics (color entropy, edge density, luminance contrast, render budget rows)\n- desktop and mobile viewport pass\n- interaction check for the main control path\n- game design brief, core loop contract, and level/encounter plan for broad game creation\n- performance snapshot when graphics, assets, shaders, or post-processing changed\n- technical art budget target-vs-actuals when premium graphics changed\n- UI text-fit, overlap, safe-area, and touch-target checks when UI changed\n- visual scorecard with measured evidence and a fresh-eyes review for premium, AAA, showcase, or less-basic claims\n- visual test harness decision (screenshot baselines added/extended/skipped) for release-ready visual QA\n- bot playtest metrics for release-ready gameplay claims\n- external asset/audio sourcing ledger when generated assets or audio are in scope\n\nPremium/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.\n\n## Skill System\n\n- `threejs-game-director`: main entrypoint for complete game builds and orchestration — runner capability check, skill path ladder, phase playbook, ledgers, report audit.\n- `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).\n- `threejs-aaa-graphics-builder`: visual scorecard with calibration anchors, technical art budgets, shader/material cookbook, asset architecture, models, materials, VFX, render polish.\n- `threejs-game-ui-designer`: HUDs, menus, overlays, responsive UI, icons, safe areas, UI states.\n- `threejs-debug-profiler`: scene/runtime/render bugs, mobile bugs, performance profiling, renderer metrics.\n- `threejs-qa-release`: browser QA, screenshots, canvas pixels with measured metrics, visual test harness, bot playtests, responsive checks, production build, release risk report.\n- `threejs-3d-generator`: Tripo API text/image-to-3D, texture, auto-rig, animation, conversion, download, and Three.js import guidance.\n- `threejs-image-generator`: Gemini image generation for concepts, textures, decals, skies, icons, GUI art, and image-to-3D inputs.\n- `threejs-audio-generator`: ElevenLabs-backed SFX, ambience, UI sounds, voice/TTS, voice conversion, cleanup, and Three.js audio integration.\n\n## Packaged Resources\n\nInstalled skills are self-contained. They do not depend on root docs, root scaffolds, root prompts, or root checklists.\n\n- `skills/`: the full public package. Each skill owns its required `SKILL.md`, `references/`, `scripts/`, and `assets/`.\n- `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.\n- `skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs`: packaged browser/canvas inspection helper — reports non-blank pixels, measured visual metrics (color entropy, edge density, luminance contrast), and render-budget rows; `--state`/`--seed` drive the test hooks for deterministic per-state captures.\n- `skills/threejs-aaa-graphics-builder/assets/scorecard-anchors/`: calibration reference screenshots for the visual scorecard.\n- `scripts/`: local validation helpers for maintainers.\n- `install.sh`: local installer for working on this checkout.\n\n## Maintainer Checks\n\nValidate this workflow repository:\n\n```bash\nnpm install\nnpm run check:scripts\nnpm run validate:skills\n```\n\nMaintainers can run packaged helpers directly when testing the skill package, but normal users should interact through agent prompts:\n\n```bash\npython3 skills/threejs-gameplay-systems/scripts/create_threejs_game.py ../my-threejs-game\nnode skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs --url http://127.0.0.1:5188 --mobile\nnode skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs --url http://127.0.0.1:5188 --state active-play --seed 12345\n```\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n",
  "bytes": 15443,
  "sha": "e91edb3a2e5270bad3b8a5805b07f44bd1086eba2f48089e209077963474eed7",
  "repo_slug": "majidmanzarpour/threejs-game-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_majidmanzarpour_threejs_game_skills_thre_b551e2e8/readme"
}