How to use the 3D Orbit and Inspect agent skill

What the skill makes the agent build

The skill covers one object and two gestures. On hover, the camera leans a few degrees around the object, damped and bounded, so the piece appears to turn toward your pointer. On click, the object (not the camera) is lifted off its bench into a fixed spot in front of the lens, where you drag to turn it, coast, zoom with the wheel or pinch, and put it back.

The skill is written for Three.js and WebGL only. It spells out the timing, bounds, keyboard and accessibility rules that stop the hover and click behaviours from conflicting. The source states that it is a set of instructions plus a reference demo file, and that it does not run anything on its own.

• Hover: a bounded lean toward the pointer, with the lean frozen while a click is possible or the piece is in the hand.
• Click: the piece lifts into a close-up. Drag to turn, scroll or pinch to zoom.
• Closing: press Esc, click away, or use the Close button.
• Touch devices get a slow sway instead of hover, so depth is still shown.

Install the skill (ZIP download or Claude apps)

Download the skill ZIP from this page and unzip it. You can place the skill folder in one of two locations. For a personal install, put it in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.

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

The package contains four files: agents/openai.yaml, demo.html, PROMPT.md and SKILL.md. SKILL.md holds the instructions the agent reads, and demo.html is the reference demo.

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

Trigger the skill with a natural request

You do not need special syntax. Describe the object and the behaviour you want, and name the skill if you want to be sure it is used. PROMPT.md uses the $ prefix on the skill name in its example prompts.

A good request says what the object is, that you want hover lean, and that you want a click to lift it into an inspect view. Mention the controls you need, such as drag to turn and Esc to return.

• Name the object type: product, object, joinery piece or portfolio piece.
• Say the stack: Three.js in a web project.
• State both gestures: hover to lean, click to inspect.

Check what your project needs

The skill needs Three.js (a WebGL library) in the target web project. You also need a browser with WebGL support to view the result. The skill does not add these for you, so confirm they are present before asking the agent to build the scene.

If you want the agent to recreate the full reference demo as a single standalone HTML file, the PROMPT.md recreate prompt loads Three.js through an import map from unpkg. That means the demo page itself loads its library over the network.

• Three.js in the target web project
• A browser with WebGL support
• Optional: network access to unpkg if you use the standalone recreate prompt

Customise the object and the inspect behaviour

The reference demo keeps the joint, the room, the lean, the lift and the return in one module. The source says to copy updateLean, updateHand, openInspect, closeInspect, the pointer block and draw, then swap the meshes for your own object. Nothing else names the joint except FROM, RR and Q_BENCH.

The source also lists which Kibori behaviours are carried over and which are not. The hover lean, the wheel and pinch dolly, arrow-key and +/- control, focus return, live region and touch sway are built in this skill. The hover orbit is not part of the Kibori reference, which has no hover orbit and no free zoom.

• Keep the lean frozen during pointerdown and while inspecting.
• Keep the azimuth bound at ±0.30 rad and elevation at ±0.09 rad.
• Keep the click test at under 6 px and under 600 ms, so drags never open the view.

Safety notes: scripts and network

The skill runs no scripts, according to its listing. It uses no network access as part of the skill itself. The only network reference is the optional recreate prompt, which loads Three.js from unpkg through an import map.

Because the skill is instructions plus a demo file, what you get is ordinary front-end code in your project. Review the code the agent writes before you deploy it, as you would with any change to a web page.

• Runs scripts: no
• Uses network: no (except the optional unpkg import in the recreate prompt)
• Licence: MIT

Accessibility and reduced motion

The skill sets rules for keyboard and focus. The inspect button is a real button that opens with Enter or Space. On open, focus moves to the Close button, Tab is trapped in the view, arrow keys turn the piece, + and - zoom, and Esc closes it. Focus returns to the opener only after the page copy is visible again.

With prefers-reduced-motion set, the piece rests at the bench pose, the lift is instant and there is no idle spin. Drag, keys and zoom still work.

• Announcements go through a separate status region, not on the dialog.
• Hover lean is replaced by a fixed pose for reduced motion users.
• Touch devices get a slow sway instead of hover.