Skills for 3D Web Designers and Engineers
For designers and engineers to help them build better 3D interfaces, scroll-driven landing pages, and physics games in Three.js and React Three Fiber (React / Next.js).
Knowing whether you made a right choice when it comes to 3D camera motion, damping curves, materials, studio lighting, or physics loops is hard. These skills aim to help you get to those right decisions faster.
npx skills add your-username/3d-web-skillsAvailable Skills
Click any skill below to inspect its SKILL.md instructions and Next.js React Three Fiber component code.
Why use it?
I have seen plenty of times that agents don't pick the right ingredients for a 3D scene. A fixed 0.1 lerp factor inside useFrame that runs twice as fast on a 120Hz display as on a 60Hz monitor. Or a meshStandardMaterial with roughness: 0 and no environment map that looks like flat plastic.
All these small things compound and make your 3D interface either feel alive, or just… not that great. These skills list all the little mistakes agents can potentially make and explain how to fix them.
| Before | After | Why |
|---|---|---|
pos.x += (target - pos.x) * 0.1 | MathUtils.damp(pos.x, target, 8, dt) | Fixed lerp is frame-rate dependent and runs 2x faster at 120Hz |
setScroll(window.scrollY) in loop | Mutate ref.current in useFrame | React state updates at 60–120fps stall main-thread reconciliation |
new THREE.Vector3() in useFrame | Hoist scratch vector to module scope | Per-frame heap allocations cause garbage collection freezes |
roughness={0} without EnvMap | roughness={0.18} + <Environment /> | Real surfaces are never 0.0 mirror or 1.0 chalk; PBR needs reflections |
<Canvas> (unbounded DPR) | <Canvas dpr={[1, 2]}> | 3x–4x mobile retina screens overload fragment shaders |
---
name: 3d-web-design
description: Build, review, and optimize fluid, high-craft 3D web experiences, scroll-driven 3D landing pages, and physics-based 3D browser games using Three.js and React Three Fiber (React/Next.js).
---
# 3d-web-design
Bundled directory structure:
├── SKILL.md
├── references/
│ ├── STANDARDS.md
│ ├── SCROLL_AND_CAMERA_CHOREOGRAPHY.md
│ ├── PHYSICS_AND_GAMES.md
│ └── SHADERS_LIGHTING_POSTPROCESSING.md
├── assets/
│ ├── r3f-scroll-landing-template.tsx
│ ├── r3f-rapier-game-template.tsx
│ └── vanilla-three-starter.html
└── scripts/
└── audit_3d_code.py
## Non-Negotiable Rules
1. Never call React setState inside useFrame — mutate Three.js refs directly.
2. Zero per-frame allocations — hoist scratch Vector3/Quaternion instances to module scope.
3. Frame-rate independent damping — always use THREE.MathUtils.damp(cur, target, lambda, delta).
4. Clamp Device Pixel Ratio — <Canvas dpr={[1, 2]}> so 3x-4x screens don't stall shaders.
5. Physically plausible PBR — keep roughness in 0.08–0.88 and pair with <Environment />.