💡 Summary
A collection of skills enhancing Claude Code and Codex for React Three Fiber development.
🎯 Target Audience
🤖 AI Roast: “Powerful, but the setup might scare off the impatient.”
Risk: Medium. Review: shell/CLI command execution; outbound network access (SSRF, data egress); filesystem read/write scope and path traversal. Run with least privilege and audit before enabling in production.
React Three Fiber Skills for Claude Code & Codex
A collection of specialized skill files that enhance Claude Code and OpenAI Codex abilities to work with React Three Fiber (R3F) - the React renderer for Three.js.
Why These Skills?
LLM training data may contain outdated or incomplete R3F patterns. These skills provide:
- Accurate, up-to-date API references for R3F, Drei, and the ecosystem
- Idiomatic React patterns for 3D development
- Working code examples using hooks, JSX, and declarative patterns
- Performance best practices specific to React reconciliation
Available Skills
| Skill | Description |
|-------|-------------|
| r3f-fundamentals | Canvas setup, hooks (useFrame, useThree), JSX elements, events |
| r3f-geometry | Built-in geometries, custom BufferGeometry, instancing with Drei |
| r3f-materials | Material components, PBR, shader materials in R3F |
| r3f-lighting | Light components, shadows, Environment from Drei |
| r3f-textures | useTexture, useEnvironment, texture configuration |
| r3f-loaders | useGLTF, useLoader, Suspense patterns, asset preloading |
| r3f-animation | useFrame animations, useAnimations hook, spring physics |
| r3f-shaders | shaderMaterial, custom materials, uniforms in R3F |
| r3f-postprocessing | @react-three/postprocessing, EffectComposer, effects |
| r3f-interaction | Pointer events, controls, raycasting, KeyboardControls |
| r3f-physics | RigidBody, colliders, forces, joints, sensors with Rapier |
How It Works
Skills are automatically activated based on context. When you ask for R3F help, relevant skills load to provide accurate guidance. Both Claude Code and Codex use the same SKILL.md format with YAML frontmatter.
Example triggers:
- "Create a rotating cube in R3F" →
r3f-fundamentals,r3f-animation - "Add bloom effect" →
r3f-postprocessing - "Load a GLTF model" →
r3f-loaders - "Make an object clickable" →
r3f-interaction - "Add physics to falling cubes" →
r3f-physics
Installation
Quick Install
npx add-skill EnzeD/r3f-skills
This installs skills for your detected agent (Claude Code, Codex, OpenCode, or Cursor).
Manual Install
Copy the skills/ directory to your agent's skills location:
| Agent | Project | Global |
|-------|---------|--------|
| Claude Code | .claude/skills/ | ~/.claude/skills/ |
| Codex | .codex/skills/ | ~/.codex/skills/ |
Key Packages Covered
@react-three/fiber- Core R3F renderer@react-three/drei- Essential helpers and abstractions@react-three/postprocessing- Post-processing effects@react-three/rapier- Physics engine integrationthree- Underlying Three.js library
Version Compatibility
These skills are verified against:
- React Three Fiber 8.x
- Drei 9.x
- Three.js r160+
- React 18+
License
MIT - Use freely in your projects.
Contributing
Contributions welcome! Please ensure examples follow R3F idioms and best practices.
Pros
- Provides up-to-date R3F patterns
- Includes idiomatic React examples
- Covers a wide range of 3D development topics
- Easy installation process
Cons
- Limited to specific frameworks
- May require familiarity with React
- Not all skills may be relevant to every user
- Dependency on external libraries
Related Skills
react-best-practices
A“Powerful, but the setup might scare off the impatient.”
remotion
A“Creating videos with code? Hope your code is as smooth as your transitions.”
newbie-next
A“Powerful, but the setup might scare off the impatient.”
Disclaimer: This content is sourced from GitHub open source projects for display and rating purposes only.
Copyright belongs to the original author EnzeD.