threejs-debug-profiler — скилл для Claude Code: обзор и установка
Ищет причины пустого экрана и сбоев рендера в браузерных играх на Three.js. Помогает замерить вызовы отрисовки и расход памяти без поломки геймплея.
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a claude-codeЧто делает threejs-debug-profiler
Скилл задаёт строгий регламент поиска корня проблем при разработке 3D-игр. Сначала воспроизводится сценарий с теми же URL и командой. Затем проверяются ошибки консоли и сети. Диагностика охватывает рендерер, камеру, сцену, цикл анимации, физику и ввод. В сложных ситуациях агент обращается к файлу references/debug-playbook.md и структуре __THREE_GAME_DIAGNOSTICS__.
Оптимизация строится только на измерениях. Нельзя профилировать dev-сборку. Метрики снимут искажёнными из-за отладочного окружения, поэтому замеры требуют production preview. Агент фиксирует базовые показатели одного сценария, классифицирует узкое место, вносит одну правку и сравнивает результат.
В отчёте фиксируются причина сбоя, изменённые файлы, замеры до и после правок, а также оставшиеся риски.
Какие задачи решает
- найти причину пустого экрана при запуске игры
- устранить несовпадение размера canvas и буфера отрисовки
- локализовать лишние вызовы отрисовки и перерасход памяти
- исправить сбои ввода на мобильных устройствах
Примеры запросов агенту
- Найди причину пустого экрана в Three.js по ошибкам в консоли и данным
__THREE_GAME_DIAGNOSTICS__ - Замерь draw calls и геометрию в production preview этой сцены
- Проверь, почему размер canvas не совпадает с буфером отрисовки после изменения окна
Как установить threejs-debug-profiler
1Через Skills CLI (Vercel)
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a claude-code2Вручную: положить файлы
~/.claude/skills/threejs-debug-profiler/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/threejs-debug-profiler/
1Через Skills CLI (Vercel)
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a codex2Вручную: положить файлы
.agents/skills/threejs-debug-profiler/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a cursor2Вручную: положить файлы
.cursor/skills/threejs-debug-profiler/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install majidmanzarpour/threejs-game-skills threejs-debug-profiler2Вручную: положить файлы
.github/skills/threejs-debug-profiler/SKILL.md1Через Skills CLI (Vercel)
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a gemini-cli2Командой платформы
gemini skills install https://github.com/majidmanzarpour/threejs-game-skills --path skills/threejs-debug-profilerВручную: положить файлы
.devin/skills/threejs-debug-profiler/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о threejs-debug-profiler
Как установить threejs-debug-profiler в Claude Code?
Выполните команду npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler -a claude-code. Инструкции скилла сохранятся в путь ~/.claude/skills/threejs-debug-profiler/SKILL.md.
Что делает threejs-debug-profiler?
Скилл направляет агента при поиске багов рендера, пустого экрана, сбоев анимации и звука в Three.js. Также он помогает замерять вызовы отрисовки, шейдеры и потребление памяти.
Зачем скилл требует профилировать именно production preview?
Сборка для разработки содержит отладочный код и несжатые ресурсы, которые искажают реальную нагрузку на GPU и CPU. Измерения на preview показывают чистую производительность игры.
Исходный текст
SKILL.md · MIT
--- name: threejs-debug-profiler description: "Debug and profile Three.js browser games: blank canvases, render and runtime bugs, asset and audio loading, animation, resize, mobile input, plus performance profiling of draw calls, triangles, textures, memory, shader and post-processing cost, and bundle size." --- # Three.js Debug Profiler Find root causes and optimize measured bottlenecks without breaking playability. Follow the changed behavior's scope. Reuse the lead's existing reproduction and evidence; verify the affected path after a fix. A passing focused check only needs broader testing when shared behavior changed or an unresolved risk warrants it. Return measurements and defects to the lead for the consolidated verification pass. ## Reference `references/debug-playbook.md` — ordered triage for blank canvas, asset and audio loading, loop/animation/physics, input and mobile, the profiling sequence, and the `__THREE_GAME_DIAGNOSTICS__` shape. Read it when debugging or profiling anything non-obvious. ## Debug Reproduce first, with the same command and URL the user had, and read the console, page, and network errors. Find the module that owns the failure (renderer, loop, camera, scene, assets, audio, input, physics, UI, or base path), fix the root cause there, and retest the exact broken path. The playbook's triage order covers the common causes, such as more than one active loop, a canvas whose display size doesn't match its drawing buffer, and wrong delta units. ## Profile Profile the production preview when user-facing performance matters. Baseline one fixed scenario, classify the bottleneck (CPU, GPU draw, fragment, vertex, memory, or network), change one thing, and re-measure the same scenario, confirming visuals and playability held. The playbook lists the metrics to baseline and the optimizations in order of payoff. ## Report Lead with the root cause or the measured bottleneck. Then files changed, baseline and post metrics, commands, screenshots, the broken path retested, and residual risks.
© majidmanzarpour · MIT · majidmanzarpour/threejs-game-skills