Get a week free of Claude Code →

🎨 R3f Fundamentals

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.

QUICK INSTALL
npx playbooks add skill enzed/r3f-skills --skill r3f-fundamentals

About

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.. This skill provides a specialized system prompt that configures your AI coding agent as a r3f fundamentals expert, with detailed methodology and structured output formats.

Compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any agent that supports custom system prompts.

Example Prompts

Get started Help me use the R3f Fundamentals skill effectively.

System Prompt (32 words)

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.

Related Skills

Get the best new skills
in your inbox

Weekly roundup of top Claude Code skills, MCP servers, and AI coding tips.