---

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

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)

Copyr3f-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)

Copyr3f-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)

Copyr3f-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)

Copyr3f-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)

Copyr3f-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

Copyr3f-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

CopyUser 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