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

pinkpixel-dev/3d-web-experience

Name: 3d-web-experience
Author: pinkpixel-dev

SKILLS/3d-web-experience/SKILL.md

npx skillsauth add pinkpixel-dev/skills-collection-1 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`

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.

pinkpixel-dev/3d-web-experience

SKILLS/3d-web-experience/SKILL.md

2 stars

development

Updated Apr 15, 2026

$ install --global

skillsauth

npx skillsauth add pinkpixel-dev/skills-collection-1 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: Apr 25, 2026, 9:33 PM2.1s1 file scanned

SKILL.md

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

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`

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.

Related Skills

pinkpixel-dev/aso-audit

testing

VerifiedTrustedCommunity

When the user wants a full ASO health audit, review their App Store listing quality, or diagnose why their app isn't ranking. Also use when the user mentions "ASO audit", "ASO score", "why am I not ranking", "listing review", or "optimize my app store page". For keyword-specific research, see keyword-research. For metadata writing, see metadata-optimization.

4SKILL.mdUpdated May 31, 2026

pinkpixel-dev/aso-audit

pinkpixel-dev/ask-questions-if-underspecified

testing

VerifiedTrustedCommunity

Clarify requirements before implementing. Use when serious doubts arise.

4SKILL.mdUpdated May 31, 2026

pinkpixel-dev/ask-questions-if-underspecified

pinkpixel-dev/asi1-builder

tools

VerifiedTrustedCommunity

Complete reference and build guide for ASI:One (ASI1) — the AI platform by Fetch.ai built for agentic, Web3-native applications. Use this skill IMMEDIATELY and ALWAYS when the user mentions ASI1, ASI:One, Fetch.ai AI API, building with ASI1, integrating ASI:One, asking about ASI1 models, tool calling with ASI1, ASI1 image generation, ASI1 agentic LLM, Agentverse, uagents, Agent Chat Protocol, structured output with ASI1, or OpenAI-compatible wrappers for ASI1. Also trigger when the user says things like "use ASI1 instead of OpenAI", "build an app with ASI:One", "ASI1 API", or references docs.asi1.ai. This skill covers everything needed to build production apps - setup, all models, all API features, tool calling, image gen, agentic orchestration, structured data, session management, streaming, LangChain integration, uagents / Agent Chat Protocol, and TypeScript/Node.js patterns.

4SKILL.mdUpdated May 30, 2026

pinkpixel-dev/asi1-builder

pinkpixel-dev/asc-metrics

data-ai

VerifiedTrustedCommunity

When the user wants to analyze their own app's actual performance data from App Store Connect — real downloads, revenue, IAP, subscriptions, trials, or country breakdowns synced via Appeeky Connect. Use when the user asks about "my downloads", "my revenue", "how is my app performing", "ASC data", "sales and trends", "my subscription numbers", "App Store Connect metrics", or wants to compare periods or top markets. For third-party app estimates, see app-analytics. For subscription analytics depth, see monetization-strategy.

4SKILL.mdUpdated May 30, 2026

pinkpixel-dev/asc-metrics

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/pinkpixel-dev/skills-collection-1.git

# Copy into Claude Code skills folder (global)
cp -r skills-collection-1/SKILLS/3d-web-experience ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

pinkpixel-dev/skills-collection-1

2 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT