aframe-webxr

aframe-webxr is a development skill for building browser-based 3D, VR, and AR experiences with A-Frame, the declarative WebXR framework built on Three.js that uses HTML and an entity-component-system architecture. It addresses the challenge of creating immersive web content with minimal JavaScript by teaching A-Frame's HTML-first primitives, scene setup, camera rigs, lighting, materials, and controller interactions.

The skill provides a thorough SKILL.md covering core concepts (entities, components, systems, primitives), scene and camera configuration including VR controller rigs, the four light types, and material and texture handling. It ships supporting assets and references: a components library, a WebXR guide, an API reference, a starter A-Frame project (HTML, CSS, JS), and example patterns for VR interaction (two-handed grabbing, inventory systems), AR object placement with hit testing, 360-degree media, multi-user networking, physics, and performance optimization. Two Python helper scripts (a scene generator and a component builder) assist scaffolding. The code examples reference the A-Frame library from its official CDN, standard for web projects.

It is aimed at web developers, creative technologists, and prototypers who want cross-platform WebXR that runs on desktop, mobile, and headsets. Typical uses include VR experiences, AR placement tools, 360-degree image and video viewers, and adding declarative 3D content to existing web pages. The content is entirely educational front-end development material with no risky behavior.