К основному содержанию
скилл CX Codex

build-hybrid-game-assets — скилл для Claude Code: ассеты для Three.js

Помогает выбрать, как делать ассеты для веб-игры на Three.js: импортированная модель, процедурная геометрия или 2D-медиа.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill build-hybrid-game-assets -a claude-code
Открыть на GitHub

Что делает build-hybrid-game-assets

Скилл ведёт вас по конвейеру ассетов для Three.js или другой веб-игры. Сначала он просит классифицировать, что именно нужно: герой с авторской анимацией, оружие или проп, иконка интерфейса, фон меню. Для каждой категории он предлагает свою форму. Риггерованный меш берут для персонажа, процедурную геометрию Three.js — когда важны силуэт, сокеты, коллизии и варианты, управляемые кодом. 2D-картинки и видео идут прямо в UI.

Дальше скилл собирает компактный набор референсов: главный вид, силуэт или вид сбоку, крупный план палитры и материалов, контекст использования. До реализации нужно задать дистанцию камеры, масштаб, пивот, коллизии, точки крепления и бюджет. По одному изображению скрытую геометрию не восстановить, поэтому скилл либо просит дополнительные ракурсы, либо предлагает осознанную стилизацию. Если форма референса должна стать кодом, используется img2threejs с его проверками качества, и результат честно называется реконструкцией.

Проверка идёт в игре, а не во вьюере ассетов: реальная дистанция камеры, свет, читаемость, контакт с коллизией, анимация, мобильный вьюпорт. Скилл просит измерить draw calls, треугольники, число текстур и время кадра. Отдельный шаг — учёт происхождения: для каждого ассета отмечается, импортированный он, процедурный, сгенерированный 2D или только референс, вместе с источником и лицензией. Это повод проверить лицензии до интеграции в сцену, а не после.

Какие задачи решает

  • выбрать между импортированной моделью и процедурной геометрией для пропа
  • собрать набор референсов перед моделированием персонажа
  • подготовить 2D-иконки и фон меню под реальную плотность экрана
  • измерить draw calls и время кадра на мобильном вьюпорте
  • записать источник и лицензию для каждого ассета в сцене

Примеры запросов агенту

  • помоги спланировать пайплайн ассетов для веб-игры на Three.js
  • нужно решить, делать меч процедурной геометрией или импортировать модель
  • проверь ассеты в игре: читаемость, коллизии и время кадра

Как установить build-hybrid-game-assets

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill build-hybrid-game-assets -a claude-code

2Вручную: положить файлы

~/.claude/skills/build-hybrid-game-assets/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/build-hybrid-game-assets/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о build-hybrid-game-assets

Как установить build-hybrid-game-assets в Claude?

Выполните npx skills add MengTo/Skills --skill build-hybrid-game-assets -a claude-code. Скилл появится в ~/.claude/skills/build-hybrid-game-assets/SKILL.md.

Что делает build-hybrid-game-assets?

Планирует, создаёт, интегрирует и проверяет гибридный конвейер ассетов для Three.js или веб-игры. Помогает выбрать форму ассета под геймплей и бюджет рантайма.

Нужно ли прогонять каждую картинку через image-to-3D?

Нет, скилл прямо не советует так делать. Референс чаще служит визуальной опорой, а играбельный уровень или модель создаются отдельно.

Исходный текст

SKILL.md · MIT
---
name: build-hybrid-game-assets
description: Plan, create, integrate, or audit a hybrid asset pipeline for a Three.js or web game. Use when choosing among imported meshes, procedural 3D geometry, AI-generated reference art, 2D UI media, sprites, VFX, and performance-ready runtime asset delivery.
---

# Build Hybrid Game Assets

Choose the asset representation that best serves gameplay, readability, iteration speed, and runtime budget. Do not force every reference image through image-to-3D reconstruction.

## Classify the asset before making it

| Need | Preferred representation |
| --- | --- |
| Hero character or complex authored animation | Imported rigged mesh, with verified license and scale |
| Weapon, relic, pickup, creature variant, architecture, or interaction prop | Procedural Three.js geometry when controllable silhouette, sockets, collision, or code-driven variants matter |
| Concept, class portrait, inventory icon, cursor, backdrop, or menu treatment | Generated or authored 2D image/video used directly as UI media |
| Level mood, composition, or spacing reference | Concept image used as visual guidance; author the actual playable level separately |
| Reference image whose visible form itself must become a code model | Use `img2threejs` with its quality gates and state the result is a reconstruction, not extracted geometry |

