Claude Code · 6 agents · 4 skills

Build award-style 3D websites.

A ready-made pack of specialized AI agents and skills that take you from architecture to 60 fps — Three.js, React Three Fiber, WebGPU, shaders, scroll-motion and asset pipelines, all wired into Claude Code.

Get the pack Explore agents
0Specialized agents
0Workflow skills
0Target FPS
0Draw-call budget
What is this

Your studio-in-a-box for the 3D web.

The 3D Web Pack drops six expert agents and four guided skills into Claude Code. Each agent owns one layer of a high-end 3D site — architecture, scene code, shaders, motion, performance, assets — so you ship the kind of experience you see on Awwwards, FWA and Codrops without becoming a Three.js wizard first.

06 — Agents

Six specialists, one pipeline.

⬡

threejs-architect

Plans the stack, scene graph, render strategy and FPS / asset budgets before a line of code.

⚛

r3f-engineer

Builds the scene in React Three Fiber & Three.js — meshes, lights, materials, model loading, drei.

✦

shader-artist

Writes GLSL & TSL (WebGPU) — raymarching, noise, fresnel, dissolve, particles, custom materials.

◐

motion-choreographer

Scroll storytelling & camera choreography with GSAP ScrollTrigger, Lenis and drei ScrollControls.

⚡

webgl-perf-auditor

Hunts frame drops — draw calls, instancing, LOD, compression, memory leaks, mobile tiers.

⬢

asset-pipeline-engineer

glTF/GLB optimization, Draco & KTX2, gltfjsx, and integrating AI-generated models (Meshy / Tripo).

04 — Skills

Guided workflows, one command away.

/scaffold-3d-site

Spin up a fresh project — Vite/Next + R3F + drei + postprocessing + motion.

/optimize-3d-assets

Compress models & textures with gltf-transform, gltfpack, Draco and KTX2.

/add-postprocessing

Add cinematic bloom, depth-of-field, grain and tone-mapping to an R3F scene.

/scroll-3d-scene

Wire scroll-driven 3D with Lenis + GSAP, or in-canvas drei ScrollControls.

Recommended stack · 2026

The tech the pack reaches for.

Render

  • React Three Fiber + drei
  • Three.js
  • WebGPU + TSL
  • Babylon.js

Motion

  • GSAP + ScrollTrigger
  • Lenis
  • react-spring
  • theatre.js

Look

  • @react-three/postprocessing
  • Custom GLSL / TSL
  • HDRI environments
  • leva

Assets & perf

  • gltf-transform · gltfpack
  • Draco · KTX2 / Basis
  • stats-gl · r3f-perf
  • Meshy · Tripo · Spline
Install

Drop it into Claude Code.

Clone the repo and copy the agents & skills into your global ~/.claude — they’ll work in every project.

# 1. clone the pack
git clone https://github.com/skinnye/3d-web-pack.git

# 2. install agents + skills globally
cp -r 3d-web-pack/agents/* ~/.claude/agents/
cp -r 3d-web-pack/skills/* ~/.claude/skills/

# 3. start building
"Plan a 3D landing page for a sneaker brand"  → threejs-architect
"/scaffold-3d-site"                            → fresh project
"Make an iridescent liquid sphere"            → shader-artist