three-agent-skills 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-agent-skills",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "AI coding agent skills for Three.js and React Three Fiber best practices",
   "keywords": [
     "threejs",

package/skills/r3f-best-practices/SKILL.md

@@ -4,12 +4,16 @@ description: React Three Fiber (R3F) and Poimandres ecosystem best practices. Us
 license: MIT
 metadata:
   author: three-agent-skills
-  version: "1.0.0"
+  version: "1.1.0"
 ---
 
 # React Three Fiber Best Practices
 
-Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 60+ rules across 11 categories, prioritized by impact.
+Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 70+ rules across 12 categories, prioritized by impact.
+
+## Sources & Credits
+
+> Additional tips from [100 Three.js Tips](https://www.utsubo.com/blog/threejs-best-practices-100-tips) by [Utsubo](https://www.utsubo.com)
 
 ## When to Apply
 
@@ -57,6 +61,8 @@ Reference these guidelines when:
 - `perf-keys-for-lists` - Use stable keys for dynamic lists
 - `perf-avoid-inline-objects` - Avoid creating objects/arrays in JSX
 - `perf-dispose-auto` - Understand R3F auto-dispose behavior
+- `perf-visibility-toggle` - Toggle visibility instead of remounting
+- `perf-r3f-perf` - Use r3f-perf for performance monitoring
 
 ### 2. useFrame & Animation (CRITICAL)
 
@@ -228,3 +234,28 @@ function App() {
   );
 }
 ```
+
+### r3f-perf Monitoring
+
+```jsx
+import { Perf } from 'r3f-perf';
+
+function App() {
+  return (
+    <Canvas>
+      <Perf position="top-left" />
+      <Scene />
+    </Canvas>
+  );
+}
+```
+
+### Toggle Visibility (Not Remounting)
+
+```jsx
+// BAD: Remounting destroys and recreates
+{showModel && <Model />}
+
+// GOOD: Toggle visibility, keeps instance alive
+<Model visible={showModel} />
+```

package/skills/r3f-best-practices/rules/_sections.md

@@ -9,6 +9,8 @@
 - perf-keys-for-lists
 - perf-avoid-inline-objects
 - perf-dispose-auto
+- perf-visibility-toggle
+- perf-r3f-perf
 
 ## Priority 2: useFrame & Animation (CRITICAL)
 - frame-priority

package/skills/r3f-best-practices/rules/perf-r3f-perf.md

@@ -0,0 +1,87 @@
+# r3f-perf for Performance Monitoring
+
+> Source: [100 Three.js Tips - Utsubo](https://www.utsubo.com/blog/threejs-best-practices-100-tips)
+
+Use r3f-perf for comprehensive React Three Fiber performance monitoring.
+
+## Installation
+
+```bash
+npm install r3f-perf
+```
+
+## Basic Usage
+
+```jsx
+import { Perf } from 'r3f-perf';
+
+function App() {
+  return (
+    <Canvas>
+      <Perf position="top-left" />
+      <Scene />
+    </Canvas>
+  );
+}
+```
+
+## Available Props
+
+```jsx
+<Perf
+  position="top-left"     // Position: top-left, top-right, bottom-left, bottom-right
+  minimal={false}         // Minimal mode (just FPS)
+  showGraph={true}        // Show performance graph
+  matrixUpdate={true}     // Show matrix updates
+  deepAnalyze={false}     // Deep analysis (more CPU intensive)
+  overClock={false}       // Over-clock mode for high refresh rate monitors
+  logsPerSecond={10}      // Logs per second
+/>
+```
+
+## What It Monitors
+
+- **FPS** - Frames per second
+- **MS** - Milliseconds per frame
+- **CPU** - JavaScript execution time
+- **GPU** - WebGL draw time (estimated)
+- **Memory** - Geometries, textures, draw calls
+- **Matrix Updates** - Number of matrix recalculations
+
+## Conditional Rendering for Production
+
+```jsx
+import { Perf } from 'r3f-perf';
+
+function App() {
+  const isDev = process.env.NODE_ENV === 'development';
+
+  return (
+    <Canvas>
+      {isDev && <Perf position="top-left" />}
+      <Scene />
+    </Canvas>
+  );
+}
+```
+
+## Deep Analyze Mode
+
+For detailed per-object analysis:
+
+```jsx
+<Perf
+  deepAnalyze={true}
+  className="custom-perf"
+/>
+```
+
+Shows render times for individual objects but has higher CPU overhead.
+
+## Best Practices
+
+1. **Remove in production** - Always hide in production builds
+2. **Use sparingly** - Performance monitor itself has overhead
+3. **Check draw calls** - Target under 100 draw calls
+4. **Monitor memory** - Watch for leaking geometries/textures
+5. **Use alongside renderer.info** - For detailed WebGL stats

package/skills/r3f-best-practices/rules/perf-visibility-toggle.md

@@ -0,0 +1,95 @@
+# Toggle Visibility Instead of Remounting
+
+> Source: [100 Three.js Tips - Utsubo](https://www.utsubo.com/blog/threejs-best-practices-100-tips)
+
+Toggle the `visible` prop instead of conditionally mounting/unmounting components.
+
+## Why It Matters
+
+Remounting a component:
+1. Destroys the Three.js object
+2. Triggers disposal (if configured)
+3. Creates new geometry/material
+4. Uploads new data to GPU
+5. Recompiles shaders
+
+Toggling visibility:
+1. Sets `object.visible = false`
+2. That's it - object stays in memory
+
+## BAD: Conditional Mounting
+
+```jsx
+function Scene({ showModel }) {
+  return (
+    <>
+      {showModel && <ExpensiveModel />}
+    </>
+  );
+}
+```
+
+Every toggle destroys and recreates the entire model.
+
+## GOOD: Visibility Toggle
+
+```jsx
+function Scene({ showModel }) {
+  return (
+    <ExpensiveModel visible={showModel} />
+  );
+}
+```
+
+Model stays in memory, just skipped during render.
+
+## When to Use Each
+
+### Use Visibility Toggle When:
+- Frequent show/hide (e.g., UI state)
+- Object is expensive to create
+- Object is needed again soon
+- Object count is manageable
+
+### Use Conditional Mounting When:
+- Object is rarely shown
+- Memory is constrained
+- Object is cheap to create
+- Large number of potential objects
+
+## With Refs
+
+```jsx
+function ToggleableModel() {
+  const meshRef = useRef();
+  const [visible, setVisible] = useState(true);
+
+  // Direct mutation for animations
+  useFrame(() => {
+    if (meshRef.current) {
+      meshRef.current.visible = shouldBeVisible;
+    }
+  });
+
+  return <mesh ref={meshRef} visible={visible} />;
+}
+```
+
+## Visibility vs Layers
+
+For complex visibility logic, consider using Three.js layers:
+
+```jsx
+function SelectiveRendering() {
+  const meshRef = useRef();
+
+  useEffect(() => {
+    // Set to layer 1 (not rendered by default camera)
+    meshRef.current.layers.set(1);
+  }, []);
+
+  return <mesh ref={meshRef} />;
+}
+```
+
+Layers allow camera-selective rendering without changing visibility.

package/skills/three-best-practices/SKILL.md

@@ -4,15 +4,19 @@ description: Three.js performance optimization and best practices guidelines. Us
 license: MIT
 metadata:
   author: three-agent-skills
-  version: "2.0.0"
+  version: "2.1.0"
   three-version: "0.182.0+"
 ---
 
 # Three.js Best Practices
 
-Comprehensive performance optimization guide for Three.js applications. Contains 100+ rules across 17 categories, prioritized by impact.
+Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact.
 
-> Based on official guidelines from Three.js `llms` branch maintained by mrdoob.
+## Sources & Credits
+
+> This skill compiles best practices from multiple authoritative sources:
+> - Official guidelines from Three.js `llms` branch maintained by [mrdoob](https://github.com/mrdoob)
+> - [100 Three.js Tips](https://www.utsubo.com/blog/threejs-best-practices-100-tips) by [Utsubo](https://www.utsubo.com) - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips
 
 ## When to Apply
 
@@ -33,21 +37,26 @@ Reference these guidelines when:
 | 0 | Modern Setup & Imports | FUNDAMENTAL | `setup-` |
 | 1 | Memory Management & Dispose | CRITICAL | `memory-` |
 | 2 | Render Loop Optimization | CRITICAL | `render-` |
-| 3 | Geometry & Buffer Management | HIGH | `geometry-` |
-| 4 | Material & Texture Optimization | HIGH | `material-` |
-| 5 | Lighting & Shadows | MEDIUM-HIGH | `lighting-` |
-| 6 | Scene Graph Organization | MEDIUM | `scene-` |
-| 7 | Shader Best Practices (GLSL) | MEDIUM | `shader-` |
-| 8 | TSL (Three.js Shading Language) | MEDIUM | `tsl-` |
-| 9 | Loading & Assets | MEDIUM | `loading-` |
-| 10 | Camera & Controls | LOW-MEDIUM | `camera-` |
-| 11 | Animation System | MEDIUM | `animation-` |
-| 12 | Physics Integration | MEDIUM | `physics-` |
-| 13 | WebXR / VR / AR | MEDIUM | `webxr-` |
-| 14 | Audio | LOW-MEDIUM | `audio-` |
-| 15 | Mobile Optimization | HIGH | `mobile-` |
-| 16 | Production | HIGH | `error-`, `migration-` |
-| 17 | Debug & DevTools | LOW | `debug-` |
+| 3 | Draw Call Optimization | CRITICAL | `drawcall-` |
+| 4 | Geometry & Buffer Management | HIGH | `geometry-` |
+| 5 | Material & Texture Optimization | HIGH | `material-` |
+| 6 | Asset Compression | HIGH | `asset-` |
+| 7 | Lighting & Shadows | MEDIUM-HIGH | `lighting-` |
+| 8 | Scene Graph Organization | MEDIUM | `scene-` |
+| 9 | Shader Best Practices (GLSL) | MEDIUM | `shader-` |
+| 10 | TSL (Three.js Shading Language) | MEDIUM | `tsl-` |
+| 11 | WebGPU Renderer | MEDIUM | `webgpu-` |
+| 12 | Loading & Assets | MEDIUM | `loading-` |
+| 13 | Core Web Vitals | MEDIUM-HIGH | `vitals-` |
+| 14 | Camera & Controls | LOW-MEDIUM | `camera-` |
+| 15 | Animation System | MEDIUM | `animation-` |
+| 16 | Physics Integration | MEDIUM | `physics-` |
+| 17 | WebXR / VR / AR | MEDIUM | `webxr-` |
+| 18 | Audio | LOW-MEDIUM | `audio-` |
+| 19 | Post-Processing | MEDIUM | `postpro-` |
+| 20 | Mobile Optimization | HIGH | `mobile-` |
+| 21 | Production | HIGH | `error-`, `migration-` |
+| 22 | Debug & DevTools | LOW | `debug-` |
 
 ## Quick Reference
 
@@ -81,7 +90,14 @@ Reference these guidelines when:
 - `render-pixel-ratio` - Limit pixel ratio to 2
 - `render-antialias-wisely` - Use antialiasing judiciously
 
-### 3. Geometry (HIGH)
+### 3. Draw Call Optimization (CRITICAL)
+
+- `draw-call-optimization` - Target under 100 draw calls per frame
+- `geometry-instanced-mesh` - Use InstancedMesh for identical objects
+- `geometry-batched-mesh` - Use BatchedMesh for varied geometries (same material)
+- `geometry-merge-static` - Merge static geometries with BufferGeometryUtils
+
+### 4. Geometry (HIGH)
 
 - `geometry-buffer-geometry` - Always use BufferGeometry
 - `geometry-merge-static` - Merge static geometries
@@ -92,7 +108,7 @@ Reference these guidelines when:
 - `geometry-attributes-typed` - Use appropriate typed arrays
 - `geometry-interleaved` - Consider interleaved buffers
 
-### 4. Materials & Textures (HIGH)
+### 5. Materials & Textures (HIGH)
 
 - `material-reuse` - Reuse materials across meshes
 - `material-simplest-sufficient` - Use simplest material that works
@@ -104,37 +120,51 @@ Reference these guidelines when:
 - `material-avoid-transparency` - Minimize transparent materials
 - `material-onbeforecompile` - Use onBeforeCompile for shader mods (or TSL)
 
-### 5. Lighting & Shadows (MEDIUM-HIGH)
+### 6. Asset Compression (HIGH)
+
+- `asset-compression` - Draco, Meshopt, KTX2 compression guide
+- `asset-draco` - 90-95% geometry size reduction
+- `asset-ktx2` - GPU-compressed textures (UASTC vs ETC1S)
+- `asset-meshopt` - Alternative to Draco with faster decompression
+- `asset-lod` - Level of Detail for 30-40% frame rate improvement
+
+### 7. Lighting & Shadows (MEDIUM-HIGH)
 
-- `lighting-limit-lights` - Minimize dynamic lights
+- `lighting-limit-lights` - Limit to 3 or fewer active lights
+- `lighting-shadows-advanced` - PointLight cost, CSM, fake shadows
 - `lighting-bake-static` - Bake lighting for static scenes
 - `lighting-shadow-camera-tight` - Fit shadow camera tightly
-- `lighting-shadow-map-size` - Choose appropriate shadow resolution
+- `lighting-shadow-map-size` - Choose appropriate shadow resolution (512-4096)
 - `lighting-shadow-selective` - Enable shadows selectively
 - `lighting-shadow-cascade` - Use CSM for large scenes
+- `lighting-shadow-auto-update` - Disable autoUpdate for static scenes
 - `lighting-probe` - Use Light Probes
+- `lighting-environment` - Environment maps for ambient light
+- `lighting-fake-shadows` - Gradient planes for budget contact shadows
 
-### 6. Scene Graph (MEDIUM)
+### 8. Scene Graph (MEDIUM)
 
 - `scene-group-objects` - Use Groups for organization
 - `scene-layers` - Use Layers for selective rendering
 - `scene-visible-toggle` - Use visible flag, not add/remove
 - `scene-flatten-static` - Flatten static hierarchies
 - `scene-name-objects` - Name objects for debugging
-- `scene-object-pooling` - Use object pooling
+- `object-pooling` - Reuse objects instead of create/destroy
 
-### 7. Shaders GLSL (MEDIUM)
+### 9. Shaders GLSL (MEDIUM)
 
-- `shader-precision` - Use appropriate precision
-- `shader-avoid-branching` - Minimize branching
+- `shader-precision` - Use mediump for mobile (~2x faster)
+- `shader-mobile` - Mobile-specific optimizations (varyings, branching)
+- `shader-avoid-branching` - Replace conditionals with mix/step
 - `shader-precompute-cpu` - Precompute on CPU
 - `shader-avoid-discard` - Avoid discard, use alphaTest
 - `shader-texture-lod` - Use textureLod for known mip levels
 - `shader-uniform-arrays` - Prefer uniform arrays
-- `shader-varying-interpolation` - Use flat when appropriate
+- `shader-varying-interpolation` - Limit varyings to 3 for mobile
+- `shader-pack-data` - Pack data into RGBA channels
 - `shader-chunk-injection` - Use Three.js shader chunks
 
-### 8. TSL - Three.js Shading Language (MEDIUM)
+### 10. TSL - Three.js Shading Language (MEDIUM)
 
 - `tsl-why-use` - Use TSL instead of onBeforeCompile
 - `tsl-setup-webgpu` - WebGPU setup for TSL
@@ -145,11 +175,22 @@ Reference these guidelines when:
 - `tsl-functions` - Creating TSL functions with Fn()
 - `tsl-conditionals` - If, select, loops in TSL
 - `tsl-textures` - Textures and triplanar mapping
+- `tsl-noise` - Built-in noise functions (mx_noise_float, mx_fractal_noise)
 - `tsl-post-processing` - bloom, blur, dof, ao
 - `tsl-compute-shaders` - GPGPU and compute operations
 - `tsl-glsl-to-tsl` - GLSL to TSL translation
 
-### 9. Loading & Assets (MEDIUM)
+### 11. WebGPU Renderer (MEDIUM)
+
+- `webgpu-renderer` - Setup, browser support, migration guide
+- `webgpu-render-async` - Use renderAsync for compute-heavy scenes
+- `webgpu-feature-detection` - Check adapter features
+- `webgpu-instanced-array` - GPU-persistent buffers
+- `webgpu-storage-textures` - Read-write compute textures
+- `webgpu-workgroup-memory` - Shared memory (10-100x faster)
+- `webgpu-indirect-draws` - GPU-driven rendering
+
+### 12. Loading & Assets (MEDIUM)
 
 - `loading-draco-compression` - Use Draco for large meshes
 - `loading-gltf-preferred` - Use glTF format
@@ -160,7 +201,18 @@ Reference these guidelines when:
 - `loading-cache-assets` - Enable caching
 - `loading-dispose-unused` - Unload unused assets
 
-### 10. Camera & Controls (LOW-MEDIUM)
+### 13. Core Web Vitals (MEDIUM-HIGH)
+
+- `core-web-vitals` - LCP, FID, CLS optimization for 3D
+- `vitals-lazy-load` - Lazy load 3D below the fold with IntersectionObserver
+- `vitals-code-split` - Dynamic import Three.js modules
+- `vitals-preload` - Preload critical assets with link tags
+- `vitals-progressive-loading` - Low-res to high-res progressive load
+- `vitals-placeholders` - Show placeholder geometry during load
+- `vitals-web-workers` - Offload heavy work to workers
+- `vitals-streaming` - Stream large scenes by chunks
+
+### 14. Camera & Controls (LOW-MEDIUM)
 
 - `camera-near-far` - Set tight near/far planes
 - `camera-fov` - Choose appropriate FOV
@@ -168,38 +220,52 @@ Reference these guidelines when:
 - `camera-resize-handler` - Handle resize properly
 - `camera-orbit-limits` - Set orbit control limits
 
-### 11. Animation (MEDIUM)
+### 15. Animation (MEDIUM)
 
 - `animation-system` - AnimationMixer, blending, morph targets, skeletal
 
-### 12. Physics (MEDIUM)
+### 16. Physics (MEDIUM)
 
 - `physics-integration` - Rapier, Cannon-es integration patterns
+- `physics-compute-shaders` - GPU physics with compute shaders
 
-### 13. WebXR (MEDIUM)
+### 17. WebXR (MEDIUM)
 
 - `webxr-setup` - VR/AR buttons, controllers, hit testing
 
-### 14. Audio (LOW-MEDIUM)
+### 18. Audio (LOW-MEDIUM)
 
 - `audio-spatial` - PositionalAudio, HRTF, spatial sound
 
-### 15. Optimization (HIGH)
+### 19. Post-Processing (MEDIUM)
+
+- `postprocessing-optimization` - pmndrs/postprocessing guide
+- `postpro-renderer-config` - Disable AA, stencil, depth for post
+- `postpro-merge-effects` - Combine effects in single pass
+- `postpro-selective-bloom` - Selective bloom for performance
+- `postpro-resolution-scaling` - Half resolution for 2x FPS
+- `postpro-webgpu-native` - TSL-based post for WebGPU
+
+### 20. Optimization (HIGH)
 
 - `mobile-optimization` - Mobile-specific optimizations and checklist
 - `raycasting-optimization` - BVH, layers, GPU picking
 
-### 16. Production (HIGH)
+### 21. Production (HIGH)
 
 - `error-handling-recovery` - WebGL context loss and recovery
 - `migration-checklist` - Breaking changes by version
 
-### 17. Debug (LOW)
+### 22. Debug & DevTools (LOW)
 
-- `debug-stats` - Use Stats.js
-- `debug-helpers` - Use built-in helpers
-- `debug-gui` - Use lil-gui for tweaking
-- `debug-renderer-info` - Check renderer.info
+- `debug-devtools` - Complete debugging toolkit
+- `debug-stats-gl` - stats-gl for WebGL/WebGPU monitoring
+- `debug-lil-gui` - lil-gui for live parameter tweaking
+- `debug-spector` - Spector.js for WebGL frame capture
+- `debug-renderer-info` - Monitor draw calls and memory
+- `debug-three-mesh-bvh` - Fast raycasting with BVH
+- `debug-context-lost` - Handle WebGL context loss
+- `debug-animation-loop-profiling` - Profile render loop sections
 - `debug-conditional` - Remove debug code in production
 
 ## How to Use

package/skills/three-best-practices/rules/_sections.md

@@ -27,7 +27,13 @@
 - render-pixel-ratio
 - render-antialias-wisely
 
-## Priority 3: Geometry & Buffer Management (HIGH)
+## Priority 3: Draw Call Optimization (CRITICAL)
+- draw-call-optimization
+- geometry-instanced-mesh
+- geometry-batched-mesh
+- geometry-merge-static
+
+## Priority 4: Geometry & Buffer Management (HIGH)
 - geometry-buffer-geometry
 - geometry-merge-static
 - geometry-instanced-mesh
@@ -37,7 +43,7 @@
 - geometry-attributes-typed
 - geometry-interleaved
 
-## Priority 4: Material & Texture Optimization (HIGH)
+## Priority 5: Material & Texture Optimization (HIGH)
 - material-reuse
 - material-simplest-sufficient
 - material-texture-size-power-of-two
@@ -48,34 +54,47 @@
 - material-avoid-transparency
 - material-onbeforecompile
 
-## Priority 5: Lighting & Shadows (MEDIUM-HIGH)
+## Priority 6: Asset Compression (HIGH)
+- asset-compression
+- asset-draco
+- asset-ktx2
+- asset-meshopt
+- asset-lod
+
+## Priority 7: Lighting & Shadows (MEDIUM-HIGH)
 - lighting-limit-lights
+- lighting-shadows-advanced
 - lighting-bake-static
 - lighting-shadow-camera-tight
 - lighting-shadow-map-size
 - lighting-shadow-selective
 - lighting-shadow-cascade
+- lighting-shadow-auto-update
 - lighting-probe
+- lighting-environment
+- lighting-fake-shadows
 
-## Priority 6: Scene Graph Organization (MEDIUM)
+## Priority 8: Scene Graph Organization (MEDIUM)
 - scene-group-objects
 - scene-layers
 - scene-visible-toggle
 - scene-flatten-static
 - scene-name-objects
-- scene-object-pooling
+- object-pooling
 
-## Priority 7: Shader Best Practices GLSL (MEDIUM)
+## Priority 9: Shader Best Practices GLSL (MEDIUM)
 - shader-precision
+- shader-mobile
 - shader-avoid-branching
 - shader-precompute-cpu
 - shader-avoid-discard
 - shader-texture-lod
 - shader-uniform-arrays
 - shader-varying-interpolation
+- shader-pack-data
 - shader-chunk-injection
 
-## Priority 8: TSL - Three.js Shading Language (MEDIUM)
+## Priority 10: TSL - Three.js Shading Language (MEDIUM)
 - tsl-why-use
 - tsl-setup-webgpu
 - tsl-complete-reference
@@ -86,11 +105,21 @@
 - tsl-functions
 - tsl-conditionals
 - tsl-textures
+- tsl-noise
 - tsl-post-processing
 - tsl-compute-shaders
 - tsl-glsl-to-tsl
 
-## Priority 9: Loading & Assets (MEDIUM)
+## Priority 11: WebGPU Renderer (MEDIUM)
+- webgpu-renderer
+- webgpu-render-async
+- webgpu-feature-detection
+- webgpu-instanced-array
+- webgpu-storage-textures
+- webgpu-workgroup-memory
+- webgpu-indirect-draws
+
+## Priority 12: Loading & Assets (MEDIUM)
 - loading-draco-compression
 - loading-gltf-preferred
 - gltf-loading-optimization
@@ -100,36 +129,59 @@
 - loading-cache-assets
 - loading-dispose-unused
 
-## Priority 10: Camera & Controls (LOW-MEDIUM)
+## Priority 13: Core Web Vitals (MEDIUM-HIGH)
+- core-web-vitals
+- vitals-lazy-load
+- vitals-code-split
+- vitals-preload
+- vitals-progressive-loading
+- vitals-placeholders
+- vitals-web-workers
+- vitals-streaming
+
+## Priority 14: Camera & Controls (LOW-MEDIUM)
 - camera-near-far
 - camera-fov
 - camera-controls-damping
 - camera-resize-handler
 - camera-orbit-limits
 
-## Priority 11: Animation System (MEDIUM)
+## Priority 15: Animation System (MEDIUM)
 - animation-system
 
-## Priority 12: Physics Integration (MEDIUM)
+## Priority 16: Physics Integration (MEDIUM)
 - physics-integration
+- physics-compute-shaders
 
-## Priority 13: WebXR / VR / AR (MEDIUM)
+## Priority 17: WebXR / VR / AR (MEDIUM)
 - webxr-setup
 
-## Priority 14: Audio (LOW-MEDIUM)
+## Priority 18: Audio (LOW-MEDIUM)
 - audio-spatial
 
-## Priority 15: Optimization (HIGH)
+## Priority 19: Post-Processing (MEDIUM)
+- postprocessing-optimization
+- postpro-renderer-config
+- postpro-merge-effects
+- postpro-selective-bloom
+- postpro-resolution-scaling
+- postpro-webgpu-native
+
+## Priority 20: Mobile Optimization (HIGH)
 - mobile-optimization
 - raycasting-optimization
 
-## Priority 16: Production (HIGH)
+## Priority 21: Production (HIGH)
 - error-handling-recovery
 - migration-checklist
 
-## Priority 17: Debug & DevTools (LOW)
-- debug-stats
-- debug-helpers
-- debug-gui
+## Priority 22: Debug & DevTools (LOW)
+- debug-devtools
+- debug-stats-gl
+- debug-lil-gui
+- debug-spector
 - debug-renderer-info
+- debug-three-mesh-bvh
+- debug-context-lost
+- debug-animation-loop-profiling
 - debug-conditional