Initial commit: antigravity-claudekit

skills/ck-threejs/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: ck-threejs
+description: Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, GLTF model loading, animations, physics, VR/XR experiences, particle effects, custom shaders, post-processing, and compute shaders.
+---
+
+# Three.js Development
+
+High-performance 3D web applications using Three.js with 556 searchable examples, 60 API classes, and 20 use-case templates.
+
+## When to Use
+
+- Building 3D scenes, games, or data visualizations
+- Loading 3D models (GLTF, FBX, OBJ)
+- Implementing animations, physics, or VR/AR (WebXR)
+- Creating particle effects or custom GLSL shaders
+- Optimizing WebGL/WebGPU rendering performance
+
+## Don't Use When
+
+- Simple CSS/SVG animations suffice
+- 2D canvas work without 3D requirements (use plain Canvas API)
+
+## Search Examples and API
+
+```bash
+python3 $HOME/.claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max>]
+
+# Examples
+python3 $HOME/.claude/skills/threejs/scripts/search.py "particle compute webgpu"
+python3 $HOME/.claude/skills/threejs/scripts/search.py "camera" --domain api
+python3 $HOME/.claude/skills/threejs/scripts/search.py "product configurator" --use-case
+python3 $HOME/.claude/skills/threejs/scripts/search.py --category webgpu -n 10
+```
+
+**Domains:** `examples` (code), `api` (classes), `use-cases` (project types), `categories` (browse)
+
+## Quick Start
+
+```javascript
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+scene.add(new THREE.AmbientLight(0x404040));
+const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+dirLight.position.set(5, 5, 5);
+scene.add(dirLight);
+
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+new GLTFLoader().load('model.glb', (gltf) => scene.add(gltf.scene));
+
+function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
+animate();
+```
+
+## Common Use Cases
+
+| Use Case | Key Tools | Complexity |
+|----------|-----------|------------|
+| Product Configurator | GLTF, PBR, EnvMaps | Medium |
+| Game Development | Animation, Physics, Controls | High |
+| Data Visualization | BufferGeometry, Points | Medium |
+| 360 Panorama | Equirectangular, WebXR | Low |
+| Architectural Viz | GLTF, HDR, CSM Shadows | High |
+
+## Progressive Reference Files
+
+- `references/00-fundamentals.md` — core concepts, scene graph
+- `references/01-getting-started.md` — setup, basic rendering
+- `references/02-loaders.md` — GLTF, FBX, OBJ loaders
+- `references/03-textures.md` — texture types, mapping
+- `references/04-cameras.md` — camera types, controls
+- `references/05-lights.md` — light types, shadows
+- `references/06-animations.md` — AnimationMixer, clips
+- `references/08-interaction.md` — raycasting, picking
+- `references/09-postprocessing.md` — bloom, SSAO, SSR
+- `references/11-materials.md` — PBR, standard materials
+- `references/12-performance.md` — instancing, LOD, batching
+- `references/13-node-materials.md` — TSL shader graphs
+- `references/14-physics-vr.md` — physics, WebXR
+- `references/16-webgpu.md` — WebGPU, compute shaders
+- `references/17-shader.md` — custom GLSL shaders
+
+## Resources
+
+- Docs: https://threejs.org/docs/
+- Examples: https://threejs.org/examples/
+- Discord: https://discord.gg/56GBJwAnUS