1. Habit
  2. Skills
  3. Three.js Debug Profiler skill
majidmanzarpour · 3K installs

Three.js Debug Profiler skill
Runs by itself, bug or slowdown reported.

Root causes fixed, bottlenecks measured.

Install the Three.js Debug Profiler skill and make it a habit: follow https://gethabit.dev/skills/majidmanzarpour/threejs-debug-profiler.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

3K installs3K starsMIT licenceSource on GitHub ↗

Three.js Debug Profiler

by majidmanzarpour · 3K installs

The skill

Three.js Debug Profiler debugs and profiles Three.js browser games: blank canvases, runtime and loading bugs, input issues, and draw call, texture, memory and shader costs.

Only when you ask.

The habit

Root causes fixed, bottlenecks measured.

↻ Runs by itselfbug or slowdown reported

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

bug or slowdown reported. Runs in Claude Code routine.

  • ↻ bug or slowdown reported
  • blank canvas, runtime bug or frame drop reported

02

It checks its work

broken path retested. If a check fails, it tries again.

  • ✓the exact broken path is retested after the fix
  • ✓baseline and post metrics are recorded for the same scenario
  • ✓no new console or network errors appear

03

It remembers

profile metrics log. The next run reads it first: earlier baselines, bottlenecks and fixes.

loops/threejs-game-profile-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one bug or one bottleneck per run, with at most 2 retest retries.

  1. 01

    Reproduce

    Your agent reproduces with the same command and URL and reads console, page and network errors.

  2. 02

    Find the owner

    It finds the module that owns the failure, such as renderer, loop, assets or input.

  3. 03

    Fix the root

    It fixes the root cause there using the debug-playbook triage order.

  4. 04

    Baseline

    For speed issues it profiles one fixed scenario and classifies the bottleneck.

  5. 05

    Change one thing

    It changes one thing and re-measures the same scenario, checking visuals and playability.

  6. 06

    Report

    It leads with the root cause or bottleneck, then files, metrics, commands and residual risks.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Three.js Debug Profiler skill helps.

Use it when

  • ✓ a Three.js canvas is blank
  • ✓ a browser game drops frames
  • ✓ assets or audio fail to load

Skip it when

  • – the project does not use Three.js
  • – you only need new features

Questions

Three.js Debug Profiler skill, answered.

Why change one thing at a time?

So each re-measure of the same scenario shows what that single change did.

What are common blank-canvas causes?

The playbook lists more than one active loop, a canvas size that does not match its buffer, and wrong delta units.

How do I install the Three.js Debug Profiler skill?

Copy the prompt at the top into your agent. It installs the skill from majidmanzarpour/threejs-game-skills and sets up the habit. Or run npx skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler.

Is the Three.js Debug Profiler skill free?

Yes. It is published under MIT. Habit is free too.

Three.js Debug Profiler. Now as a habit.

Install the Three.js Debug Profiler skill and make it a habit: follow https://gethabit.dev/skills/majidmanzarpour/threejs-debug-profiler.md

  • Free
  • No account
  • Undo in one line

All majidmanzarpour skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by majidmanzarpour, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.