Three JS AI Skill: R3F, GLTF and WebGL Speed

Name: Ulrike - Three.js 3D Web Developer AI Skill
Brand: KissMySkills
Price: 7.0 USD
Availability: InStock

Ulrike - Three.js 3D Web Developer AI Skill

A fast, leak-free three.js or R3F scene with a mobile budget, compressed assets and accessible fallbacks.

$7.00 deze skill eenmalig betalen voor altijd van jou

Compleet skill-pakket directe downloadulrike-threejs-3d-web-developer.md

Unlimited

Get this and 2,500+ more with Unlimited $9/mnd

Deze plus 2,500+ andere, in jouw AI

AI CRM included

Deze skill$7

Unlimited$9/mnd

See Unlimited · $9/mnd → or try every skill free for 7 days, no card

Eén keer betalen, voor altijd van jouDirecte download30 dagen geld-terug-garantie

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Shopify

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

Ask Ulrike something hard.

📎 ulrike-threejs-3d-web-developer.md LOADED ✓

R3F product viewer for a chair. The GLB is 31 MB with 212 meshes and 4096 px PNG textures. Phones stutter and memory climbs after a few products. Here is my component. Fix it.

CLAUDE · AS ULRIKE, THREE.JS 3D WEB DEVELOPER You get: a summary of the main bottleneck -> assumptions with placeholders for missing numbers -> a mobile budget table with how to check each line in renderer.info -> ranked findings (texture memory, draw calls, missing disposal, shadows, dpr) -> glTF-Transform commands to try -> the rewritten R3F component with KTX2 textures and cleanup -> reduced-motion, keyboard and no-WebGL fallbacks -> a measure checklist for your phone.

Of elke skill, direct in jouw AI.

0:33 · zonder geluid

Alle 2,500+ met Unlimited · $9/mnd bij jaarlijkse betaling →

Vragen voor je koopt? Een mens antwoordt, meestal dezelfde dag: hello@kissmyskills.com

// the file itself

Read it before you buy it.

The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.

// de skill waar jouw AI op draait

You are Ulrike, a senior creative developer who builds interactive 3D for the web with three.js and React Three Fiber. You have been activated to build or fix this scene with a mobile budget, compressed assets, proper disposal and accessible fallbacks, without inventing any measurements.

Your job: a scene that looks right (correct color management and lighting), loads fast, holds its frame budget on a mid-range phone, frees its GPU memory, and still works for people who turn motion off, use a keyboard or have no WebGL. You write the code and explain each decision in one line. · Anselmo - Technical Artist works on the asset and engine side of real-time 3D: DCC-to-engine pipelines, shaders and LODs for games, art budgets for Unity or Unreal. Ulrike works in the browser: three.js and R3F code, GLTF delivery over the network, WebGL limits on phones, cleanup in React and web accessibility. If the problem is how the model was authored, she hands a clear asset brief to the artist. · Yuna - Frontend Engineer builds whole frontends: components, state, data fetching, TypeScript, tests. 3D is one rare topic for her. Ulrike goes deep on one layer: the canvas, its assets, its GPU cost and its fallbacks, and fits the scene into the existing app. · New three.js or R3F scene: product viewer, configurator, hero, portfolio, scroll-driven 3D, simple data scene. · A GLB that is too heavy or loads slowly; choosing Draco vs Meshopt and KTX2 settings. · Low frame rate, stutter or heat on mobile; too many draw calls; shadows or post-processing too costly. · Memory that grows on every route change; "Too many active WebGL contexts" warnings; context loss. · Colors that look washed out or too dark; lighting that does not match the reference. · Making a 3D section accessible: reduced motion, keyboard controls, text alternative, no-WebGL fallback. · Modelling, UV unwrapping, retopology or baking in Blender - Ulrike writes an asset brief instead. · Full game engines and console or desktop games (Unity, Unreal, Godot). · Raw WebGL or WebGPU engine work with no three.js - she can advise but it is outside her lane. · 2D DOM animation (CSS, GSAP on HTML elements) with no 3D - a web animation specialist fits better. Ask once, grouped. Skip anything already given. If the user wants speed, proceed with stated assumptions and mark them [ASSUMED].

198 regels · .md · directe download

// what's inside

Wat zit er in deze vaardigheid?

Mobile budget table: draw calls, triangles, texture memory, DPR cap
GLTF delivery with Draco or Meshopt, KTX2 textures and correct color spaces
8-step disposal checklist for geometries, materials, textures and targets
Reduced motion, keyboard controls and a no-WebGL poster fallback

Front-end and creative developers, Next.js and Shopify builders who want 3D that loads fast, runs on phones and cleans up after itself.

// two ways to get it

Buy this file, or open the whole library.

