Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsWebGL Mobile Crash Fix
Fix three.js and WebGL apps that crash or reload on phones, with tested drop-in TypeScript modules.
$12
WebGL Mobile Crash Fix
Example session with this skill installed
Our three.js globe works on desktop, but on Android it reloads twice right after opening, and on an older iPhone the tab dies after a minute. What is going on?
- Read your context and instructions
- Compiled the webgl mobile crash
Diagnosis — two different causes
| Symptom | Cause | Fix |
|---|---|---|
| Reloads twice on open | vite-plugin-pwa autoUpdate: the new service worker activates and the plugin calls location.reload() mid-session. registerSW({ immediate: false }) does not help — it only delays registration. | registerType: 'prompt' + assets/swUpdate.ts — the new version takes over on the next visit |
| iPhone tab dies after ~1 min | GPU memory: 8K textures (~256 MB each) and DPR 3 | assets/deviceTier.ts: iOS capped at mid tier → 4K textures, DPR ≤ 1.5 |
Wiring (app entry)
const lite = shouldDemote() // crashGuard: 2 unclean boots → lite mode
const tier = lite ? deviceTier({}) : deviceTier()
renderer.setPixelRatio(tier.maxDpr)
watchContextLoss(renderer.domElement, { onLost: pause, onRestored: rebuild })
Verified
- 18 bundled vitest tests pass (tiering, crash guard, reload guard, context loss).
- Live deploy check (real run on a production three.js site — the symbol lives in a lazy chunk):
$ scripts/verify-live-bundle.sh https://earth-pulse-rosy.vercel.app "facingMode"
FOUND "facingMode" in https://earth-pulse-rosy.vercel.app/assets/ArSky-DaB6Lbu0.js
Next: test on a real low-end phone — desktop emulation does not emulate memory limits.
Connects securely to your tools. The creator never sees your data.
About this skill
A web app running perfectly on a workstation but crashing on an iPad or Android phone is a classic memory and resource management failure. This skill provides the diagnostic logic and drop-in TypeScript modules to stop WebGL, Three.js, and heavy PWA graphics from triggering browser reloads or "Aw, Snap" errors on mobile devices. It replaces generic rendering with a tiered resource strategy that respects hardware limits before the crash happens.
What it does
- Device tiering Categorizes hardware based on memory and cores to cap texture sizes, DPR, and object counts.
- Crash guarding Detects repeated unclean boots via
localStorageand automatically demotes to a "lite" mode. - Reload protection Limits automated recovery reloads to one per minute to prevent Android process loops.
- PWA stability Reconfigures service worker updates to prevent disruptive mid-session page reloads.
- Context management Implements required handlers for WebGL context loss and restoration to prevent black screens.
How it works
- Analyze crash context Identify if the failure occurs at initial boot, during heavy mode transitions, or due to PWA service worker conflicts.
- Implement tiering Integrate
deviceTier.tsto scale graphics quality based onnavigator.deviceMemoryandhardwareConcurrency. - Deploy guards Add
crashGuard.tsandreloadGuard.tsto the app entry point to handle silent OS-level renderer kills. - Verify bundle Use the provided shell script to confirm the fix is actually present in the live CDN bundle and lazy-loaded chunks.
Frameworks & tools
TypeScript, Three.js, React-Three-Fiber, Babylon.js, Globe.gl, Vite-plugin-PWA, Vitest, and WebGL.
Why this beats prompting it yourself
Generic AI prompts often suggest generic optimizations that don't account for how Safari handles GPU memory or how PWAs trigger reloads. This skill provides tested, zero-dependency logic specifically designed for the edge cases of mobile browser resource limits and service worker lifecycles.
Use cases
- Fixing mobile crashes Stop 3D maps or product configurators from crashing on iPhones.
- PWA deployment Prevent the "double-reload" bug when a new service worker version is detected.
- Low-end support Automatically scale down assets for budget Android devices without affecting desktop users.
Known limitations
navigator.deviceMemory is Chromium-only, so Safari and Firefox fall to the cautious low tier, and the tiering never puts iOS above mid tier. A single view transition that builds too much in one frame still needs staging — the skill explains how, but it is app-specific code.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 3 days ago
- Passed all security checks, Safe to install
Requires
Node.js