spatial-developer

Develop AR/VR spatial experiences with WebXR, Vision Pro, and React Three Fiber.

34|7|Updated Oct 22, 2025
One-click install
npx skills add https://github.com/daffy0208/ai-dev-standards --skill spatial-developer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: spatial-developer
Source: https://github.com/daffy0208/ai-dev-standards/tree/main/SKILLS/spatial-developer
Command: npx skills add https://github.com/daffy0208/ai-dev-standards --skill spatial-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the complexity of developing spatial computing applications, making AR/VR development accessible across multiple platforms.

Core Features & Use Cases

  • WebXR Development: Create browser-based AR/VR experiences with hand tracking and spatial interactions.
  • Vision Pro Development: Build native visionOS apps with spatial UI and RealityKit integration.
  • Use Case: Imagine you need to create an immersive product demo in VR. Use this Skill to build a WebXR scene where users can interact with 3D models using hand gestures and controllers.

Quick Start

Use the spatial-developer skill to create a WebXR VR scene with hand tracking and basic 3D objects.

Frequently Asked Questions about spatial-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build WebXR AR/VR experiences with hand tracking?

WebXR AR/VR experiences use browser APIs and libraries like React Three Fiber with @react-three/xr to enable hand tracking, spatial interactions, and 3D object manipulation. This Skill integrates VRButton/ARButton setup, hand controller input, and Three.js rendering to create immersive scenes accessible across browsers and Vision Pro.

Can I develop Vision Pro apps with spatial UI and RealityKit?

Yes. This Skill supports native visionOS development using RealityKit and spatial UI patterns, alongside WebXR browser-based approaches. It covers the full Vision Pro toolchain including SharePlay for collaborative experiences and hand gesture recognition.

What's the difference between WebXR browser development and native Vision Pro apps?

WebXR runs AR/VR in browsers with cross-platform compatibility and hand tracking; native visionOS apps use RealityKit for deeper platform integration and spatial features. This Skill covers both approaches, letting you choose based on deployment target and capability needs.

Do I need Three.js knowledge to build spatial experiences?

Three.js experience is helpful but not required. This Skill abstracts 3D scene management through React Three Fiber and @react-three/xr, handling controllers, hand input, and hit-testing so you focus on interaction design rather than low-level graphics code.

How do spatial audio and hit-testing work in immersive scenes?

Spatial audio positions sound in 3D space relative to the user; hit-testing detects collisions between hand rays or controllers and 3D objects. This Skill integrates both into WebXR and Vision Pro workflows, enabling realistic interaction feedback and directional audio cues.

What platforms and devices does this Skill support?

This Skill supports WebXR-capable browsers on AR/VR headsets, standalone XR devices, and native Vision Pro apps. Hand tracking, controllers, and spatial interactions work across all supported platforms, adapting input methods to available hardware.