Agent skill · Audited from source

aframe-webxr

skill · freshtechbro/claudedesignskillsMIT licenceAudited 20 Oct 2026 · source 2b2fd871ca33

★ 1,091pushed 334 days ago

✓SAFEGrade B · 89/100 · 20 Oct 2026 · 2b2fd87

1,091repo stars · whole freshtechbro/claudedesignskills

Is it safe? Yes — SAFE, grade B (89/100). We read this skill's source at commit 2b2fd871ca33 and found no filesystem, network or shell access and no hard-coded secrets. What it does: 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…

Ask an AI about this pageGChatGPT CClaude PPerplexity GeGemini XGrok

CoCopilot AIGoogle AI Mode

Cite

Cite this page

ModelsAtlas. “aframe-webxr (freshtechbro/claudedesignskills)”. Retrieved 20 Oct 2026. https://modelsatlas.com/skills/freshtechbro/aframe-webxr

Trust audit

Audit 0.4.1 · source read 20 Oct 2026

Trust score89/100✓SAFE B

0 critical0 high0 medium0 low0 info

SAFE means nothing in the source contradicts what the skill says it does. Grade B is shared by 13,985 of 14,816 audited skills.

What the source does

FilesystemNone observedNo reads or writes in the source
NetworkNone observedNo outbound calls in the source
ShellNone observedNo commands run in the source
DependenciesPinnedNothing floats
SecretsNone foundNo keys in source

Five audit layers

Layer	What we check	Result
`L0` Provenance	Repo owner, licence, archive status, activity	PASS
`L1` Static source	Secrets, path traversal, supply chain, hidden code	PASS
`L2` Instructions	Prompt injection, authority framing, hidden directives	PASS
`L3` Inventory	The files and declarations match the source	PASS
`L4` Sandbox	Run in isolation and watch behaviour	SKIPPED why

Gates applied: no behavioural pass.

Findings (0)

No findings at any severity. We re-audit when the source changes.

Audit 0.4.1 · source sha 2b2fd871ca33 · 20 Oct 2026Report an issue or request a re-scan

Provenance

Who published it, and what the verdict is pinned to

Publisherfreshtechbro GitHub userOwner of the repository this skill is read from
Source folderfreshtechbro/claudedesignskills/.claude/skills/aframe-webxrThe exact folder we audited
LicenceMITAs the repository states it
Commit pinned for this verdict2b2fd871ca33A new audit runs when the source changes
Repository statusNot archivedLast push 334 days ago
Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

What it tells the agent

Full source on GitHub ↗

Its 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…

---
name: aframe-webxr
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.
---

# 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: spot; angle: 45; intensity: 1.5" position="0 5 0" rotation="-90 0 0"></a-entity>
```

### 5. Materials and Textures

**Standard Material**:

```html
<a-sphere
  material="color: #FF0000; metalness: 0.5; roughness: 0.3"
  position="0 1 -3">
</a-sphere>
```

**Textured Material**:

```html
<a-assets>
  <img id="woodTexture" src="wood.jpg">
</a-assets>

<a-box material="src: #woodTexture" position="0 1 -3"></a-box>
```

**Flat Shading** (no lighting):

```html
<a-plane material="shader: flat; color: #4CC3D9"></a-plane>
```

### 6. Animations

**Property Animation**:

```html
<a-box
  position="0 1 -3"
  animation="property: rotation; to: 0 360 0; loop: true; dur: 5000">
</a-box>
```

**Multiple Animations** (use `animation__*` naming):

```html
<a-sphere
  position="0 1 -3"
  animation__position="property: position; to: 0 3 -3; dir: alternate; loop: true; dur: 2000"
  animation__rotation="property: rotation; to: 360 360 0; loop: true; dur: 4000"
  animation__scale="property: scale; to: 1.5 1.5 1.5; dir: alternate; loop: true; dur: 1000">
