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)

code

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)

code

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)

code

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)

code

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)

code

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

code

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

code

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