## Create image-first work accurately

Generate a compact reference set: hero view, silhouette/side view when geometry matters, palette/material close-up, and usage context. Define camera distance, scale, pivot, collision, attachment sockets, animation needs, and budget before implementation. A single image cannot establish hidden geometry; request more views or select deliberate stylization.

## Build the runtime asset

- For imported meshes, normalize coordinate system, scale, pivot, materials, animation clips, and ownership/license before scene integration.
- For procedural geometry, expose a factory with named parts, stable sockets, deterministic variation, collider guidance, and reusable materials.
- For 2D assets, export transparent media at the actual display density; provide alt text/labels where user-facing and avoid using raster art as fake 3D collision.
- Keep authored content identifiers separate from runtime state. Do not duplicate item, material, or gameplay facts in UI code.

## Verify in the game, not the asset viewer

Check the real camera distance, lighting, readability, collision/contact, animation, mobile viewport, and performance. Measure representative draw calls, triangles, texture count, and frame time. Keep visuals original: use references for visual grammar, then create new identity, geometry, and media.

## Record provenance

Track whether each runtime asset is imported, procedural, generated 2D, or reference-only, together with source/license and generation input where applicable. Do not claim an image-to-model pipeline unless source and runtime code actually demonstrate one.

© MengTo · MIT · MengTo/Skills

Похожие скиллы

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
pixijs-assets pixijs Скилл учит агента загружать ассеты в PixiJS v8 через синглтон Assets. Помогает настроить бандлы, шрифты, спрайтшиты и парсеры для ссылок без расширений. CX Codex +1 5 900установок game-3d-assets OpusGameLabs Подбирает, генерирует и встраивает 3D-модели GLB и GLTF в браузерные игры на Three.js вместо стандартных кубов и сфер. CX Codex +1 1 100установок threejs-game-director majidmanzarpour Скилл-режиссёр для браузерных игр на Three.js: ведёт от играбельного цикла до графики, UI и проверки в браузере, раздавая фазы соседним скиллам. CX Codex +1 3 100установок threejs-game OpusGameLabs Задаёт структуру проекта и обязательные модули для 3D-игры в браузере на Three.js. Пригодится, когда агенту нужно развернуть сцену и игровой цикл с нуля. CX Codex +1 1 100установок threejs-aaa-graphics-builder majidmanzarpour Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок web-game-foundations официальный OpenAI Задаёт архитектуру браузерной игры до начала кодинга. Помогает выбрать движок и отделить симуляцию от рендера. CX Codex GP ChatGPT 52установок

Из того же набора148

build-game-inventory Помогает собрать или исправить игровой инвентарь: предметы, экипировку, перетаскивание, сохранения и проверки без потери вещей. CX Codex +1 1 200установок iterate-until-verified Скилл превращает расплывчатое «сделай хорошо» в проверяемые ворота качества и гоняет работу по кругу, пока они не пройдут. CX Codex +1 1 200установок ship-web-games Скилл для сборки, деплоя и смоук-тестирования Three.js и веб-игр. Проверяет запуск, ассеты и управление прямо в браузере на боевом сервере. CX Codex +1 1 200установок tune-enemy-ai Скилл помогает проектировать, отлаживать и балансировать боевой ИИ врагов: агро, выбор цели, навигацию, телеграфы атак и поведение боссов. CX Codex +1 1 200установок author-game-levels Помогает проектировать и править уровни для игр на Three.js с абсолютно плоской геометрией геймплея. Скилл пригодится при настройке маршрутов камеры, аренах и валидации освещения. CX Codex +1 1 200установок build-isometric-arpg Скилл ведёт агента по сборке играбельной изометрической ARPG: цикл игры, камера, бой, зоны, прогрессия и сохранения. CX Codex +1 1 300установок build-game-camera-controls Скилл для настройки игровых камер в Three.js: изометрия, слежение, орбита, окклюзия, тряска и тач-жесты. CX Codex +1 1 300установок publish-project-to-github Упаковывает локальный проект в репозиторий GitHub, создаёт README со скриншотом, запускает аудит секретов и настраивает GitHub Pages. Пригодится для публикации пет-проектов и демо. CX Codex +1 1 100установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой