thanh-kit 2.5.0 → 2.5.2

package/templates/skills/test/references/test-execution-workflow.md

@@ -0,0 +1,103 @@
+# Test Execution Workflow
+
+## Step 1: Identify Scope
+
+Determine what to test based on recent changes:
+- New feature → full test suite + new test cases
+- Bug fix → regression tests + targeted fix validation
+- Refactor → existing test suite (no new tests unless gaps found)
+- Coverage check → full suite with coverage flags
+
+## Step 2: Pre-flight Checks
+
+Run syntax/type checks before tests to catch compile errors early:
+
+```bash
+# JavaScript/TypeScript
+npx tsc --noEmit          # TypeScript check
+npx eslint .              # Lint check
+
+# Python
+python -m py_compile file.py
+flake8 .
+
+# Flutter
+flutter analyze
+
+# Go
+go vet ./...
+
+# Rust
+cargo check
+```
+
+## Step 3: Execute Tests
+
+### JavaScript/TypeScript
+```bash
+npm test                    # or yarn test / pnpm test / bun test
+npm run test:coverage       # with coverage
+npx vitest run              # Vitest
+npx jest --coverage         # Jest with coverage
+```
+
+### Python
+```bash
+pytest                      # basic
+pytest --cov=src --cov-report=term-missing  # with coverage
+python -m unittest discover # unittest
+```
+
+### Go / Rust / Flutter
+```bash
+go test ./... -cover        # Go with coverage
+cargo test                  # Rust
+flutter test --coverage     # Flutter
+```
+
+## Step 4: Analyze Results
+
+Focus on:
+1. **Failing tests** — read error messages and stack traces carefully
+2. **Flaky tests** — tests that pass/fail intermittently indicate race conditions or state leaks
+3. **Slow tests** — identify bottlenecks (>5s per test is suspicious)
+4. **Skipped tests** — ensure skips are intentional, not hiding failures
+
+## Step 5: Coverage Analysis
+
+Thresholds:
+- **80%+** line coverage — standard minimum
+- **70%+** branch coverage — acceptable for most projects
+- Focus on critical paths: auth, payment, data mutations
+
+Identify gaps:
+- Uncovered error handlers
+- Missing edge case branches
+- Untested utility functions
+
+## Step 6: Build Verification
+
+```bash
+npm run build               # JS/TS production build
+python setup.py build       # Python
+go build ./...              # Go
+cargo build --release       # Rust
+flutter build               # Flutter
+```
+
+Check for:
+- Build warnings or deprecation notices
+- Unresolved dependencies
+- Production config correctness
+
+## Quality Checklist
+
+- [ ] All tests pass (zero failures)
+- [ ] Coverage meets project threshold
+- [ ] No flaky tests detected
+- [ ] Build completes without errors
+- [ ] Error scenarios tested
+- [ ] Test isolation verified (no shared state)
+- [ ] Test data cleaned up after execution
+- [ ] Mocks/stubs properly configured
+- [ ] Environment variables correctly set

package/templates/skills/test/references/ui-testing-workflow.md

