enzed-r3f-skills

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 integration
• three - 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.