R3F Router
Routes to 5 specialized React Three Fiber skills based on task requirements.
Routing Protocol Classify — Identify primary task type from user request Match — Find skill(s) with highest signal match Combine — Most R3F tasks need 2-4 skills together Load — Read matched SKILL.md files before implementation Quick Route Tier 1: Core (Always Consider) Task Type Skill Primary Signal Words Scene setup r3f-fundamentals canvas, scene, camera, lights, render, useFrame Custom shapes r3f-geometry geometry, vertices, bufferAttribute, instancing, mesh Surface appearance r3f-materials material, shader, texture, uniform, color, PBR Tier 2: Enhanced (Add When Needed) Task Type Skill Primary Signal Words Optimization r3f-performance performance, FPS, draw calls, LOD, culling, memory Helpers/Controls r3f-drei OrbitControls, useGLTF, Text, Environment, Html Signal Matching Rules Priority Order
When multiple signals present, resolve by priority:
Explicit component — "add OrbitControls" → r3f-drei Specific technique — "use instancing" → r3f-geometry Problem domain — "custom shader" → r3f-materials Default tier — Fall back to r3f-fundamentals Confidence Scoring High (3+ signals) — Route immediately Medium (1-2 signals) — Route with r3f-fundamentals as base Low (0 signals) — Ask user for clarification Common Combinations Basic 3D Scene (3 skills) r3f-fundamentals → Canvas, camera, lights, render loop r3f-drei → OrbitControls, Environment, helpers r3f-materials → MeshStandardMaterial, textures
Wiring: Fundamentals provides scene structure, drei adds controls and environment, materials define appearance.
Custom Shader Effect (3 skills) r3f-fundamentals → Scene setup, useFrame for animation r3f-geometry → Custom BufferGeometry if needed r3f-materials → ShaderMaterial, uniforms, GLSL
Wiring: Fundamentals handles render loop, materials provides shader infrastructure.
Particle System (4 skills) r3f-fundamentals → Scene, camera, render loop r3f-geometry → InstancedMesh, buffer attributes r3f-materials → Custom particle shader r3f-performance → Optimization, draw call reduction
Wiring: Geometry provides instancing, materials handles particle rendering, performance ensures smooth animation.
Product Visualization (4 skills) r3f-fundamentals → Scene structure r3f-drei → useGLTF, Environment, ContactShadows, OrbitControls r3f-materials → PBR materials, environment mapping r3f-performance → LOD, texture optimization
Wiring: Drei loads model and provides studio setup, materials ensures realistic rendering.
Large Scene (4 skills) r3f-fundamentals → Base scene management r3f-geometry → Merged geometry, instancing r3f-performance → LOD, culling, lazy loading r3f-drei → Bounds, Preload, Detailed
Wiring: Performance strategies combined with geometry optimization for smooth rendering.
Decision Table Scenario Model Loading Custom Shapes Custom Shaders Optimization Route To Simple viewer Yes No No No fundamentals + drei Custom geometry No Yes No No fundamentals + geometry Shader art No Maybe Yes No fundamentals + materials + geometry Game/simulation Maybe Yes Maybe Yes all skills Product viz Yes No No Maybe fundamentals + drei + materials Particles No Yes Yes Yes fundamentals + geometry + materials + performance Skill Dependencies r3f-fundamentals (foundation) ├── r3f-geometry (extends fundamentals) ├── r3f-materials (extends fundamentals) ├── r3f-drei (extends fundamentals) └── r3f-performance (applies to all)
Always start with r3f-fundamentals r3f-geometry and r3f-materials often used together r3f-drei can replace manual implementations r3f-performance applies optimization to any combination Fallback Behavior Unknown task type → Start with r3f-fundamentals + r3f-drei No clear signals → Ask: "What are you trying to render?" and "Any specific effects needed?" Conflicting signals → Prefer r3f-drei abstractions over manual implementations Quick Decision Flowchart User Request │ ▼ ┌─────────────────────┐ │ Need 3D model? │──Yes──▶ r3f-drei (useGLTF) └─────────────────────┘ │ No ▼ ┌─────────────────────┐ │ Custom geometry? │──Yes──▶ r3f-geometry └─────────────────────┘ │ No ▼ ┌─────────────────────┐ │ Custom shader? │──Yes──▶ r3f-materials └─────────────────────┘ │ No ▼ ┌─────────────────────┐ │ Performance issues? │──Yes──▶ r3f-performance └─────────────────────┘ │ No ▼ ┌─────────────────────┐ │ Controls/helpers? │──Yes──▶ r3f-drei └─────────────────────┘ │ No ▼ r3f-fundamentals (default)
Reference
See individual skill files for detailed patterns:
/mnt/skills/user/r3f-fundamentals/SKILL.md /mnt/skills/user/r3f-geometry/SKILL.md /mnt/skills/user/r3f-materials/SKILL.md /mnt/skills/user/r3f-performance/SKILL.md /mnt/skills/user/r3f-drei/SKILL.md