Three.js Game Skills — навыки для сборки браузерных 3D-игр через агентов

Three.js Game Skills — коллекция компонуемых навыков для Codex и Claude Code, которая превращает текстовый запрос в играбельную браузерную 3D-игру на Three.js. Точка входа — threejs-game-director: оркестратор сам подтягивает узкоспециализированные навыки для геймплея, графики, UI, ассетов, аудио, отладки и QA-релиза, не заставляя пользователя выбирать каждого специалиста вручную.

Внутри каждого навыка лежат SKILL.md, references, чеклисты, prompt-шаблоны и Vite + TypeScript + Three.js скаффолд, упакованный в папку skills/threejs-gameplay-systems/assets/threejs-vite-game/.

Автор — Majid Manzarpour. Лицензия — MIT.

Демо-игры

Пакет уже использован для пяти полноценных браузерных игр, каждая опубликована на Netlify:

Установка

Установка всех навыков для Codex одной командой:

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

Для Claude Code:

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

Если skills CLI в окружении не поддерживает таргет claude-code, ставьте из локального клона через ./install.sh --claude. Для локальной разработки из клона:

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

Локальный инсталлятор копирует skills/ в выбранную директорию навыков агента. По умолчанию пропускает навыки с совпадающим именем (используйте --force для перезаписи) и никогда не удаляет чужие пользовательские навыки, пока явно не передан --prune-managed.

Как это использовать

После установки откройте Codex или Claude Code в пустой папке (или в существующем Three.js-проекте, который нужно улучшить) и опишите желаемый результат, явно назвав director-навык:

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.

Агент должен:

• Сначала загрузить threejs-game-director для широких задач по игре
• Подгрузить навыки-сателлиты: gameplay, AAA-графику, UI, debug/profile, QA/release, генерацию 3D, изображений и аудио — по запросу
• Использовать упакованный скаффолд при старте с пустой папки
• Создать или обновить код игры в вашем проекте
• Прогнать сборку, браузерные проверки, скриншоты, canvas-pixel-чеки, mobile-viewport-проверки и QA-гейты до того, как объявить готовность
• Отчитаться: skill-loading ledger, reference ledger, решения по ассетам/аудио, визуальный scorecard, оставшиеся риски

Пользователю обычно не нужно запускать скаффолд или QA-скрипты вручную — они упакованы внутрь навыков и используются самим воркфлоу.

Карта навыков

В пакете девять специализированных навыков и один director:

• threejs-game-director — точка входа для полной сборки игры и оркестрации
• threejs-gameplay-systems — playable loop, архитектура, механики, сущности, контролы, камера, физика, game feel
• threejs-aaa-graphics-builder — визуальный scorecard, модели, материалы, освещение, VFX, render polish
• threejs-game-ui-designer — HUD, меню, оверлеи, адаптивная вёрстка, safe areas, иконки, тач-контроли, text fit
• threejs-debug-profiler — чёрные экраны, runtime-ошибки, загрузки, resize/mobile-баги, производительность, draw calls, треугольники, текстуры, память
• threejs-qa-release — браузерная QA, скриншоты, canvas-pixels, mobile-проверки, production-сборка, release risk report
• threejs-3d-generator — Tripo API text/image-to-3D, текстуры, авториг, анимация, конвертация, GLB/FBX
• threejs-image-generator — Gemini-генерация концептов, текстур, decals, скайбоксов, иконок, GUI-арта и входов для image-to-3D
• threejs-audio-generator — ElevenLabs SFX, ambience, UI-звуки, voice/TTS, конверсия голоса, очистка и интеграция в Three.js audio

Опциональные API-ключи

Базовые навыки работают без платных ключей. Если ключи не заданы, director запускает credential probe, пропускает внешнюю генерацию и откатывается на процедурные/локальные ассеты. Ключи стоит добавлять, только если вы хотите генерацию моделей, картинок или аудио.

Никогда не коммитьте API-ключи и не вставляйте их в браузерный код игры. Навыки дёргают провайдерские API из локального тулинга агента, затем сохраняют сгенерированные ассеты в проект.

Как выглядит правильное использование

Для новой игры:

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.

Для апгрейда визуала:

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.

Для сломанной существующей игры:

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.

Для ассет-тяжёлой игры:

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.

Какие доказательства ожидаются

Для осмысленной работы по Three.js навыки собирают evidence до того, как объявить успех:

• npm run build
• локальный запуск в браузере
• проверка консоли и ошибок страницы
• Playwright-скриншот
• canvas nonblank pixel-чек
• проход desktop и mobile viewport
• interaction-чек основного control path
• performance snapshot при изменениях графики, ассетов, шейдеров или post-processing
• UI text-fit, overlap, safe-area, touch-target чеки при изменениях UI
• визуальный scorecard для premium / AAA / showcase / less-basic заявок
• external asset/audio sourcing ledger при сгенерированных ассетах или аудио

Premium/AAA-заявки не должны опираться на статичную сцену, placeholder-кубы, generic stat-card HUD или непроверенные скриншоты. У игры должен быть активный playable loop и заполненный визуальный scorecard.

Что внутри пакета

• skills/ — полный публичный пакет, каждый навык самодостаточен и несёт свой SKILL.md, references/, scripts/, assets/
• skills/threejs-gameplay-systems/assets/threejs-vite-game/ — упакованный игровой скаффолд, который навык использует при старте с пустого проекта
• skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs — упакованный helper для браузерных и canvas-проверок в QA-воркфлоу
• scripts/ — локальные валидационные хелперы для мейнтейнеров
• install.sh — локальный инсталлятор для работы с этим клоном

Пакет не зависит от корневых документов, скаффолдов, промптов и чеклистов — каждый навык самодостаточен после установки.