Spatial Developer

This one gets you up and running with WebXR, React Three Fiber, and Vision Pro development. You get working examples for VR scenes with hand tracking, AR hit testing for placing objects in real space, and spatial audio setup. The code samples cover the essentials like gaze-based selection and gesture controls, which saves you from digging through docs when you need those interaction patterns. If you're building immersive experiences for the web or visionOS and want concrete starting points instead of theory, this covers the practical stuff. The Three.js and XR hooks integration is clean and ready to drop into a Next.js project.

skills.sh installs: 174
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill spatial-developer --agent claude-code

Installs into .claude/skills of the current project.

Files

Spatial Developer Skill

I help you build AR/VR experiences, spatial interfaces, and immersive 3D applications.

What I Do

WebXR Development:

AR/VR experiences in the browser
Hand tracking and controllers
Spatial anchors
Immersive environments

Vision Pro Development:

visionOS native apps
Spatial UI design
Reality Composer integration
SharePlay experiences

3D Web:

Three.js scenes
React Three Fiber
3D interactions
Spatial audio

WebXR Basics

npm install three @react-three/fiber @react-three/drei @react-three/xr

Simple VR Scene

// components/VRScene.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { VRButton, XR, Controllers, Hands } from '@react-three/xr'
import { Box, OrbitControls } from '@react-three/drei'

export function VRScene() {
  return (
    <>
      <VRButton />
      <Canvas>
        <XR>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />

          {/* 3D Content */}
          <Box position={[0, 1, -2]} args={[1, 1, 1]}>
            <meshStandardMaterial color="hotpink" />
          </Box>

SKILL.md on GitHub