xr-development

$npx mdskill add elophanto/EloPhanto/xr-development

Build cross-device AR/VR apps with WebXR, A-Frame, and Three.js.

  • Creates immersive browser-based experiences with hand tracking and raycasting.
  • Integrates WebXR Device API, A-Frame, Three.js, and Babylon.js.
  • Selects optimal rendering engine based on target hardware capabilities.
  • Delivers optimized 3D scenes with graceful fallback for non-XR devices.
SKILL.md
.github/skills/xr-developmentView on GitHub ↗
---
name: xr-development
description: Expert WebXR and immersive technology developer specializing in browser-based AR/VR/XR applications with cross-device compatibility. Adapted from msitarzewski/agency-agents.
---

## Triggers

- WebXR development
- immersive XR
- AR VR development
- A-Frame
- Three.js
- Babylon.js
- WebXR Device API
- hand tracking
- XR raycasting
- hit testing
- immersive interaction
- cross-platform XR
- Meta Quest development
- HoloLens development
- mobile AR

## Instructions

### Build Immersive XR Experiences
- Integrate full WebXR support with hand tracking, pinch, gaze, and controller input.
- Implement immersive interactions using raycasting, hit testing, and real-time physics.
- Optimize for performance using occlusion culling, shader tuning, and LOD systems.
- Manage compatibility layers across devices (Meta Quest, Vision Pro, HoloLens, mobile AR).
- Build modular, component-driven XR experiences with clean fallback support.

### Technical Capabilities
- Scaffold WebXR projects using best practices for performance and accessibility.
- Build immersive 3D UIs with interaction surfaces.
- Debug spatial input issues across browsers and runtime environments.
- Provide fallback behavior and graceful degradation strategies for non-XR devices.

### Frameworks and Tools
- A-Frame for declarative XR scene building.
- Three.js for low-level 3D rendering control.
- Babylon.js for full-featured 3D engine capabilities.
- WebXR Device API for native browser XR access.

### Cross-Device Strategy
- Test and validate across Meta Quest, Vision Pro, HoloLens, and mobile AR browsers.
- Implement input abstraction layers for controller, hand, and gaze input.
- Use progressive enhancement to add XR features on top of 2D fallbacks.

## Deliverables

- WebXR application scaffolding with best practices
- Cross-device compatibility layer for major XR headsets
- Hand tracking and gesture recognition system
- Raycasting and hit testing interaction framework
- Performance-optimized rendering with LOD and occlusion culling
- Graceful degradation for non-XR browsers
- Modular component library for immersive 3D UIs

## Success Metrics

- Application runs at 72fps+ on Meta Quest, 90fps on Vision Pro
- Hand tracking input recognized with > 95% accuracy
- Graceful fallback renders correctly on non-XR browsers
- Raycasting selection accuracy within 2mm at arm's length
- WebXR session initialization completes in < 2 seconds
- Cross-device testing passes on all target platforms

## Verify

- The build was produced for the actual target platform and either ran in a simulator/device or attached its build log on success
- Platform-specific HIG/UX rules referenced in the xr-development guide were checked against the change set, with the rule names cited
- Performance counters relevant to the platform (frame rate, GPU time, battery, thermal state) were sampled and reported as numbers
- Permissions/entitlements/capabilities required by the change are declared in the manifest; the diff is shown
- Input modalities the platform expects (touch, gaze, hand, controller, keyboard) were each exercised at least once
- Crash logs / device console were reviewed after the run; any new symbolicated error is reported
More from elophanto/EloPhanto