PMNDRS XR

Use this skill for WebXR experiences built with React Three Fiber and the React Three XR/uikit/handle packages.

Core Workflow

Inspect the app structure and package manager before editing.
If the workspace is empty, scaffold a minimal runnable vertical slice first: package scripts, src/main, src/App, styles, and vitexec/play. Get that slice building before expanding the scene.
Use the React Three Fiber architecture: @react-three/xr plus <Canvas> and <XR store={store}>.
Enter AR/VR from a real user gesture such as a DOM button calling store.enterAR() or store.enterVR().
Put immersive status, score, checklist, report, and controls inside the 3D/WebXR scene. DOM is acceptable for the initial session-entry button and optional desktop fallback, not as headset UI.
Build interactions through real spatial input: pointer events when appropriate, documented handle components, controller/hand pose, near interaction, controller select events, hit-test, or anchors.
For editor/configurator/assembly tasks, use visible handles/gizmos or grabbable affordances and prove drag/translate/rotate/snap behavior through object transform changes.
Validate with a live XR walkthrough when the task is an XR experience. The passing path should enter an emulated XR session, move the headset/viewer, aim controllers, interact with visible in-scene targets, record video, and assert view composition.

Read the smallest relevant reference first: