Vrooli UI Interop

What problem does it solve?

Maintaining Vrooli scenario UIs across localhost, tunnel, and proxy/iframe deployments is prone to breakage around asset loading, API routing, keyboard shortcuts, and gamepad navigation whenever context-specific assumptions leak into the code. This skill enforces the canonical adoption of @vrooli/api-base and @vrooli/iframe-bridge along with deployment-aware file slots so the UI auto-detects its surroundings and degrades gracefully to a no-op when host-only behaviors are absent.

Core Features & Use Cases

• Canonical layout enforcement: ui/package.json, vite.config.ts, server.js, App.tsx, and lib hooks follow the named slots so CLI tooling can audit dependency declarations, relative asset bases, proxy-aware routers, and centralized API clients without searching arbitrary paths.
• Iframe bridge, shortcuts, and spatial nav: main.tsx, useKeyboardShortcuts, and spatial hooks initialize the iframe bridge, emitShortcutIntent, and gamepad support before React mounts while trapping overlays and avoiding iframe-unsafe scroll APIs.
• Deployment-safe patterns: Shared guidance on resolveApiBase, buildApiUrl, container scroll methods, h-full layouts, and focus management keeps the UI usable on app-monitor iframe proxies, making it safe to release scenarios that must run on every supported platform.

Quick Start

Tell the skill to audit the scenario's UI package, router, API client, and bridge files for deployment-context compliance.