web3d-dev — realtime 3D on the web, three skills

Agent skills for building 3D on the web with three.js and React Three Fiber: getting the scene to run on every GPU it meets, getting assets into it within a budget, and making things in it move. Every API fact is verified against three.js r186 ([email protected]), and the repository's gate checks each code block against that release's exports.

| Skill | The question it answers | |---|---| | web3d-runtime | How does the scene run — WebGPU and its WebGL2 fallback, TSL and compute, post-processing, device loss, the frame loop, profiling, R3F on WebGPU — and what does it fall back to? | | web3d-assets | How does a model, texture or character get from a source to the frame within a budget — the glTF pipeline, target profiles, loaders, sourcing and licences, the asset service when present? | | web3d-animation | How does it move — the technique, the asset half (rig, clip canon, export, QA) and the runtime half (clock, mixer, blending, crowds, reduced motion)? |

Each skill leads with the failures that are silent in r186 — render() before init(), positionNode collapsing instances, computeAsync not waiting for the GPU, drei components that do not run on WebGPU, a second skin-weight set dropped without a word — and then the patterns. References live inside their owning skill and load on demand.

Start

Invoke the skill for the question you have: /web3d-runtime, /web3d-assets or /web3d-animation from a skills directory, or /web3d-dev:<skill> from the plugin. Each one inspects the project first (versions, renderer, loader, assets) and reports a table plus one next action.

The asset service. web3d-assets and web3d-animation detect the foundry_* tools or the skill of a machine that runs that service and delegate asset orders to it; without it they work by the same principles by hand — target profile, gate twice, one manifest per file, licences in four areas, capped spend.

Neighbours. Landing-page heroes and scroll motion are sheleg-design; a Quest headset product is xr-dev; rendered video is HyperFrames or Remotion; engine work is Unity's, Unreal's or Godot's own skills.

Install

Claude Code plugin:

/plugin marketplace add ssheleg/web3d-dev
/plugin install web3d-dev@web3d-dev

Portable Agent Skills:

npx skills add ssheleg/web3d-dev

Use one channel per agent. For a family installation, update through npx sshlg-skills update. Restart the agent after updates so skills reload.

Verifying a change

The repository carries tests; the payload carries the skills and references.

npm test
npm run test:negatives
node test/installer_test.js
python3 test/evals_validate.py
claude plugin validate . --strict
claude plugin validate plugins/web3d-dev --strict
python3 test/gen_three_exports.py   # online: refresh the three.js export snapshot after a pin move

Evaluation documentation separates trigger and scenario definitions from executed probes. The facts behind every reference are in the docs study, and the requirements and decisions in the spec.

Provenance

The gotcha-first shape was informed by the public webgpu-threejs-tsl skill. No text was copied from it; each fact here was re-verified against the r186 package, and several of its examples' failure modes appear as gotchas.

Releases

Push a vX.Y.Z tag after its versioned commit reaches the default branch. GitHub Actions validates the pack, creates the GitHub release and publishes to npm with provenance through trusted publishing. See release setup and recovery.

License

MIT for this pack. Third-party tools, assets and models keep their own licences — the skills say how to check them before shipping.