@@ -0,0 +1,65 @@
+# UI Testing Workflow
+
+Activate the ck:chrome-devtools skill.
+
+## Purpose
+Run comprehensive UI tests on a website and generate a detailed report.
+
+## Arguments
+- $1: URL - The URL of the website to test
+- $2: OPTIONS - Optional test configuration (e.g., --headless, --mobile, --auth)
+
+## Testing Protected Routes (Authentication)
+
+### Step 1: User Manual Login
+Instruct the user to:
+1. Open the target site in their browser
+2. Log in manually with their credentials
+3. Open browser DevTools (F12) → Application tab → Cookies/Storage
+
+### Step 2: Extract Auth Credentials
+Ask the user to provide one of:
+- **Cookies**: Copy cookie values (name, value, domain)
+- **Access Token**: Copy JWT/Bearer token from localStorage or cookies
+- **Session Storage**: Copy relevant session keys
+
+### Step 3: Inject Authentication
+Use the `inject-auth.js` script:
+
+```bash
+cd $SKILL_DIR  # .claude/skills/chrome-devtools/scripts
+
+# Option A: Inject cookies
+node inject-auth.js --url https://example.com --cookies '[{"name":"session","value":"abc123","domain":".example.com"}]'
+
+# Option B: Inject Bearer token
+node inject-auth.js --url https://example.com --token "Bearer eyJhbGciOi..." --header Authorization --token-key access_token
+
+# Option C: Inject localStorage
+node inject-auth.js --url https://example.com --local-storage '{"auth_token":"xyz","user_id":"123"}'
+```
+
+### Step 4: Run Tests
+After auth injection, run tests normally:
+```bash
+node navigate.js --url https://example.com/dashboard
+node screenshot.js --url https://example.com/profile --output profile.png
+```
+
+## Workflow
+- Use `ck:plan` skill to organize the test plan & report
+- All screenshots saved in the same report directory
+- Browse URL, discover all pages, components, endpoints
+- Create test plan based on discovered structure
+- Use multiple `tester` subagents in parallel for: pages, forms, navigation, user flows, accessibility, responsive layouts, performance, security, seo
+- Use `ck:ai-multimodal` to analyze all screenshots
+- Generate comprehensive Markdown report
+- Ask user if they want to preview with `/ck:preview`
+
+## Output Requirements
+- Clear, structured Markdown with headers, lists, code blocks
+- Include test results summary, key findings, screenshot references
+- Ensure token efficiency while maintaining high quality
+- Sacrifice grammar for concision
+
+**Do not** start implementing fixes.

package/templates/skills/threejs/SKILL.md

@@ -1,89 +1,142 @@
 ---
-name: threejs
-description: Build immersive 3D web experiences with Three.js - WebGL/WebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR/XR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL/WebGPU applications. Covers OrbitControls, GLTF/FBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR.
+name: ck:threejs
+description: "Build 3D web apps with Three.js (WebGL/WebGPU). 556 searchable examples, 60 API classes, 20 use cases. Actions: create 3D scene, load model, add animation, implement physics, build VR/XR. Topics: GLTF loader, PBR materials, particle effects, shadows, post-processing, compute shaders, TSL. Integrations: WebGPU, physics engines, spatial audio."
 license: MIT
-version: 1.0.0
+version: 3.0.0
+argument-hint: "[3D scene or feature]"
 ---
 
 # Three.js Development
 
-Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
+Build high-performance 3D web applications using Three.js. Contains 556 searchable examples across 13 categories, 60 API classes, and 20 use-case templates.
 
-## When to Use This Skill
+## When to Use
 
-Use when working with:
-- 3D scenes, models, animations, or visualizations
-- WebGL/WebGPU rendering and graphics programming
-- Interactive 3D experiences (games, configurators, data viz)
-- Camera controls, lighting, materials, or shaders
-- Loading 3D assets (GLTF, FBX, OBJ) or textures
-- Post-processing effects (bloom, depth of field, SSAO)
-- Physics simulations, VR/XR experiences, or spatial audio
-- Performance optimization (instancing, LOD, frustum culling)
+- Building 3D scenes, games, or visualizations
+- Loading 3D models (GLTF, FBX, OBJ)
+- Implementing animations, physics, or VR/XR
+- Creating particle effects or custom shaders
+- Optimizing rendering performance
 
-## Progressive Learning Path
+## Search Examples & API
 
-### Level 1: Getting Started
-Load `references/01-getting-started.md` - Scene setup, basic geometries, materials, lights, rendering loop
+Use the search CLI to find relevant examples and API references:
 
-### Level 2: Common Tasks
-- **Asset Loading**: `references/02-loaders.md` - GLTF, FBX, OBJ, texture loaders
-- **Textures**: `references/03-textures.md` - Types, mapping, wrapping, filtering
-- **Cameras**: `references/04-cameras.md` - Perspective, orthographic, controls
-- **Lights**: `references/05-lights.md` - Types, shadows, helpers
-- **Animations**: `references/06-animations.md` - Clips, mixer, keyframes
-- **Math**: `references/07-math.md` - Vectors, matrices, quaternions, curves
-
-### Level 3: Interactive & Effects
-- **Interaction**: `references/08-interaction.md` - Raycasting, picking, transforms
-- **Post-Processing**: `references/09-postprocessing.md` - Passes, bloom, SSAO, SSR
-- **Controls (Addons)**: `references/10-controls.md` - Orbit, transform, first-person
-
-### Level 4: Advanced Rendering
-- **Materials Advanced**: `references/11-materials-advanced.md` - PBR, custom shaders
-- **Performance**: `references/12-performance.md` - Instancing, LOD, batching, culling
-- **Node Materials (TSL)**: `references/13-node-materials.md` - Shader graphs, compute
+```bash
+python3 .claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]
+```
 
-### Level 5: Specialized
-- **Physics**: `references/14-physics-vr.md` - Ammo, Rapier, Jolt, VR/XR
-- **Advanced Loaders**: `references/15-specialized-loaders.md` - SVG, VRML, domain-specific
-- **WebGPU**: `references/16-webgpu.md` - Modern backend, compute shaders
+### Search Domains
+
+| Domain | Use For | Example Query |
+|--------|---------|---------------|
+| `examples` | Find code examples | `"particle effects gpu"` |
+| `api` | Class/method reference | `"PerspectiveCamera"` |
+| `use-cases` | Project recommendations | `"product configurator"` |
+| `categories` | Browse categories | `"webgpu"` |
+
+### Quick Examples
+
+```bash
+# Find particle/compute examples
+python3 .claude/skills/threejs/scripts/search.py "particle compute webgpu"
+
+# Search API for camera classes
+python3 .claude/skills/threejs/scripts/search.py "camera" --domain api
+
+# Get examples for a use case
+python3 .claude/skills/threejs/scripts/search.py "product configurator" --use-case
+
+# Filter by category
+python3 .claude/skills/threejs/scripts/search.py --category webgpu -n 10
+
+# Filter by complexity
+python3 .claude/skills/threejs/scripts/search.py --complexity high -n 5
+```
+
+## Example Categories
 
-## Quick Start Pattern
+| Category | Count | Description |
+|----------|-------|-------------|
+| `webgl` | 216 | Standard WebGL rendering |
+| `webgpu (wip)` | 190 | Modern WebGPU + compute shaders |
+| `webgl / advanced` | 48 | Low-level GPU, custom shaders |
+| `webgl / postprocessing` | 27 | Bloom, SSAO, SSR, DOF |
+| `webxr` | 26 | VR/AR experiences |
+| `physics` | 13 | Physics simulation |
+
+## Common Use Cases
+
+| Use Case | Recommended | 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 |
+
+## Quick Start
 
 ```javascript
 // 1. Scene, Camera, Renderer
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer();
+const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(window.devicePixelRatio);
 document.body.appendChild(renderer.domElement);
 
-// 2. Add Objects
-const geometry = new THREE.BoxGeometry();
-const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
-const cube = new THREE.Mesh(geometry, material);
-scene.add(cube);
-
-// 3. Add Lights
-const light = new THREE.DirectionalLight(0xffffff, 1);
-light.position.set(5, 5, 5);
-scene.add(light);
+// 2. Lighting
 scene.add(new THREE.AmbientLight(0x404040));
+const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+dirLight.position.set(5, 5, 5);
+scene.add(dirLight);
+
+// 3. Load GLTF Model
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+const loader = new GLTFLoader();
+loader.load('model.glb', (gltf) => scene.add(gltf.scene));
 
 // 4. Animation Loop
 function animate() {
   requestAnimationFrame(animate);
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
   renderer.render(scene, camera);
 }
 animate();
 ```
 
+## Progressive Reference Files
+
+### Level 1: Fundamentals
+- `references/00-fundamentals.md` - Core concepts, scene graph
+- `references/01-getting-started.md` - Setup, basic rendering
+
+### Level 2: Common Tasks
+- `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/11-materials.md` - PBR, standard materials
+- `references/18-geometry.md` - BufferGeometry, primitives
+
+### Level 3: Interactive
+- `references/08-interaction.md` - Raycasting, picking
+- `references/09-postprocessing.md` - Bloom, SSAO, SSR
+- `references/10-controls.md` - OrbitControls, etc.
+
+### Level 4: Advanced
+- `references/12-performance.md` - Instancing, LOD, batching
+- `references/13-node-materials.md` - TSL shader graphs
+- `references/17-shader.md` - Custom GLSL shaders
+
+### Level 5: Specialized
+- `references/14-physics-vr.md` - Physics, WebXR
+- `references/16-webgpu.md` - WebGPU, compute shaders
+
 ## External Resources
 