Buy once

This skill as a file

$7 one payment, yours forever

Download right after checkout, keep it for good
Paste it into ChatGPT, Claude, Gemini or any AI chat, free plans included
30-day money-back guarantee

Unlimited Access

Every skill, prompt and agent, inside your chat

$9/mo cancel anytime, or $59 a year

All 2,500+ files in the library, loaded the moment you ask
Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
Works on every Claude plan, free included · 30-day money-back guarantee on the first charge

See Unlimited Access →

Subscribers can still buy single files and keep them after they cancel.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/for-ai-agents and set up the "Ulrike - Three.js 3D Web Developer AI Skill" skill (handle: ulrike-threejs-3d-web-developer) for me

Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →

What you're actually buying

Ulrike is a three js and React Three Fiber developer who writes the scene, not just the idea. Describe a product viewer, configurator or hero scene and she returns a performance budget, a GLTF asset plan with Draco or Meshopt and KTX2 textures, renderer and color settings, instancing to cut draw calls, a capped devicePixelRatio, an 8-step disposal checklist, reduced-motion and no-WebGL fallbacks, and runnable code with cleanup.

For front-end developers, creative developers and Shopify or Next.js builders adding 3D to a site. Ulrike never invents frame rates or file sizes; she tells you what to record and where, and marks gaps as placeholders. Unlike Anselmo, our technical artist, who works on game pipelines and engine assets, she ships browser code. Unlike Yuna, our frontend engineer, who builds whole apps, she goes deep on one layer: the canvas, its GPU cost and its fallbacks.

A fast, leak-free three.js or R3F scene with a mobile budget, compressed assets and accessible fallbacks.

Compatible with: Claude, Claude Code, ChatGPT, Gemini and Copilot. Install once as a Skill in Claude or paste it as instructions in any other AI chat.

Does it work with React Three Fiber? Yes - it writes R3F code with useGLTF, frameloop on demand, dpr caps and drei helpers, or plain three.js if you prefer.
Can it shrink a heavy GLB? Yes - it plans Draco or Meshopt compression, KTX2 textures and resizing, and gives glTF-Transform commands to try and compare.
Does it fix memory leaks? Yes - it walks an 8-step disposal checklist for geometries, materials, textures, render targets and listeners, with a verification step.
Is the 3D accessible? It adds a reduced-motion mode, a pause control, keyboard controls outside the canvas and a poster image when WebGL is missing.

// zo installeer je In minder dan 2 minuten

Vier stappen. Elke AI-chat.

01
Download het bestand
Na het afrekenen komt de downloadlink in je inbox terecht. Sla het bestand ergens op je apparaat op.
02
Open je AI-chat
Claude, ChatGPT, Gemini, Grok of Copilot – welke je ook al gebruikt.
03
Plak de inhoud van het bestand
Plaats het in het systeem-prompt-, Projectinstructies- of veld voor aangepaste instructies.
04
Ga aan de slag
Je AI is nu geconfigureerd als specialist. Vraag hem alles binnen zijn vakgebied.

Geen technische kennis vereist.

Met Unlimited hoef je niets te downloaden. Koppel je AI één keer en vraag dan: "Laad Ulrike van KissMySkills."

Installatiegids → Unlimited · $4.92/mnd bij jaarlijkse betaling →

// faq

Vragen over dit product

What does Ulrike - Three.js 3D Web Developer do?+

Ulrike turns Claude or ChatGPT into a three.js and React Three Fiber developer. She builds and fixes product viewers, configurators and hero scenes. Each answer gives a performance budget, an asset plan for GLTF, Draco or Meshopt and KTX2, renderer and color settings, ranked fixes, runnable code with disposal, accessible fallbacks and a checklist of what to measure on your own device.

How is Ulrike different from Anselmo and Yuna?+

Anselmo, our technical artist, works on the asset and engine side of real-time 3D: game pipelines, shaders and art budgets for Unity or Unreal. Yuna, our frontend engineer, builds whole frontends with state, data and tests. Ulrike focuses on 3D in the browser: three.js and R3F code, GLTF delivery, draw calls, GPU memory on phones, cleanup in React and web accessibility.

Does it cover the latest three.js version?+

three.js ships frequent releases and renames or changes APIs between them, so Ulrike states which version her code targets and tells you to read the GitHub release notes and migration guide for your range before upgrading. She flags lines that are likely to need changes, such as light units and color management settings in older code.

Will my scene run at 60fps on mobile?+

She does not promise a number she has not measured. She removes common causes of slow 3D, such as oversized textures, too many draw calls, uncapped pixel ratio and real-time shadows, then tells you exactly what to record with renderer.info and the DevTools Performance panel on your lowest real device.