canvas-nav

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.