spatial-developer
Spatial Developer equips you with patterns and code for AR/VR applications across web and Vision Pro. It covers WebXR setup, hand tracking, spatial audio, gaze-based selection, and 3D interactions using Three.js and React Three Fiber.
Spatial Developer helps you build AR/VR web experiences and Vision Pro apps using WebXR, Three.js, and spatial computing.
AI-generated summary based on this skill's SKILL.md
Install
daffy0208/ai-dev-standards/spatial-developer · repository language: TypeScript
git clone https://github.com/daffy0208/ai-dev-standards
cp -r ai-dev-standards/skills/spatial-developer ~/.claude/skills/spatial-developernpx skillfed install daffy0208/ai-dev-standards/spatial-developerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to build AR VR experiences in browser with Spatial Developer?
Spatial Developer provides patterns and code for creating AR/VR web experiences using WebXR and Three.js. The skill covers foundational setup, hand tracking implementation, spatial audio integration, and gaze-based selection techniques. You'll learn to build immersive 3D interactions that work across browsers and devices, with guidance on optimizing WebXR projects for production deployment.
Does Spatial Developer support Vision Pro app development?
Spatial Developer includes patterns for developing Vision Pro spatial apps and interfaces. While it focuses primarily on web-based spatial computing via WebXR and Three.js, it covers spatial UI design principles and interaction patterns applicable to Vision Pro development, helping you create immersive experiences across both web and native spatial platforms.
How does Spatial Developer handle hand tracking and gestures?
Spatial Developer covers hand tracking and gesture recognition implementation through WebXR APIs. The skill provides code patterns for detecting hand positions, recognizing gestures, and handling controller input. You'll learn to create intuitive spatial interactions using hand data, enabling users to interact with 3D objects naturally in immersive environments.
What 3D libraries does Spatial Developer use?
Spatial Developer leverages Three.js and React Three Fiber for building 3D spatial experiences. These libraries enable you to create complex 3D scenes, manage spatial audio, implement immersive interactions, and optimize rendering performance. The skill provides practical patterns for integrating these tools into WebXR projects.
Can Spatial Developer help with spatial audio and 3D interactions?
Yes, Spatial Developer covers creating immersive 3D interactions and spatial audio for web-based applications. The skill includes patterns for implementing positional audio, managing spatial sound environments, and building intuitive 3D interaction systems that enhance immersion in AR/VR experiences.
What's included in Spatial Developer's production optimization?
Spatial Developer provides guidance on setting up and optimizing WebXR projects for production. This includes performance tuning, device compatibility considerations, deployment best practices, and techniques for ensuring your spatial experiences run smoothly across different hardware and browsers.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```typescript // 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]} />
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/spatial-developer/README.md
skills/spatial-developer/SKILL.md
skills/spatial-developer/manifest.yaml