skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

canvas-nav

Debug WebGL page loading and lifecycle issues during Taxi navigation.

Updated Feb 13, 2026
Search Tags:#debugging#frontend#javascript#canvas#webgl#page transitions
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill canvas-nav
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-nav
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/canvas-nav
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill canvas-nav

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common issues with WebGL page loading, detection, and state management during website navigation, ensuring smooth and correct transitions between pages.

Core Features & Use Cases

  • Page Detection Logic: Understands how the system identifies the current page based on DOM attributes and URL matching.
  • Navigation Flow: Details the sequence of events during page transitions, including onLeave, load, create, and onEnter.
  • Instance Reusability: Explains how page instances are cached and reused, and how to handle re-initialization.
  • DOM Query Safety: Provides guidelines for querying DOM elements safely during transitions to avoid stale data.
  • Use Case: When navigating between pages, the WebGL content fails to update, showing the previous page's visuals, or transitions leave the canvas in an inconsistent state.

Quick Start

Use the canvas-nav skill to debug why a WebGL page isn't loading correctly after a navigation event.

Frequently Asked Questions about canvas-nav

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

FAQPage Schema
How do I fix WebGL page transitions showing stale visuals after Taxi routing?▼

WebGL page transitions show stale visuals when DOM element queries resolve to outdated nodes. Safe DOM querying during the transition lifecycle ensures the canvas updates with the correct page instance after navigation.

How does page detection work in a JavaScript WebGL application using Taxi routing?▼

Page detection identifies the current view by matching DOM attributes and URL patterns. This logic ensures the custom Canvas system loads and initializes the correct WebGL content during routing events.

What is the correct navigation flow sequence for WebGL page lifecycle management?▼

The navigation flow sequence follows onLeave, load, create, and onEnter events. Properly handling this lifecycle ensures WebGL instances transition correctly without leaving the canvas in a broken state.

How do I reuse WebGL page instances across multiple navigations without re-initialization issues?▼

Reuse WebGL page instances by caching them and managing re-initialization logic. This prevents broken canvas states and avoids redundant setup when navigating back to a previously visited page.

Can I use this approach to debug WebGL loading issues in custom Canvas systems?▼

Yes, this approach debugs WebGL loading failures in custom Canvas systems by validating DOM queries and instance reuse. It ensures pages load correctly and transitions maintain consistent application state.

Related Skills

Explore More Software Engineering Skills→
BamoJBamoJ

transition

Orchestrate SPA page transitions with Taxi.js, Lenis, and WebGL.

Community
Advanced
atro2829-hubatro2829-hub

web-shader-extractor

Extract WebGL, shader, and Canvas effects into standalone JavaScript implementations.

Community
Advanced
winsorllcwinsorllc

browser-tools

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Intermediate
mgd34msumgd34msu
4

auto-animate

Add zero-configuration animations to DOM element changes across JavaScript frameworks.

Community
Intermediate