xr-development
$
npx mdskill add elophanto/EloPhanto/xr-developmentBuild 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
- 12-principles-of-animationAudit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
- accessibility-auditingAudit interfaces against WCAG 2.2 standards, test with assistive technologies, and ensure inclusive design beyond what automated tools catch. Adapted from msitarzewski/agency-agents.
- agency-phase-0-discoveryIntelligence and discovery phase — validate opportunity before committing resources. Adapted from msitarzewski/agency-agents.
- agency-phase-1-strategyStrategy and architecture phase — define what to build, how to structure it, and what success looks like. Adapted from msitarzewski/agency-agents.
- agency-phase-2-foundationFoundation and scaffolding phase — build technical and operational foundation before feature development. Adapted from msitarzewski/agency-agents.
- agency-phase-3-buildBuild and iterate phase — implement all features through continuous Dev-QA loops with orchestrated multi-agent sprints. Adapted from msitarzewski/agency-agents.
- agency-phase-4-hardeningQuality and hardening phase — the final quality gauntlet proving production readiness with evidence. Adapted from msitarzewski/agency-agents.
- agency-phase-5-launchLaunch and growth phase — coordinate go-to-market execution across all channels for maximum impact. Adapted from msitarzewski/agency-agents.
- agency-phase-6-operateOperate and evolve phase — sustained operations with continuous improvement for live products. Adapted from msitarzewski/agency-agents.
- agency-strategyNEXUS multi-agent orchestration strategy — the complete operational playbook for coordinating specialized AI agents across project phases. Adapted from msitarzewski/agency-agents.