-- Official Docs: https://threejs.org/docs/
+- Docs: https://threejs.org/docs/
 - Examples: https://threejs.org/examples/
 - Editor: https://threejs.org/editor/
 - Discord: https://discord.gg/56GBJwAnUS

package/templates/skills/threejs/data/api-reference.csv

@@ -0,0 +1,61 @@
+ID,Category,Class,Keywords,Description,Common Methods,Related Classes
+1,Core,Scene,"scene, container, root, hierarchy",Root container for all 3D objects,"add(), remove(), traverse(), getObjectByName()",Object3D; Group
+2,Core,Camera,"camera, view, projection",Base camera class for all camera types,"lookAt(), updateProjectionMatrix()",PerspectiveCamera; OrthographicCamera
+3,Core,PerspectiveCamera,"perspective, fov, aspect, near, far",Perspective projection camera,"setFocalLength(), updateProjectionMatrix()",Camera; OrthographicCamera
+4,Core,OrthographicCamera,"orthographic, 2d, isometric, parallel",Orthographic projection camera,"updateProjectionMatrix(), zoom",Camera; PerspectiveCamera
+5,Core,WebGLRenderer,"renderer, webgl, canvas, draw",WebGL rendering engine,"render(), setSize(), setPixelRatio(), dispose()",Scene; Camera
+6,Core,WebGPURenderer,"renderer, webgpu, modern, compute",WebGPU rendering engine,"render(), setSize(), compute()",WebGLRenderer; Scene
+7,Geometry,BufferGeometry,"geometry, vertices, faces, mesh",Efficient geometry representation,"setAttribute(), setIndex(), computeVertexNormals()",Mesh; BufferAttribute
+8,Geometry,BoxGeometry,"box, cube, rectangular",Box/cube primitive geometry,"parameters: width, height, depth, segments",BufferGeometry; SphereGeometry
+9,Geometry,SphereGeometry,"sphere, ball, globe",Sphere primitive geometry,"parameters: radius, widthSegments, heightSegments",BufferGeometry; BoxGeometry
+10,Geometry,PlaneGeometry,"plane, flat, ground, floor",Flat plane primitive geometry,"parameters: width, height, widthSegments",BufferGeometry; CircleGeometry
+11,Geometry,CylinderGeometry,"cylinder, tube, pillar",Cylinder primitive geometry,"parameters: radiusTop, radiusBottom, height",BufferGeometry; ConeGeometry
+12,Geometry,TorusGeometry,"torus, donut, ring",Torus/donut primitive geometry,"parameters: radius, tube, radialSegments",BufferGeometry; TorusKnotGeometry
+13,Material,Material,"material, appearance, surface",Base material class,"dispose(), clone(), needsUpdate",MeshStandardMaterial; ShaderMaterial
+14,Material,MeshStandardMaterial,"standard, pbr, metalness, roughness",PBR metallic-roughness material,"color, metalness, roughness, map, normalMap",Material; MeshPhysicalMaterial
+15,Material,MeshPhysicalMaterial,"physical, transmission, clearcoat, sheen",Advanced PBR material,"transmission, thickness, clearcoat, sheen, ior",MeshStandardMaterial; Material
+16,Material,MeshBasicMaterial,"basic, unlit, simple, fast",Unlit material for simple rendering,"color, map, wireframe, transparent",Material; MeshLambertMaterial
+17,Material,MeshLambertMaterial,"lambert, diffuse, non-shiny",Diffuse-only material,"color, map, emissive, reflectivity",Material; MeshPhongMaterial
+18,Material,MeshPhongMaterial,"phong, specular, shiny, highlight",Specular highlight material,"color, specular, shininess, map",Material; MeshStandardMaterial
+19,Material,MeshToonMaterial,"toon, cartoon, cel, stylized",Cel-shaded toon material,"color, gradientMap, map",Material; MeshLambertMaterial
+20,Material,ShaderMaterial,"shader, custom, glsl, vertex, fragment",Custom GLSL shader material,"vertexShader, fragmentShader, uniforms",Material; RawShaderMaterial
+21,Material,PointsMaterial,"points, particles, sprites",Material for point clouds,"color, size, sizeAttenuation, map",Material; SpriteMaterial
+22,Light,Light,"light, illumination, source",Base light class,"color, intensity",DirectionalLight; PointLight
+23,Light,DirectionalLight,"directional, sun, parallel, shadow",Parallel light rays (sun-like),"position, target, shadow, castShadow",Light; SpotLight
+24,Light,PointLight,"point, bulb, omnidirectional",Omnidirectional light source,"position, distance, decay, shadow",Light; SpotLight
+25,Light,SpotLight,"spotlight, cone, focused, shadow",Cone-shaped spotlight,"position, target, angle, penumbra, shadow",Light; DirectionalLight
+26,Light,AmbientLight,"ambient, fill, global",Global ambient illumination,"color, intensity",Light; HemisphereLight
+27,Light,HemisphereLight,"hemisphere, sky, ground, outdoor",Sky/ground gradient light,"skyColor, groundColor, intensity",Light; AmbientLight
+28,Light,RectAreaLight,"rectarea, area, soft, studio",Rectangular area light,"width, height, intensity, lookAt()",Light; SpotLight
+29,Object,Mesh,"mesh, geometry, material, object",3D object with geometry and material,"geometry, material, position, rotation, scale",Object3D; SkinnedMesh
+30,Object,SkinnedMesh,"skinned, rigged, animation, bones",Mesh with skeletal animation,"skeleton, bind(), pose()",Mesh; Bone
+31,Object,InstancedMesh,"instanced, performance, many, clone",Efficient multiple instance rendering,"count, setMatrixAt(), setColorAt()",Mesh; BatchedMesh
+32,Object,Group,"group, container, parent, hierarchy",Container for grouping objects,"add(), remove(), children",Object3D; Scene
+33,Object,Points,"points, particles, cloud",Point cloud rendering,"geometry, material",Mesh; Line
+34,Object,Line,"line, path, wire",Line rendering,"geometry, material",Points; LineSegments
+35,Object,Sprite,"sprite, billboard, always-facing",Always camera-facing plane,"material, center, scale",Points; Mesh
+36,Animation,AnimationMixer,"mixer, animation, playback, control",Animation playback controller,"clipAction(), update(), stopAllAction()",AnimationClip; AnimationAction
+37,Animation,AnimationClip,"clip, keyframes, track, animation data",Animation data container,"tracks, duration, resetDuration()",AnimationMixer; KeyframeTrack
+38,Animation,AnimationAction,"action, play, pause, loop",Animation playback control,"play(), stop(), crossFadeTo(), setEffectiveWeight()",AnimationMixer; AnimationClip
+39,Loader,GLTFLoader,"gltf, glb, loader, model",GLTF/GLB model loader,"load(), parse(), setDRACOLoader()",Loader; DRACOLoader
+40,Loader,FBXLoader,"fbx, autodesk, animation",FBX model loader,"load(), parse()",Loader; GLTFLoader
+41,Loader,OBJLoader,"obj, wavefront, simple",OBJ model loader,"load(), parse(), setMaterials()",Loader; MTLLoader
+42,Loader,TextureLoader,"texture, image, map",Image texture loader,"load(), loadAsync()",Loader; CubeTextureLoader
+43,Loader,DRACOLoader,"draco, compression, mesh",Draco compressed mesh decoder,"setDecoderPath(), preload()",GLTFLoader; Loader
+44,Control,OrbitControls,"orbit, rotate, zoom, pan, camera",Orbiting camera controls,"update(), target, enableDamping",Controls; TrackballControls
+45,Control,MapControls,"map, overhead, 2d, navigation",Map-style camera controls,"update(), target, screenSpacePanning",OrbitControls; Controls
+46,Control,FirstPersonControls,"fps, first person, walk",First-person camera controls,"update(), movementSpeed, lookSpeed",Controls; PointerLockControls
+47,Control,TransformControls,"transform, gizmo, move, rotate, scale",Object manipulation gizmo,"attach(), detach(), setMode()",Controls; DragControls
+48,Math,Vector3,"vector, position, direction, xyz",3D vector math,"add(), sub(), multiply(), normalize(), length()",Vector2; Quaternion
+49,Math,Quaternion,"quaternion, rotation, orientation",Rotation representation,"setFromEuler(), slerp(), multiply()",Vector3; Euler
+50,Math,Matrix4,"matrix, transform, 4x4",4x4 transformation matrix,"multiply(), invert(), decompose()",Matrix3; Vector3
+51,Math,Box3,"box, aabb, bounds, collision",Axis-aligned bounding box,"setFromObject(), containsPoint(), intersectsBox()",Sphere; Raycaster
+52,Math,Raycaster,"raycast, pick, intersect, mouse",Ray intersection testing,"setFromCamera(), intersectObjects()",Box3; Vector3
+53,Helper,AxesHelper,"axes, xyz, debug, orientation",XYZ axes visualization,"size parameter",Helper; GridHelper
+54,Helper,GridHelper,"grid, floor, debug, reference",Grid plane visualization,"size, divisions, colors",Helper; AxesHelper
+55,Helper,BoxHelper,"box, bounds, debug, wireframe",Bounding box visualization,"setFromObject(), update()",Helper; Box3Helper
+56,Effect,EffectComposer,"composer, postprocessing, chain",Post-processing effect chain,"addPass(), render(), setSize()",Pass; ShaderPass
+57,Effect,RenderPass,"render, scene, camera, base",Base scene render pass,"scene, camera",Pass; EffectComposer
+58,Effect,UnrealBloomPass,"bloom, glow, emissive, hdr",Unreal-style bloom effect,"strength, radius, threshold",Pass; EffectComposer
+59,Effect,SSAOPass,"ssao, ao, ambient occlusion",Screen-space ambient occlusion,"kernelRadius, minDistance, maxDistance",Pass; GTAOPass
+60,Effect,OutlinePass,"outline, selection, highlight",Object outline effect,"selectedObjects, visibleEdgeColor",Pass; EffectComposer

