three-d-scene
OfficialBuild performant R3F scenes with guardrails.
Design & Creative#performance#accessibility#react-three-fiber#threejs#design-systems#instancing#mobile-fallback
Authorshipiit
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill prevents slow, inaccessible, and fragile React Three Fiber (R3F) scenes by enforcing a consistent 3D architecture, performance practices, and mobile/reduced-motion fallbacks.
Core Features & Use Cases
- R3F scene architecture rules: Suspense boundaries, scoped Canvas setup, deterministic rendering strategy (e.g., frameloop="demand"), and a mobile/reduced-motion poster fallback.
- Camera + drei best practices: Guidance on camera selection, preferred drei utilities (Environment, ContactShadows, Float, Instances, Html), and runtime camera switching patterns.
- Performance and correctness guardrails: Avoid per-frame geometry/material recreation, prefer instancing for repeated meshes, lazy-load heavy scenes/models, and respect shadow/postprocessing costs.
- Token-based styling integration: Bridge CSS design tokens into Three.js materials without hardcoding values to preserve theme consistency.
Quick Start
Ask it to generate a R3F hero/product scene for your UI, using the Scene component pattern with Suspense, token-driven materials, and an SVG/PNG poster fallback for mobile and reduced-motion users.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: three-d-scene Download link: https://github.com/shipiit/shipit-ui-design/archive/main.zip#three-d-scene Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.