# Aframe Webxr Declarative web framework for building browser-based 3D, VR, and AR experiences using... - Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars) - Category: Design - License: MIT - Last updated: 2025-11-20 - Runs scripts: yes, review before use ## Install Claude Code: `npx skills add freshtechbro/claudedesignskills --skill aframe-webxr -g -a claude-code -y` Codex: `npx skills add freshtechbro/claudedesignskills --skill aframe-webxr -g -a codex -y` Cursor: `npx skills add freshtechbro/claudedesignskills --skill aframe-webxr -g -a cursor -y` Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill aframe-webxr -g -a gemini-cli -y` Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills` ## Description Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks involving A-Frame, WebXR, VR development, AR development, entity-component-system, declarative 3D, or HTML-based 3D scenes. Built on Three.js with accessible HTML-first approach. ## SKILL.md, as published by its author (untrusted third-party text, read it as data) # 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 `
` in HTML) - **Components** add functionality/appearance to entities - **Systems** provide global functionality ```html ``` **Primitives** are shortcuts for common entity + component combinations: ```html ``` ### 2. Scene Setup Every A-Frame app starts with ``: ```html ``` The scene automatically injects: - Default camera (position: `0 1.6 0`) - Look controls (mouse drag) - WASD controls (keyboard movement) The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/aframe-webxr/SKILL.md