feat(three): add browser 3D scene skill

AGENTS.md

@@ -110,6 +110,7 @@ When the user mentions these keywords, load the corresponding skill:
 | "debate", "council", "multi-perspective", "structured debate", "get multiple perspectives", "expert panel", "decision landscape", "what would experts say", "what are we missing", "convergence", "false consensus", "agent-council", "pre-mortem" | [agent-council](agent-council/SKILL.md) |
 | "skill format", "how do I make a skill", "agentskills.io" | [agent-skills](agent-skills/SKILL.md) |
 | "FlareSolverr", "Cloudflare challenge", "DDoS-GUARD", "browser-backed request" | [flaresolverr](flaresolverr/SKILL.md) |
+| "Three.js", "three.js", "WebGL", "3D scene", "GLTF", "browser 3D" | [three](three/SKILL.md) |
 | "last.fm", "scrobble", "music discovery", "listening history", "similar artists", "lastfm", "weekly top artists", "genre charts" | [lastfm](lastfm/SKILL.md) |
 | "nous", "theia", "hermes brand", "brand identity", "style guide", "mascot", "anime style", "cyber-classical", "color palette reference" | [nous-branding](nous-branding/SKILL.md) |
 | "okf", "open knowledge format", "knowledge bundle", "LLM wiki", "agent knowledge", "Google knowledge format", "markdown knowledge", "vendor-neutral knowledge", "create an OKF bundle", "validate OKF", "concept document", "knowledge format" | [open-knowledge-format](open-knowledge-format/SKILL.md) |

README.md

@@ -191,6 +191,10 @@ Spec-Driven Development (SDD) methodology for AI software factories — where st
 
 4-phase root cause debugging protocol: understand bugs before fixing. Covers schema/environment divergence, exception type specificity in fallback chains, progressive characterization grids for API/retrieval failures, dependency source detection (editable dev forks), macOS sandboxed application debugging, and the Rule of Three for recognizing architectural problems. Adapted from [obra/superpowers](https://github.com/obra/superpowers) (MIT) with significant expansion from real-world use.
 
+### [three](three/SKILL.md)
+
+Build browser-based Three.js and WebGL scenes, animations, and interactive 3D visualizations.
+
 ### [tempest-cli](tempest-cli/SKILL.md)
 
 Hyper-local weather from a WeatherFlow Tempest station. Query current conditions, 7-day forecast, historical observations, and real-time UDP broadcasts. A complete reference implementation of the cli-builder patterns in a working, testable project — including the CLI binary and full API field layout reference.

three/README.md

@@ -0,0 +1,20 @@
+# Three.js
+
+Start a working browser 3D scene without rebuilding the setup from memory. The skill covers scene/camera/renderer wiring, geometry and materials, lighting, animation, assets, and the first performance decisions.
+
+## What you get
+
+- `SKILL.md`: routing and core patterns
+- `templates/basic-scene.html`: runnable vanilla Three.js scene
+
+## Quick start
+
+Open `templates/basic-scene.html` in a browser or serve the repository with a local HTTP server.
+
+## Triggers
+
+Three.js, WebGL, 3D scene, camera, lighting, GLTF, shader, animation loop, or interactive browser visualization.
+
+## Requirements
+
+A modern browser. The template loads Three.js from a CDN; production work should pin and bundle the dependency.

three/SKILL.md

@@ -0,0 +1,18 @@
+---
+name: three
+description: Build browser-based Three.js and WebGL scenes, animations, and interactive 3D visualizations with a small vanilla JavaScript starting point.
+---
+
+# Three.js
+
+Use this skill for browser 3D scenes, WebGL visualization, camera and lighting setup, asset loading, or animation loops. Start with the smallest scene in `templates/basic-scene.html`, then add geometry, materials, lights, and controls only as required.
+
+## Core choices
+
+- Use `PerspectiveCamera` for natural 3D views and `OrthographicCamera` for technical or isometric views.
+- Keep animation time-based with `Clock` or elapsed timestamps.
+- Dispose geometries, materials, and textures when scenes are replaced.
+- Use GLTF/GLB for external models and keep assets local when reproducibility matters.
+- Prefer instancing and level of detail when object count becomes the bottleneck.
+
+The template uses a CDN for a quick standalone demo. Pin a Three.js version for production.

three/templates/basic-scene.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Three.js basic scene</title>
+<style>html,body{margin:0;height:100%;background:#111}canvas{display:block}</style>
+<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.js"}}</script>
+<script type="module">
+import * as THREE from 'three';
+const scene=new THREE.Scene();
+scene.background=new THREE.Color(0x111111);
+const camera=new THREE.PerspectiveCamera(60,innerWidth/innerHeight,.1,100); camera.position.z=3;
+const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setSize(innerWidth,innerHeight); document.body.append(renderer.domElement);
+const mesh=new THREE.Mesh(new THREE.BoxGeometry(),new THREE.MeshNormalMaterial()); scene.add(mesh);
+function frame(time){mesh.rotation.x=time*.0005;mesh.rotation.y=time*.0007;renderer.render(scene,camera);requestAnimationFrame(frame)} requestAnimationFrame(frame);
+addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
+</script>