React Three Fiber(Three.jsのReactレンダラー)用の11モジュールスキル。3Dオブジェクトアニメーション、シェーダーアニメーション、インタラクションアニメーション、物理ベースアニメーション、ポストプロセッシングエフェクトをカバー。
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.
LLM training data may contain outdated or incomplete R3F patterns. These skills provide:
| 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 |
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:
r3f-fundamentals, r3f-animationr3f-postprocessingr3f-loadersr3f-interactionr3f-physicsnpx add-skill EnzeD/r3f-skills
This installs skills for your detected agent (Claude Code, Codex, OpenCode, or Cursor).
Copy the skills/ directory to your agent's skills location:
| Agent | Project | Global |
|---|---|---|
| Claude Code | .claude/skills/ | ~/.claude/skills/ |
| Codex | .codex/skills/ | ~/.codex/skills/ |
@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 libraryThese skills are verified against:
MIT - Use freely in your projects.
Contributions welcome! Please ensure examples follow R3F idioms and best practices.