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

threejs-debug-profiler — скилл для Claude Code: обзор и установка

Ищет причины пустого экрана и сбоев рендера в браузерных играх на Three.js. Помогает замерить вызовы отрисовки и расход памяти без поломки геймплея.

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

Что делает 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-code

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

~/.claude/skills/threejs-debug-profiler/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/threejs-debug-profiler/

По шагам, с командами для каждой платформы: Как установить скилл в 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

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

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
optimize-threejs-games MengTo Скилл для профилирования и ускорения игр на Three.js и WebGL: находит, что тормозит — процессор или видеокарта, и чинит без потери геймплея. CX Codex +1 1 300установок threejs-game OpusGameLabs Задаёт структуру проекта и обязательные модули для 3D-игры в браузере на Three.js. Пригодится, когда агенту нужно развернуть сцену и игровой цикл с нуля. CX Codex +1 1 100установок mint-threejs-skills mintdotgg Набор инструкций для создания браузерных 3D-приложений, игр и вьюверов на Three.js с генерацией моделей через Mint MCP. Помогает настроить пайплайн ассетов и рендеринг без рутины. CX Codex +1 616установок build-mobile-threejs-games MengTo Скилл для сборки и проверки Three.js-игры под мобильный веб: тач-управление, адаптивный HUD, бюджеты производительности. CX Codex +1 1 300установок threejs-fundamentals CloudAI-X Помогает настроить базовую сцену Three.js r186: рендерер, камеры, цикл анимации с THREE.Timer и import map для WebGL или WebGPU с TSL. CX Codex +1 17 400установок threejs-shaders CloudAI-X Скилл помогает писать кастомные GLSL-шейдеры и материалы для Three.js r186, настраивать униформы и переводить код на TSL для WebGPU. CX Codex +1 15 600установок

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

threejs-3d-generator Генерирует 3D-модели для игр на Three.js через Tripo API: из текста или картинки, с текстурами, ригом и анимациями, и складывает готовые GLB или FBX в проект. CX Codex +1 3 500установок threejs-game-ui-designer Скилл для проектирования игровых интерфейсов на Three.js: HUD, меню, экраны паузы и победы, адаптивная вёрстка для мобильных и десктопа. Помогает избежать наложений, обеспечить читаемость и согласованность со стилем игры. CX Codex +1 3 300установок threejs-gameplay-systems Разворачивает игровой цикл на Three.js, Vite и TypeScript с контролем физики, ввода и камеры. Пригодится при сборке прототипов и настройке гейм-фила. CX Codex +1 3 300установок threejs-aaa-graphics-builder Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок threejs-qa-release Проверяет браузерные игры на Three.js перед релизом: игровой цикл, адаптивность, сборку и визуальные артефакты. Нужен после изменений в механиках или перед публикацией. CX Codex +1 3 000установок threejs-game-director Скилл-режиссёр для браузерных игр на Three.js: ведёт от играбельного цикла до графики, UI и проверки в браузере, раздавая фазы соседним скиллам. CX Codex +1 3 100установок threejs-audio-generator Скилл генерирует через ElevenLabs звуки, музыку и озвучку для игр на Three.js и встраивает их в проект через Web Audio. CX Codex +1 2 900установок threejs-image-generator Генерирует и редактирует 2D-ассеты для игр на Three.js через Gemini API. Подходит для концепт-артов, текстур, UI и исходников под 3D-генерацию. CX Codex +1 2 900установок

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

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