Agent skills

npx skills (skills.sh) installs them for any agent that reads SKILL.md: Claude Code, Codex, Cursor and more. Ask for a skill by name, or in Claude Code type /three-kit:<skill>.

The skills

• kit-adopt

  /three-kit:kit-adopt

  Kit adopt: one app onto the packages, in one pass

  Move one three.js / React Three Fiber app onto the three-kit packages in one pass. Surveys what it carries by hand (debug and perf-meter copies, a studio or mockups shell, hard-coded budgets and pixel ratio, triangle-count test helpers), swaps each for its package (a defineBudgets file with toFitBudget tests, one DevTools drop-in behind ?debug, a three-studio page, three-quality), removes what's dead, verifies nothing changed on screen, and reports lines removed and what the app gained. Use when the user asks to adopt the kit, move an app onto three-kit, or replace an app's copied debug, studio or budget code.

  loop

  1. survey
  2. baseline
  3. budgets
  4. dev tools
  5. studio
  6. quality
  7. prune
  8. verify
  9. report

  references

  • survey
  • swaps
  • verify
  read the skill →source →

• model-pass

  /three-kit:model-pass

  Model pass: one object at a time

  Remodel one three.js / React Three Fiber object at a time for silhouette, topology, triangle budget and z-fighting, measured in a model studio and verified with screenshots against the project's 3D style guide. Use when the user asks for a model pass on an object, or to remodel, clean up or cut the triangles of one model.

  loop

  1. baseline
  2. remodel
  3. audit
  4. distance
  5. verify

  references

  • setup
  • gotchas
  • natures
  • studio
  • style-template
  • verification
  read the skill →source →

• perf-pass

  /three-kit:perf-pass

  Perf pass: the frame, one area at a time

  Fit a whole three.js / React Three Fiber frame to the project's budgets, one area at a time. Surveys draws and triangles at every play position, ranks areas by what the frame really draws, and takes the costliest through the cheapest fix that keeps the look, verified by pixel diff. Use when the user asks for a perf pass, or to fit a scene's frame to its triangle or draw-call budget.

  loop

  1. survey
  2. rank
  3. pass
  4. write back

  references

  • fixes
  • survey
  read the skill →source →

• scene-mockups

  /three-kit:scene-mockups

  Scene mockups: variants to pick, built in the app

  Mock up more detail for one part of a three.js / React Three Fiber scene (props, scenery, characters, vehicles, backdrops) as variants built in the app itself, run a model pass on what's there, and publish a page to pick from; then build the picks into the app. Use when the user asks for mockups, variants or a richer look for part of a scene to choose from.

  loop

  1. scope
  2. study
  3. kit
  4. mockups
  5. capture
  6. pass
  7. picks page

  references

  • capture
  • mockup-page
  read the skill →source →

How they work

• Measured, not estimated. Triangles, draws, z-fighting and budgets come fromthree-audit's console helpers and itsdefineBudgets file; frame costs from three-meter.
• Shown, not claimed. A three-studio page puts the object or area in the app's own light, saves shots to disk and diffs them, so every pass ends with a before/after picture and numbers table.
• The project keeps what it learns. A 3D-STYLE.md style guide and a budgets file live in your repo. Every pass reads them and writes back what it learned.
• No copied code. The skills install the packages and call their APIs, so they stay in step with each release. Fewer draws come from three-batch.

Source and changes: plugins/three-kit on GitHub.