What problem does it solve? Pixi'VN ships no built-in UI components, so developers must wire menus, HUDs, dialogue boxes, and settings screens themselves. This Skill provides the patterns for mounting HTML or PixiJS UI layers over the canvas, routing between screens, theming shadcn/ui templates, and keeping UI components in sync with game storage. ## Core Features & Use Cases - HTML UI Layers: Mount a React or Vue root onto the canvas with canvas.htmlLayers.add/get/remove, including pointer-events handling so interactive elements work without blocking canvas input. - PixiJS UI Layers: Build UI screens from plain PixiJS components via canvas.layers.add/get/remove, outside the save-able gameLayer, with support for libraries like PixiUI and PixiLayout. - Routing & Navigation: Navigate between UI screens with TanStack Router, wire navigate into narration steps via StepLabelProps, and block browser back/forward desync. - Storage Synchronization: Connect UI to game data using TanStack Store/Query patterns and storage.setStorageHandler so the UI refreshes when labels, steps, or save loads change storage. - Use Case: Build a settings screen where text speed persists in localStorage, a HUD showing an affection stat read from game storage, and a main menu routed with TanStack Router — all themed via a shadcn/ui theme generator. ## Quick Start Use the pixi-vn-ui skill to add a React main menu screen mounted as an HTML layer over the canvas with a working settings page connected to game storage.
