Aframe Webxr
Scaffold browser-based VR, AR, and 3D scenes with A-Frame’s HTML-first ECS so you ship immersive WebXR without heavy custom Three.js glue.
Overview
aframe-webxr is an agent skill for the Build phase that helps solo builders create browser WebXR, VR, and AR scenes using A-Frame’s declarative HTML entity-component model.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill aframe-webxrWhat is this skill?
- Entity-component-system with HTML entities, geometry, material, position, and rotation attributes
- Primitives such as a-box for fast scene prototyping with minimal JavaScript
- Cross-platform WebXR targets: desktop, mobile, and headset
- VR controller interactions, 360° media viewers, and AR hit testing patterns
- Declarative layer on Three.js for accessible HTML-first 3D
Adoption & trust: 705 installs on skills.sh; 227 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a cross-device immersive web experience but drowning in Three.js boilerplate slows your indie timeline.
Who is it for?
Builders prototyping VR showrooms, AR try-ons, 360 tours, or playful 3D marketing sites inside a normal web stack.
Skip if: High-performance native VR games, teams that require custom shaders and engine-level control from day one, or projects with no browser/WebXR target.
When should I use this skill?
Creating WebXR applications, VR/AR experiences, 360-degree viewers, or immersive web content with A-Frame, entity-component-system, or HTML-based 3D scenes.
What do I get? / Deliverables
You ship working A-Frame scenes with primitives, components, and WebXR hooks suitable for headsets, mobile AR, or embedded 3D on a landing page.
- A-Frame HTML scene with entities or primitives
- WebXR-ready page tested on intended form factors
- Component snippets for interaction or media as scoped by the task
Recommended Skills
Journey fit
How it compares
HTML-first WebXR framework skill—not a Unity export pipeline or a generic React UI component library.
Common Questions / FAQ
Who is aframe-webxr for?
Frontend-oriented solo developers and designers who want immersive 3D/VR/AR in the browser with mostly HTML and light scripting.
When should I use aframe-webxr?
During Build frontend when tasks mention A-Frame, WebXR, VR/AR development, entity-component-system, 360 media, or declarative 3D scenes.
Is aframe-webxr safe to install?
It is documentation-style guidance; review the Security Audits panel on this Prism page and audit any third-party A-Frame components or scripts you load at runtime.
SKILL.md
READMESKILL.md - Aframe Webxr
# A-Frame WebXR Skill ## When to Use This Skill - Build VR/AR experiences with minimal JavaScript - Create cross-platform WebXR applications (desktop, mobile, headset) - Prototype 3D scenes quickly with HTML primitives - Implement VR controller interactions - Add 3D content to web pages declaratively - Build 360° image/video experiences - Develop AR experiences with hit testing ## Core Concepts ### 1. Entity-Component-System (ECS) A-Frame uses an entity-component-system architecture where: - **Entities** are containers (like `<div>` in HTML) - **Components** add functionality/appearance to entities - **Systems** provide global functionality ```html <!-- Entity with components --> <a-entity geometry="primitive: box; width: 2" material="color: red; metalness: 0.5" position="0 1.5 -3" rotation="0 45 0"> </a-entity> ``` **Primitives** are shortcuts for common entity + component combinations: ```html <!-- Primitive (shorthand) --> <a-box color="red" position="0 1.5 -3" rotation="0 45 0" width="2"></a-box> <!-- Equivalent entity-component form --> <a-entity geometry="primitive: box; width: 2" material="color: red" position="0 1.5 -3" rotation="0 45 0"> </a-entity> ``` ### 2. Scene Setup Every A-Frame app starts with `<a-scene>`: ```html <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script> </head> <body> <a-scene> <!-- Entities go here --> <a-box position="-1 0.5 -3" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> ``` The scene automatically injects: - Default camera (position: `0 1.6 0`) - Look controls (mouse drag) - WASD controls (keyboard movement) ### 3. Camera Systems **Default Camera** (auto-injected if none specified): ```html <a-entity camera="active: true" look-controls wasd-controls position="0 1.6 0"></a-entity> ``` **Custom Camera**: ```html <a-camera position="0 2 5" look-controls wasd-controls="acceleration: 50"></a-camera> ``` **Camera Rig** (for independent movement and rotation): ```html <a-entity id="rig" position="0 0 0"> <!-- Camera for head tracking --> <a-camera look-controls></a-camera> <!-- Movement applied to rig, not camera --> </a-entity> ``` **VR Camera Rig with Controllers**: ```html <a-entity id="rig" position="0 0 0"> <!-- Camera at eye level --> <a-camera position="0 1.6 0"></a-camera> <!-- Left hand controller --> <a-entity hand-controls="hand: left" laser-controls="hand: left"> </a-entity> <!-- Right hand controller --> <a-entity hand-controls="hand: right" laser-controls="hand: right"> </a-entity> </a-entity> ``` ### 4. Lighting **Ambient Light** (global illumination): ```html <a-entity light="type: ambient; color: #BBB; intensity: 0.5"></a-entity> ``` **Directional Light** (like sunlight): ```html <a-entity light="type: directional; color: #FFF; intensity: 0.8" position="1 2 1"></a-entity> ``` **Point Light** (radiates in all directions): ```html <a-entity light="type: point; color: #F00; intensity: 2; distance: 50" position="0 3 0"></a-entity> ``` **Spot Light** (cone-shaped beam): ```html <a-entity light="type: