Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

3D Web Experience · sickn33 | DecimalAI

sickn33/3d-web-experience

SkillScore82Maintained

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.

Frontendby sickn33

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/sickn33-3d-web-experience/SKILL.md

decimalai skills pull sickn33-3d-web-experience --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/sickn33-3d-web-experience/SKILL.md https://app.decimal.ai/s/sickn33-3d-web-experience/SKILL.md

Raw file: /s/sickn33-3d-web-experience/SKILL.md ↗ · machine-readable summary at /s/sickn33-3d-web-experience.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 24d ago

Yes — +32% lift · at higher cost+65% tokens0% turns82% of whole cases pass with skill (18/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	86%	0%
case-01	✗→✓	▲ Improved	25%	0%
case-02	✗→✓	▲ Improved	24%	0%
case-04	✗→✓	▲ Improved	120%	0%
case-08	✗→✓	▲ Improved	101%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/9/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

sickn33 / antigravity-awesome-skills

plugins/agentic-bundle-aas-product-design-studio/skills/3d-web-experience/SKILL.md

View on GitHub ↗

License MITImported 8/9/2026Version v1

Skill contents

SKILL.md

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.

Expertise

Three.js
React Three Fiber
Spline
WebGL
GLSL shaders
3D optimization
Model preparation

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

jsx
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

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

1. 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 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

jsx
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

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

javascript
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

Performance Optimization

Keeping 3D fast

When to use: Always - 3D is expensive

3D Performance

Performance Targets

| Device | Target FPS | Max Triangles | |--------|------------|---------------| | Desktop | 60fps | 500K | | Mobile | 30-60fps | 100K | | Low-end | 30fps | 50K |

Quick Wins

jsx
// 1. Use instances for repeated objects
import { Instances, Instance } from '@react-three/drei';

// 2. Limit lights
<ambientLight intensity={0.5} />
<directionalLight /> // Just one

// 3. Use LOD (Level of Detail)
import { LOD } from 'three';

// 4. Lazy load models
const Model = lazy(() => import('./Model'));

Mobile Detection

jsx
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
  dpr={isMobile ? 1 : 2} // Lower resolution on mobile
  performance={{ min: 0.5 }} // Allow frame drops
>

Fallback Strategy

jsx
function Scene() {
  const [webGLSupported, setWebGLSupported] = useState(true);

  if (!webGLSupported) {
    return <img src="/fallback.png" alt="3D preview" />;
  }

  return <Canvas onCreated={...} />;
}

Validation Checks

No 3D Loading Indicator

Severity: HIGH

Message: No loading indicator for 3D content.

Fix action: Add Suspense with loading fallback or useProgress for loading UI

No WebGL Fallback

Severity: MEDIUM

Message: No fallback for devices without WebGL support.

Fix action: Add WebGL detection and static image fallback

Uncompressed 3D Models

Severity: MEDIUM

Message: 3D models may be unoptimized.

Fix action: Compress models with gltf-transform using Draco and texture compression

OrbitControls Blocking Scroll

Severity: MEDIUM

Message: OrbitControls may be capturing scroll events.

Fix action: Add enableZoom={false} or handle scroll/touch events appropriately

High DPR on Mobile

Severity: MEDIUM

Message: Canvas DPR may be too high for mobile devices.

Fix action: Limit DPR to 1 on mobile devices for better performance

Collaboration

Delegation Triggers

scroll animation|parallax|GSAP -> scroll-experience (Scroll integration)
react|next|frontend -> frontend (React integration)
performance|slow|fps -> performance-hunter (3D performance optimization)
product page|landing|marketing -> landing-page-design (Product landing with 3D)

Product Configurator

Skills: 3d-web-experience, frontend, landing-page-design

Workflow:

1. Prepare 3D product model
2. Set up React Three Fiber scene
3. Add interactivity (colors, variants)
4. Integrate with product page
5. Optimize for mobile
6. Add fallback images

Immersive Portfolio

Skills: 3d-web-experience, scroll-experience, interactive-portfolio

Workflow:

1. Design 3D scene concept
2. Build scene in Spline or R3F
3. Add scroll-driven animations
4. Integrate with portfolio sections
5. Ensure mobile fallback
6. Optimize performance

Related Skills

Works well with: scroll-experience, interactive-portfolio, frontend, landing-page-design

When to Use

User mentions or implies: 3D website
User mentions or implies: three.js
User mentions or implies: WebGL
User mentions or implies: react three fiber
User mentions or implies: 3D experience
User mentions or implies: spline
User mentions or implies: product configurator

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Illustrative Want to see what sickn33/3d-web-experience would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/28/2026, 22:52 UTC · 22 cases

Lift

+32%

82% vs 50%

Agent turns

1.0 vs 1.0

Tokens

+65%

4,520.59 vs 2,732.82

fail → pass · 8pass → pass · 10fail → fail · 3pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-05 Some corporate client browsers in our user base have WebGL disabled or unsupported. How should we handle initial WebGL capability verification and display a fallback UI for unsupported devices?	fail→pass	17,068	16,354	-4%	1	1	0%	2,728	5,078	+86%	0	0	—
case-18 We ran an automated audit on our 3D web application and received a HIGH severity validation warning regarding visual feedback during model loading. What was the validation check, and what is the fix?	pass→pass	13,945	6,249	-55%	1	1	0%	2,399	3,362	+40%	0	0	—
case-01 We are planning a web project that includes interactive 3D elements and want to choose the right tech stack. Please provide a breakdown comparing Spline, React Three Fiber, Three.js, and Babylon.js based on control, learning curve, and primary use cases. Include a structured decision guide to help us select the best tool depending on whether we use React, need fast visual prototyping, or require maximum low-level performance.	fail→pass	21,509	21,271	-1%	1	1	0%	3,606	4,511	+25%	0	0	—
case-02 Our web store features 3D product models, but the raw assets are too heavy and slow down mobile page loads. Can you give us a step-by-step asset optimization workflow, the command-line sequence for compressing GLB files (both mesh and texture compression), and a React Three Fiber component snippet showing how to render the model with loading progress feedback?	fail→pass	26,108	19,178	-27%	1	1	0%	4,873	6,025	+24%	0	0	—
case-03 We want to create a web scene where a 3D mesh rotates smoothly in response to page scroll progress using React components. How should we set up the scroll tracking and frame-by-frame animation calculation?	fail→fail	15,384	16,807	+9%	1	1	0%	2,843	5,294	+86%	0	0	—
case-04 Our 3D Canvas in React runs smoothly on desktop graphics cards, but mobile devices suffer severe thermal throttling and frame drops. We want to adjust pixel density dynamically for mobile users without disabling 3D completely. What device ratio configuration should we pass to the Canvas element?	fail→pass	11,226	12,209	+9%	1	1	0%	2,063	4,537	+120%	0	0	—
case-06 Users navigating our product page report that touch scrolling stops working when their finger hits the interactive 3D model area because orbit controls capture all touch interactions. How can we prevent camera orbit controls from blocking page scrolling?	pass→pass	14,603	15,134	+4%	1	1	0%	2,491	4,820	+93%	0	0	—
case-07 We need to render 2,000 identical 3D forest trees across a terrain map in React Three Fiber. Instantiating 2,000 individual meshes causes draw call overhead. What component pattern from the drei library optimizes these repeated identical models into batched draw calls?	pass→pass	10,270	13,375	+30%	1	1	0%	1,845	5,004	+171%	0	0	—
case-08 We are establishing performance targets and asset geometry limits for our web 3D app targeted at mobile smartphones versus desktop computers. What are the recommended maximum triangle count limits for mobile and desktop web targets?	fail→pass	14,671	14,125	-4%	1	1	0%	2,338	4,703	+101%	0	0	—
case-09 Our 3D design team is exporting GLB assets from Blender for web integration. What maximum file size target and poly count limit should we enforce before assets enter production?	pass→fail	16,196	12,625	-22%	1	1	0%	2,472	4,254	+72%	0	0	—
case-10 We are building a vanilla Three.js website without React and want to animate the camera position along the Z and Y axes as the user scrolls through page sections using GSAP. What is the code structure for linking camera position to scroll?	fail→fail	17,144	17,862	+4%	1	1	0%	3,408	5,627	+65%	0	0	—
case-11 Our team is evaluating file formats for web-based interactive 3D models, Apple AR experiences, and raw software exports. Can you summarize which format provides the smallest footprint for standard web 3D vs Apple AR?	pass→pass	12,579	10,201	-19%	1	1	0%	1,934	3,879	+101%	0	0	—
case-12 Our team is building a complex interactive website that combines 3D model rendering with complex GSAP scroll animations and multi-section parallax effects. Which team or specialized skill workflow should handle the GSAP scroll integration?	pass→pass	15,082	8,421	-44%	1	1	0%	2,236	3,773	+69%	0	0	—
case-13 Our WebGL application is dropping below 15 FPS on mid-range devices due to severe rendering bottlenecks. Which specialized skill should we invoke to audit framerates and optimize rendering performance?	fail→pass	11,251	7,070	-37%	1	1	0%	1,676	3,350	+100%	0	0	—
case-14 We are designing a new marketing launch page for a consumer physical product that incorporates an interactive 3D customization viewer alongside marketing copy sections. Which skills collaborate on this workflow?	fail→pass	14,473	7,582	-48%	1	1	0%	2,217	3,522	+59%	0	0	—
case-15 Our React Three Fiber scene currently has six dynamic point lights and multiple shadow casting sources, causing severe GPU slowdowns. How should we streamline lighting for high performance?	fail→fail	17,276	17,282	+0%	1	1	0%	2,682	5,281	+97%	0	0	—
case-16 We have a pre-compressed GLB model located at `/model.glb`. We need a minimal React Three Fiber component that loads this GLB file and renders it inside a Canvas with ambient lighting and orbit controls. What is the complete component code?	pass→pass	7,724	6,641	-14%	1	1	0%	1,588	3,538	+123%	0	0	—
case-17 We have an interactive 3D visual component designed by our UI team in Spline and exported as a `.splinecode` URL. How do we embed this into a React application with minimal boilerplate code?	pass→pass	7,907	8,915	+13%	1	1	0%	1,417	3,926	+177%	0	0	—
case-19 Our CI pipeline flagged a MEDIUM severity validation error stating that 3D model files are unoptimized. What CLI optimization command resolves this check?	fail→pass	9,988	23,437	+135%	1	1	0%	1,675	2,741	+64%	0	0	—
case-20 We want to create a lightweight 3D card-flip effect on hover for our team profile cards using standard CSS transforms (`transform: rotateY(180deg)` and `perspective: 1000px`) in a plain React component. We do NOT want WebGL, Three.js, or 3D canvas libraries. Can you provide the CSS and JSX for this card flip animation?	pass→pass	15,975	13,101	-18%	1	1	0%	3,250	4,998	+54%	0	0	—
case-21 We need a 2D HTML5 Canvas component in React that renders a line chart of daily stock prices using standard 2D canvas context methods (`getContext('2d')`, `lineTo`, `stroke`). We are not creating 3D scenes or using WebGL. Can you provide a clean React component using `HTMLCanvasElement.getContext('2d')`?	pass→pass	36,391	16,329	-55%	1	1	0%	8,081	5,865	-27%	0	0	—
case-22 We want to automate high-resolution ray-traced product image rendering on our server using Python script automation with Blender in background mode (`blender --background --python render.py`). We are generating static PNG images on the backend, not interactive web experiences. How do we configure Blender Python API (`bpy`) to set render engine to CYCLES and output a PNG?	pass→pass	11,904	15,094	+27%	1	1	0%	2,300	5,365	+133%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +32 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 50%
Pass rate with the skill: 81.8%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/28/2026, 22:52 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Prompt

Some corporate client browsers in our user base have WebGL disabled or unsupported. How should we handle initial WebGL capability verification and display a fallback UI for unsupported devices?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run82

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+62% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 23 days ago

Other measured skills in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

sickn33/3d-web-experience

SkillSafety

Source

3D Web Experience

Expertise

Capabilities

Patterns

3D Stack Selection

3D Stack Selection

Options Comparison

Decision Tree

Spline (Fastest Start)

React Three Fiber

3D Model Pipeline

3D Model Pipeline

Format Selection

Optimization Pipeline

GLTF Compression

Loading in R3F

Scroll-Driven 3D

Scroll-Driven 3D

R3F + Scroll Controls

GSAP + Three.js

Common Scroll Effects

Performance Optimization

3D Performance

Performance Targets

Quick Wins

Mobile Detection

Fallback Strategy

Validation Checks

No 3D Loading Indicator

No WebGL Fallback

Uncompressed 3D Models

OrbitControls Blocking Scroll

High DPR on Mobile

Collaboration

Delegation Triggers

Product Configurator

Immersive Portfolio

Related Skills

When to Use

Limitations

How this skill was measured

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Related skills