R3F Router

Routes to 5 specialized React Three Fiber skills based on task requirements.

Routing Protocol

1. Classify — Identify primary task type from user request
2. Match — Find skill(s) with highest signal match
3. Combine — Most R3F tasks need 2-4 skills together
4. Load — Read matched SKILL.md files before implementation

Quick Route

Tier 1: Core (Always Consider)

Tier 2: Enhanced (Add When Needed)

Signal Matching Rules

Priority Order

When multiple signals present, resolve by priority:

1. Explicit component — "add OrbitControls" → r3f-drei
2. Specific technique — "use instancing" → r3f-geometry
3. Problem domain — "custom shader" → r3f-materials
4. 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

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