AR/VR/XR Development

SkillAI & models

AR/VR/XR development with Unity XR, WebXR, ARKit, ARCore, Meta Quest SDK, and spatial computing. Use when building augmented reality, virtual reality, mixed reality applications, or spatial experiences.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the AR/VR/XR Development skill

What this skill tells your AI

The instructions your AI receives, as published by travisjneuman/.claude in skills/ar-vr-xr/SKILL.md and read by ahel’s review.

Platform Overview

PlatformSDKTarget Devices
Unity XRXR Interaction ToolkitQuest, Vision Pro, PCVR, mobile
WebXRThree.js, A-Frame, Babylon.jsAny WebXR browser
ARKitRealityKit, ARKitiPhone, iPad, Vision Pro
ARCoreSceneform, ARCoreAndroid devices
Meta QuestMeta XR SDKQuest 2/3/Pro
Apple Vision ProvisionOS, RealityKitVision Pro

Unity XR

// XR Interaction Toolkit setup
using UnityEngine.XR.Interaction.Toolkit;

public class GrabbableObject : XRGrabInteractable
{
    protected override void OnSelectEntered(SelectEnterEventArgs args)
    {
        base.OnSelectEntered(args);
        // Object grabbed
    }

    protected override void OnSelectExited(SelectExitEventArgs args)
    {
        base.OnSelectExited(args);
        // Object released
    }
}

Unity XR Best Practices

  • Target 72-120 FPS (platform-dependent) — frame drops cause nausea
  • Use single-pass instanced rendering for stereo
  • Bake lighting where possible, limit dynamic lights to 1-2
  • Draw calls: <100 for mobile VR, <500 for PCVR
  • Use LOD groups aggressively — user can't see distant detail in VR

WebXR

// Three.js WebXR
import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

renderer.setAnimationLoop((time, frame) => {
    if (frame) {
        const session = renderer.xr.getSession();
        const inputSources = session.inputSources;
        // Handle controller input
    }
    renderer.render(scene, camera);
});

Apple Vision Pro (visionOS)

import SwiftUI
import RealityKit

struct ImmersiveView: View {
    var body: some View {
        RealityView { content in
            let sphere = MeshResource.generateSphere(radius: 0.1)
            let material = SimpleMaterial(color: .blue, isMetallic: true)
            let entity = ModelEntity(mesh: sphere, materials: [material])
            entity.position = [0, 1.5, -1]
            content.add(entity)
        }
        .gesture(TapGesture().targetedToAnyEntity().onEnded { event in
            // Handle tap on entity
        })
    }
}

XR Design Principles

  • Comfort: Avoid artificial locomotion, use teleport or room-scale movement
  • Interaction: Direct manipulation (grab, point) over abstract UI
  • UI placement: World-space UI at comfortable distance (1-3m), avoid head-locked HUD
  • Performance: Frame rate is non-negotiable — optimize ruthlessly
  • Accessibility: Provide seated mode, adjustable scale, color-blind options
  • Spatial audio: 3D audio for immersion and wayfinding (HRTF, ambisonics)

Signals

GitHub stars
97
Forks
22
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
ar-vr-xr-travisjneuman
Source
github.com/travisjneuman/.claude