Skip to content
Get packs

Optimize Three.js Games

Profile and speed up Three.js/WebGL game performance without breaking gameplay

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent a disciplined way to make browser-based 3D games (built with Three.js or WebGL) run faster. The agent first records a repeatable test scene with performance measurements, then works out whether the CPU or the graphics processor is the bottleneck. It applies low-risk fixes first, such as reusing geometry, pooling effects, and culling off-screen work, and re-checks the same gameplay path afterward to confirm nothing regressed.

Great for

  • Game developers whose Three.js or WebGL projects stutter, drop frames, or run poorly on phones
  • Teams who want performance changes checked against the same gameplay scenario rather than guessed at
  • Developers who need a structured checklist covering draw calls, texture and geometry budgets, and adaptive quality

Skip it if

  • Non-Three.js projects such as native engines, Unity or Unreal games, or plain web pages with no real-time 3D (the instructions are specific to Three.js/WebGL)
  • Users without a way to run the game in a browser, since the skill's measurement steps depend on running and profiling the project
  • Anyone expecting a one-click speed boost: the skill asks for measurement and verification, which takes time, and it may change quality settings in the project's code

Try asking

  • “Our game drops to 20 fps when many enemies and particles are on screen. Profile it and suggest low-risk fixes.”
  • “Reduce draw calls and texture memory in my Three.js level without changing how combat feels.”
  • “Add adaptive quality settings so the game lowers effects on mobile devices.”
  • “Check whether my WebGL game's frame time regressed after my last change, using the same encounter as before.”
Step-by-step guide: how to use Optimize Three.js GamesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    optimize-threejs-games.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip optimize-threejs-games.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip optimize-threejs-games.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe the exact gameplay scenario and target devices up front so the agent can build the repeatable test encounter it asks for.
  • Review every code change the agent makes, especially quality-setting changes, and confirm combat readability and controls still work.
  • Ask the agent to report before-and-after frame time, draw calls, and triangle counts so you can judge whether the gains are real.

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.