package/templates/skills/threejs/data/categories.csv

@@ -0,0 +1,14 @@
+ID,Category,Keywords,Description,Complexity Range,Example Count,Primary Use Cases,Related Categories
+1,webgl,"webgl, rendering, standard, basic",Standard WebGL rendering examples with core Three.js features,Low-High,216,"games, visualization, interactive",webgl / postprocessing; webgl / advanced
+2,webgl / postprocessing,"postprocessing, effects, bloom, ao, fxaa",Post-processing effects and image manipulation,Medium-High,27,"cinematic, stylized, photo-realistic",webgl; webgl / advanced
+3,webgl / advanced,"advanced, buffergeometry, custom, shader, gpu",Advanced rendering techniques and low-level GPU access,High,48,"optimization, custom rendering, research",webgl; webgpu
+4,webgpu (wip),"webgpu, compute, modern, next-gen, tsl",WebGPU-based rendering and compute shaders,Medium-High,190,"future-proof, compute, modern browsers",webgl / advanced
+5,webaudio,"audio, spatial, 3d sound, positional",Spatial audio and sound visualization,Medium,4,"games, immersive, vr",webxr
+6,webxr,"vr, ar, xr, immersive, headset",Virtual and augmented reality experiences,Medium-High,26,"vr games, ar apps, immersive",webaudio; webgpu
+7,games,"games, gameplay, interactive",Complete game-like examples and mechanics,Medium-High,1,"game development, interactive",webxr; physics
+8,physics,"physics, simulation, rigid body, collision",Physics simulation and rigid body dynamics,High,13,"games, simulation, realistic",games; webgpu
+9,misc,"misc, experiments, special",Miscellaneous experiments and special techniques,Varies,20,"experimentation, learning",All
+10,css2d,"css2d, labels, html overlay",CSS-based 2D overlays on 3D scenes,Low,1,"ui, labels, annotations",css3d
+11,css3d,"css3d, dom, html, 3d transform",CSS 3D transforms with Three.js,Medium,6,"ui, transitions, websites",css2d
+12,svg,"svg, vector, 2d",SVG rendering and vector graphics,Low-Medium,2,"icons, diagrams, 2d graphics",css2d
+13,tests,"tests, debug, development",Testing and debugging utilities,Low-Medium,2,"development, debugging",All