Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

superesty/3d-web-experience

Name: 3d-web-experience
Author: superesty

library/skills/3d-web-experience/SKILL.md

npx skillsauth add superesty/unified-ag-kit 3d-web-experience

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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 Tree

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


### Spline (Fastest Start)
```jsx
import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

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

```python
## 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 Pipeline

Model in Blender/etc
Reduce poly count (< 100K for web)
Bake textures (combine materials)
Export as GLB
Compress with gltf-transform
Test file size (< 5MB ideal)


### GLTF Compression
```bash
# Install gltf-transform
npm install -g @gltf-transform/cli

# Compress model
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Loading in R3F

import { 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

```python
## Scroll-Driven 3D

### R3F + Scroll Controls
```jsx
import { 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.js

import 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 animations


## Anti-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`

superesty/3d-web-experience

library/skills/3d-web-experience/SKILL.md

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.

development

Updated Apr 15, 2026

$ install --global

skillsauth

npx skillsauth add superesty/unified-ag-kit 3d-web-experience

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Mar 29, 2026, 12:22 PM37.2s1 file scanned

SKILL.md

name:: 3d-web-experience
description:: 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.
source:: vibeship-spawner-skills (Apache 2.0)

3D Web Experience

Role: 3D Web Experience Architect

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 Tree

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


### Spline (Fastest Start)
```jsx
import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

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

```python
## 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 Pipeline

Model in Blender/etc
Reduce poly count (< 100K for web)
Bake textures (combine materials)
Export as GLB
Compress with gltf-transform
Test file size (< 5MB ideal)


### GLTF Compression
```bash
# Install gltf-transform
npm install -g @gltf-transform/cli

# Compress model
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Loading in R3F

import { 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

```python
## Scroll-Driven 3D

### R3F + Scroll Controls
```jsx
import { 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.js

import 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 animations


## Anti-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

superesty/langgraph

development

VerifiedTrustedCommunity

Expert in LangGraph - the production-grade framework for building stateful, multi-actor AI applications. Covers graph construction, state management, cycles and branches, persistence with checkpointers, human-in-the-loop patterns, and the ReAct agent pattern. Used in production at LinkedIn, Uber, and 400+ companies. This is LangChain's recommended approach for building agents. Use when: langgraph, langchain agent, stateful agent, agent graph, react agent.

SKILL.mdUpdated Apr 15, 2026

superesty/langfuse

development

VerifiedTrustedCommunity

Expert in Langfuse - the open-source LLM observability platform. Covers tracing, prompt management, evaluation, datasets, and integration with LangChain, LlamaIndex, and OpenAI. Essential for debugging, monitoring, and improving LLM applications in production. Use when: langfuse, llm observability, llm tracing, prompt management, llm evaluation.

SKILL.mdUpdated Apr 15, 2026

superesty/langchain-architecture

tools

VerifiedTrustedCommunity

Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns. Use when building LangChain applications, implementing AI agents, or creating complex LLM workflows.

SKILL.mdUpdated Apr 15, 2026

superesty/langchain-architecture

superesty/kubernetes-architect

development

VerifiedTrustedCommunity

Expert Kubernetes architect specializing in cloud-native infrastructure, advanced GitOps workflows (ArgoCD/Flux), and enterprise container orchestration. Masters EKS/AKS/GKE, service mesh (Istio/Linkerd), progressive delivery, multi-tenancy, and platform engineering. Handles security, observability, cost optimization, and developer experience. Use PROACTIVELY for K8s architecture, GitOps implementation, or cloud-native platform design.

SKILL.mdUpdated Apr 15, 2026

superesty/kubernetes-architect

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/superesty/unified-ag-kit.git

# Copy into Claude Code skills folder (global)
cp -r unified-ag-kit/library/skills/3d-web-experience ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

superesty/unified-ag-kit

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT