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
Decision gist · record as of 2025-12-25
Spatial Developer helps you build AR/VR web experiences and Vision Pro apps using WebXR, Three.js, and spatial computing. 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.
Use it when
- Spatial Developer includes patterns for developing Vision Pro spatial apps and interfaces.
- Spatial Developer covers hand tracking and gesture recognition implementation through WebXR APIs.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
daffy0208/ai-dev-standards/spatial-developer · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 3 files
skills/spatial-developer/README.md
skills/spatial-developer/SKILL.md
skills/spatial-developer/manifest.yaml
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build AR/VR web experiences using WebXR and Three.js”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
Learn foundational 3D game systems covering rendering stages, shader types, collision shapes, and camera mechanics. This skill covers optimization strategies like frustum culling and LOD, lighting approaches, and common pitfalls to avoid when building immersive 3D experiences.
This skill transforms 3D Gaussian Splatting representations into parametric CAD models, enabling designers and engineers to work with extracted geometry in standard modeling tools. By bridging the gap between neural scene representations and traditional CAD workflows, it streamlines the process of converting spatial data into editable, structured models for further design iteration.
Master browser game development by matching your project to the right framework—Phaser for full 2D features, PixiJS for rendering, Three.js or Babylon.js for 3D. Covers WebGPU browser support, asset compression strategies, performance optimization, and PWA implementation for offline play.
C++ Expert provides in-depth instruction on contemporary language standards and advanced development practices. Learn concepts, ranges, coroutines, and memory strategies alongside performance techniques like zero-cost abstractions and compile-time computation. Build proficiency with smart pointers, move semantics, and template metaprogramming for production-grade applications.
This skill covers foundational game development patterns and architectures for building games across platforms. You'll explore game loop design, entity component systems, 2D mechanics like sprite animation and collision detection, and AI approaches including finite state machines and pathfinding.
More skills game-art (MIT)