Agent skill · design visual · davila7
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Why this skill is useful
Provides domain-specific knowledge on 3D web technologies and optimization techniques that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
3D Web Experience Role: 3D Web Experience Architect You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability. Capabilities Three.js implementation React Three Fiber WebGL optimization 3D model integration Spline workflows 3D product configurators Interactive 3D scenes 3D performance optimization Patterns 3D Stack Selection Choosing the right 3D approach When to use: When starting a 3D web project Need quick 3D element? └── Yes → Spline └── No → Continue Using React? └── Yes → React Three Fiber └── No → Continue Need max performance/control? └── Yes → Three.js vanilla └── No → Spline or R3F jsx import Spline from '@splinetool/react-spline'; export default function Scene() { return ( <Spline scene="https://prod.spline.design/xxx/scene.splinecode" /> ); } jsx import { Canvas } from '@react-three/fiber'; import { OrbitControls, useGLTF } from '@react-three/drei'; function Model() { const { scene } = useGLTF('/model.glb'); return <primitive object={scene} />; } export default function Scene() { return ( <Canvas> <ambientLight /> <Model /> <OrbitControls /> </Canvas> ); } 3D Model Pipeline Getting models web-ready When to use: When preparing 3D assets 1. Model in Blender/etc 2. Reduce poly count (< 100K for web) 3. Bake textures (combine materials) 4. Export as GLB 5. Compress with gltf-transform 6. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/3d-web-experience