debug

Diagnose WebGL and Webflow integration issues using browser console debugging.

Updated Feb 13, 2026

Search Tags:#performance #troubleshooting #debug #animations #shaders #webgl #webflow

Ready to run

npx skills add https://github.com/BamoJ/playfight-2k26 --skill debug-bamoj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: debug
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/debug
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill debug-bamoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and troubleshoot common issues within the WebGL + Webflow system, ensuring your canvas experiences function correctly.

Core Features & Use Cases

Shader Compilation Errors: Guides you through fixing GLSL syntax, uniform mismatches, and WebGL1/2 compatibility.
Page Detection Issues: Helps resolve problems where pages aren't recognized or the wrong page loads.
DOMPlane Misalignment: Provides steps to fix incorrect positioning of WebGL planes relative to DOM elements.
Transition Failures: Assists in debugging broken WebGL page transitions.
Texture Loading Problems: Offers solutions for black or missing images due to CORS, incorrect paths, or unsupported formats.
Scroll Animation Malfunctions: Helps identify why scroll-driven animations aren't firing.
Event System Errors: Troubleshoots issues with the Emitter not receiving or sending events.
Memory Leaks: Guides you in identifying and fixing performance degradation over time.

Quick Start

Use the debug skill to find out why my shaders are not compiling.

Frequently Asked Questions about debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix WebGL shader compilation errors in a Webflow integration?▼

WebGL shader compilation errors are diagnosed by checking GLSL syntax, resolving uniform mismatches, and ensuring WebGL1/2 compatibility within your Webflow integration.

Why are my WebGL planes misaligned with DOM elements in Webflow?▼

WebGL DOMPlane misalignment occurs when planes have incorrect positioning relative to DOM elements, which can be resolved through specific file checks and browser console debugging.

How do I troubleshoot black or missing textures in a WebGL canvas?▼

Texture loading problems causing black or missing images are fixed by resolving CORS issues, correcting image paths, and ensuring supported formats are used in your WebGL canvas.

What causes scroll-driven animations to stop firing in WebGL pages?▼

Scroll-driven animation malfunctions happen when scroll events fail to trigger updates, identifiable through browser console debugging and root cause analysis of the event system.

How do I identify and fix memory leaks causing performance degradation in WebGL?▼

Memory leaks causing WebGL performance degradation over time are identified and fixed by analyzing browser console outputs and checking specific files for unreleased resources.

Can I debug broken WebGL page transitions using browser console tools?▼

Broken WebGL page transitions can be debugged using browser console tools to inspect the event system, verify page detection, and perform root cause analysis on transition failures.