3d Web Experience
- 884 installs
- 29.9k repo stars
- Updated July 27, 2026
- davila7/claude-code-templates
3d-web-experience is a Claude Code skill that architects performant, accessible 3D web experiences with Three.js, React Three Fiber, Spline, and WebGL for developers who need product configurators, 3D portfolios, or imme
About
3d-web-experience is an expert agent skill sourced from vibeship-spawner-skills under Apache 2.0 that guides developers through building interactive 3D scenes in the browser. The skill covers Three.js, React Three Fiber, Spline imports, and raw WebGL patterns for product configurators, 3D portfolios, and immersive marketing sites. It emphasizes when 3D adds real value versus visual noise, balancing visual impact with frame-rate budgets, keyboard and screen-reader accessibility, and progressive enhancement for users unfamiliar with 3D navigation. Developers reach for 3d-web-experience when scaffolding a new R3F canvas, choosing between Spline embeds and custom shaders, or auditing an existing scene for jank, layout shift, and mobile GPU limits before shipping a public-facing experience.
- Three.js implementation and vanilla 3D scenes
- React Three Fiber for complex React-based 3D
- Spline workflows for rapid designer-friendly prototypes
- 3D product configurators and interactive scenes
- WebGL optimization and 3D performance tuning
3d Web Experience by the numbers
- 884 all-time installs (skills.sh)
- +33 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #458 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill 3d-web-experienceAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 884 |
|---|---|
| repo stars | ★ 29.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | davila7/claude-code-templates ↗ |
How do you build performant 3D web experiences?
Get an expert agent that architects performant, accessible 3D web experiences using Three.js, React Three Fiber, Spline and WebGL.
Who is it for?
Frontend developers adding Three.js or React Three Fiber 3D scenes who need performance, accessibility, and UX guidance before shipping.
Skip if: Developers building native game engines, server-side 3D rendering pipelines, or static 2D sites with no interactive depth requirements.
When should I use this skill?
The user mentions Three.js, React Three Fiber, WebGL, Spline, 3D portfolio, product configurator, or immersive 3D website work.
What you get
R3F scene architecture, WebGL performance plan, accessibility checklist, and Spline-or-custom-shader decision notes.
- 3D scene architecture plan
- performance and accessibility checklist
Files
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
## 3D Stack Selection
### Options Comparison
| Tool | Best For | Learning Curve | Control |
|------|----------|----------------|---------|
| Spline | Quick prototypes, designers | Low | Medium |
| React Three Fiber | React apps, complex scenes | Medium | High |
| Three.js vanilla | Max control, non-React | High | Maximum |
| Babylon.js | Games, heavy 3D | High | Maximum |
### Decision TreeNeed 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
### Spline (Fastest Start)import Spline from '@splinetool/react-spline';
export default function Scene() { return ( <Spline scene="https://prod.spline.design/xxx/scene.splinecode" /> ); }
### React Three Fiberimport { 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
## 3D Model Pipeline
### Format Selection
| Format | Use Case | Size |
|--------|----------|------|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |
### Optimization Pipeline1. 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. Test file size (< 5MB ideal)
### GLTF CompressionInstall gltf-transform
npm install -g @gltf-transform/cli
Compress model
gltf-transform optimize input.glb output.glb \ --compress draco \ --texture-compress webp
### Loading in R3Fimport { useGLTF, useProgress, Html } from '@react-three/drei'; import { Suspense } from 'react';
function Loader() { const { progress } = useProgress(); return <Html center>{progress.toFixed(0)}%</Html>; }
export default function Scene() { return ( <Canvas> <Suspense fallback={<Loader />}> <Model /> </Suspense> </Canvas> ); }
Scroll-Driven 3D
3D that responds to scroll
When to use: When integrating 3D with scroll
## Scroll-Driven 3D
### R3F + Scroll Controlsimport { ScrollControls, useScroll } from '@react-three/drei'; import { useFrame } from '@react-three/fiber';
function RotatingModel() { const scroll = useScroll(); const ref = useRef();
useFrame(() => { // Rotate based on scroll position ref.current.rotation.y = scroll.offset Math.PI 2; });
return <mesh ref={ref}>...</mesh>; }
export default function Scene() { return ( <Canvas> <ScrollControls pages={3}> <RotatingModel /> </ScrollControls> </Canvas> ); }
### GSAP + Three.jsimport gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.to(camera.position, { scrollTrigger: { trigger: '.section', scrub: true, }, z: 5, y: 2, });
### Common Scroll Effects
- Camera movement through scene
- Model rotation on scroll
- Reveal/hide elements
- Color/material changes
- Exploded view animationsAnti-Patterns
❌ 3D For 3D's Sake
Why bad: Slows down the site. Confuses users. Battery drain on mobile. Doesn't help conversion.
Instead: 3D should serve a purpose. Product visualization = good. Random floating shapes = probably not. Ask: would an image work?
❌ Desktop-Only 3D
Why bad: Most traffic is mobile. Kills battery. Crashes on low-end devices. Frustrated users.
Instead: Test on real mobile devices. Reduce quality on mobile. Provide static fallback. Consider disabling 3D on low-end.
❌ No Loading State
Why bad: Users think it's broken. High bounce rate. 3D takes time to load. Bad first impression.
Instead: Loading progress indicator. Skeleton/placeholder. Load 3D after page is interactive. Optimize model size.
Related Skills
Works well with: scroll-experience, interactive-portfolio, frontend, landing-page-design
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick 3d-web-experience for end-to-end 3D scene architecture; pick r3f-loaders when the scene exists and asset loading patterns are the blocker.
FAQ
What libraries does 3d-web-experience cover?
3d-web-experience covers Three.js, React Three Fiber, Spline, and WebGL for browser 3D scenes. The skill targets product configurators, 3D portfolios, and immersive websites while weighing performance and accessibility trade-offs.
When should developers use 3d-web-experience?
Developers should invoke 3d-web-experience when scoping a new 3D website, R3F canvas, or WebGL scene and need guidance on library choice, performance budgets, and accessible interaction patterns before writing production code.
Is 3d Web Experience safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.