</a-sphere>
```

**Event-Based Animation**:

```html
<a-box
  color="blue"
  animation__mouseenter="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter"
  animation__mouseleave="property: scale; to: 1 1 1; startEvents: mouseleave"
  animation__click="property: rotation; from: 0 0 0; to: 0 360 0; startEvents: click">
</a-box>
```

### 7. Assets Management

Preload assets for better performance:

```html
<a-scene>
  <a-assets>
    <!-- Images -->
    <img id="texture1" src="texture.jpg">
    <img id="skyTexture" src="sky.jpg">

    <!-- Videos -->
    <video id="video360" src="360video.mp4" autoplay loop></video>

    <!-- Audio -->
    <audio id="bgMusic" src="music.mp3" preload="auto"></audio>

    <!-- Models -->
    <a-asset-item id="tree" src="tree.gltf"></a-asset-item>

    <!-- Mixins (reusable component sets) -->
    <a-mixin id="redMaterial" material="color: red; metalness: 0.7"></a-mixin>
  </a-assets>

  <!-- Use assets

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

Install

Pinned to the audited commit 2b2fd87

Download folder ↗

npm install aframe-extras

git clone https://github.com/freshtechbro/claudedesignskills
git -C claudedesignskills checkout 2b2fd871ca33

Commands as the repository documents them: shown, never run by us. Our verdict covers commit 2b2fd871ca33 only.

Works in which agents?

What its own text says, not a test

“Mentioned” means the skill’s text names the agent. We have not run it there.
Agent	Status	More
Cursor	Mentioned in its text, not tested	Skills for Cursor · About Cursor

Audit history

Every audit, every source change

2026-10-20
✓SAFE B 89 / 100
first audit · source 2b2fd871ca33

README badge

For maintainers · shows the latest audit

[![ModelsAtlas: SAFE B](https://modelsatlas.com/skills/freshtechbro/aframe-webxr/badge.svg)](https://modelsatlas.com/skills/freshtechbro/aframe-webxr/)

The badge shows our verdict and grade for this skill, and links back to this page. It changes when the audit does.

Similar skills

verification-before-completion✓SAFE

obra/superpowers

Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions…

★ 308kGrade B

writing-plans✓SAFE

obra/superpowers

Use when you have a spec or requirements for a multi-step task, before touching code

★ 308kGrade B

using-superpowers✓SAFE

obra/superpowers

Use when starting any conversation - establishes how to find and use skills, requiring skill invocation before ANY response including clarifying questions

★ 307kGrade B

Add this badge to your README

[![ModelsAtlas: SAFE B](https://modelsatlas.com/skills/freshtechbro/aframe-webxr/badge.svg)](https://modelsatlas.com/skills/freshtechbro/aframe-webxr/)

<a href="https://modelsatlas.com/skills/freshtechbro/aframe-webxr/"><img src="https://modelsatlas.com/skills/freshtechbro/aframe-webxr/badge.svg" alt="ModelsAtlas: SAFE B"></a>

Questions about aframe-webxr

What does the aframe-webxr skill do?

A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences.

Is aframe-webxr safe to install?

The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean skill reads B.

What can aframe-webxr access on my machine?

The audit observed no filesystem, network or shell use at all in its source.

Which assistants does aframe-webxr work with?

Its documentation mentions cursor. That is what the text claims, not a compatibility test we ran.

How current is this page?

The grade is for one exact copy of the source (2b2fd871ca33), read on 2026-10-20. The repository is watched, and a new audit runs when it changes — this is the first audit.

Sources

github.com/freshtechbro/claudedesignskills/tree/main/.claude/ski — the audited source at commit 2b2fd871ca33 and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology

Keep going in your AI

Opens with this page as the source. We add nothing else to the prompt.

What does the aframe-webxr skill do?
GChatGPT CClaude PPerplexity
Is aframe-webxr safe to install?
GChatGPT CClaude PPerplexity
What can aframe-webxr access on my machine?
GChatGPT CClaude PPerplexity