r3f-router
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.
- Installs
- 68
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-router- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads r3f-router automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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-fundamentalsas 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-geometryandr3f-materialsoften used togetherr3f-dreican replace manual implementationsr3f-performanceapplies 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-dreiabstractions 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
FAQ
What does the r3f-router skill do?
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.
How do I install r3f-router?
Run npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-router in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/r3f-router/ (personal) or .claude/skills/r3f-router/ (project).
Which AI agents can use r3f-router?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is r3f-router safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains r3f-router?
It is published by bbeierle12 in bbeierle12/skill-mcp-claude. It has 68 recorded installs.
More from bbeierle12/skill-mcp-claude
gsap-react
bbeierle12/skill-mcp-claude
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
gsap-scrolltrigger
bbeierle12/skill-mcp-claude
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
gsap-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
shader-effects
bbeierle12/skill-mcp-claude
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
d3js-visualization
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
shader-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.