name	r3f-router
description	Decision framework for React Three Fiber projects. Routes to specialized R3F skills (fundamentals, geometry, materials, performance, drei) based on task requirements. Use when starting an R3F project or needing guidance on which R3F skills to combine.

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

Install Skill

SKILL.md