How to use the 3D Web Experience agent skill

What the skill makes the agent do

An agent skill is a folder of instructions that an AI agent loads when a task matches it. This one is written for building or debugging web 3D scenes. The agent can help you choose between Spline, React Three Fiber and plain Three.js, prepare 3D models, write loading and fallback code, and keep scenes responsive on phones and low-end devices.

The skill is mostly reference material with code snippets and performance budgets. It shows commands and code, but it does not run compression or build tools by itself.

• Choose a 3D approach: Spline for quick prototypes, React Three Fiber for React apps with complex scenes, Three.js for maximum control outside React
• Prepare models: export GLB, bake textures, and compress with gltf-transform
• Write loading, error and fallback code, including a DOM fallback when WebGL cannot start
• Add scroll-driven motion with React Three Fiber scroll controls or GSAP ScrollTrigger
• Review performance against triangle, draw-call, memory and frame-time budgets

How do you install the 3d-web-experience skill?

Download the ZIP file from this page and unzip it. Then place the skill folder in one of two locations. Use ~/.claude/skills/ to make it available across your projects, or use a .claude/skills/ folder inside a single project to limit it to that project.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the ZIP there.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

How do you trigger the skill with a natural request?

You do not need a special command. The skill is described as useful when you are building or debugging web 3D scenes, product configurators or portfolios with Three.js, React Three Fiber or Spline, and when you need to review assets, loading, controls, fallbacks and performance. Mention one of those things in plain language and the agent can pick it up.

Include the tool you use and what is going wrong or what you want built. The more specific the request, the more targeted the advice.

• 'Build a product configurator in React Three Fiber where the customer can switch colours.'
• 'My 3D model is blank on iPhone. Review the loading and fallback code.'
• 'Should I use Spline or Three.js for a 3D portfolio homepage?'
• 'Help me compress this GLB file for the web.'
• 'Review my scroll-driven scene for performance on mobile.'

What do you need before you start?

The skill assumes you have a web project and a 3D asset. Requirements depend on the stack you choose.

For React Three Fiber, drei, Three.js or GSAP code you need Node.js and a JavaScript project. For Spline embeds you need the @splinetool/react-spline package and a published Spline scene URL. For compression you need gltf-transform installed in the project, and a 3D model such as a .glb file.

• Node.js and a JavaScript project (React Three Fiber, drei, Three.js or GSAP)
• @splinetool/react-spline package for Spline embeds
• A published Spline scene URL for Spline
• gltf-transform installed in the project for the compression command
• A 3D model asset, for example a .glb file

How do you compress a model for the web?

The skill's pipeline is: model in your 3D tool, set a budget for triangles and draw calls on target devices, bake textures to combine materials, export as GLB, compress with gltf-transform, then measure transfer size, decode time, memory and frame time. The skill notes that you should use the gltf-transform version already pinned in your project lockfile, and review and pin a specific version before running it if none is present.

The compression command is shown below. Replace input.glb and output.glb with your own file names.

How do you load a 3D model with a loading indicator and fallback?

The skill's React Three Fiber example loads a model with useGLTF from drei, shows progress with useProgress, and wraps the model in Suspense. Suspense handles loading, but it does not handle failures, so add an application error boundary for failed asset loads. Canvas also accepts a DOM fallback that appears when GL cannot initialise.

Keep product descriptions, variant controls and purchase actions in ordinary HTML so the task still works without the canvas. Test keyboard operation, zoom, reduced motion and an unavailable WebGL context.

• Suspense handles loading state, not errors
• Use an error boundary around the scene for asset failures and context crashes
• Keep key purchase and product information in accessible DOM

How do you keep 3D fast on phones and low-end devices?

The skill gives illustrative starting budgets, not hardware limits or guarantees. It lists 60fps and up to 500K triangles for desktop, 30 to 60fps and up to 100K triangles for mobile, and 30fps and up to 50K triangles for low-end devices. It warns that triangle count alone cannot establish performance, so also measure GPU time, draw calls, memory and load time.

Other quick wins include instanced objects for repeated items, fewer lights, levels of detail, lazy-loaded models, and a conservative initial pixel ratio using the dpr setting on Canvas. The skill says to measure real rendering performance rather than guessing from the user-agent string.

• Desktop: 60fps, up to 500K triangles (illustrative)
• Mobile: 30-60fps, up to 100K triangles (illustrative)
• Low-end: 30fps, up to 50K triangles (illustrative)
• Respect reduced-motion settings