skills.rest
Vrooli
VrooliOFFICIAL
Explore all skills by this author →
Website𝕏@VrooliOfficialGitHub

Vrooli UI Interop

Enforce @vrooli/api-base and @vrooli/iframe-bridge patterns for deployment-safe Vrooli UIs.

54|7|Updated Sep 19, 2021
Search Tags:#spatial-navigation#vrooli#ui-interop#api-base#iframe-bridge#deployment-context
One-click install
npx skills add https://github.com/Vrooli/Vrooli --skill vrooli-ui-interop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Vrooli UI Interop
Source: https://github.com/Vrooli/Vrooli/tree/main/scenarios/prompt-manager/store/skills/packs/core/vrooli-ui-interop
Command: npx skills add https://github.com/Vrooli/Vrooli --skill vrooli-ui-interop

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about Vrooli UI Interop

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

FAQPage Schema
How do I keep UI behavior consistent across localhost, tunnel, and proxy deployments?▼

To keep UI behavior consistent across localhost, tunnel, and proxy deployments, adopt canonical api-base and iframe-bridge patterns that auto-detect deployment contexts. This prevents asset loading and API routing breakage by centralizing URL resolution and avoiding context-specific assumptions in your code.

What is the best way to handle iframe-safe scrolling and keyboard shortcuts in a React app?▼

Handling iframe-safe scrolling and keyboard shortcuts requires initializing an iframe bridge and emitting shortcut intents before React mounts. You must trap overlays and avoid iframe-unsafe scroll APIs by using container scroll methods and h-full layouts to maintain usability inside proxy iframes.

How do I resolve API base URLs dynamically when running an app inside an iframe proxy?▼

Resolving API base URLs dynamically inside an iframe proxy involves using a centralized resolveApiBase function to auto-detect the deployment context. This approach ensures your API client routes requests correctly without hardcoding localhost or tunnel-specific paths.

Does this UI interop approach support gamepad navigation and spatial navigation hooks?▼

Yes, this UI interop approach supports gamepad and spatial navigation by initializing spatial hooks alongside the iframe bridge before React mounts. This ensures keyboard shortcut relay and gamepad inputs are fully functional while maintaining deployment-safe focus management across contexts.

Why do my Vite assets and API routes break when loading the app through a tunnel or proxy?▼

Vite assets and API routes break through tunnels or proxies when context-specific assumptions leak into relative asset bases and router configurations. Enforcing a canonical file layout with proxy-aware routers and centralized API clients prevents these deployment-context mismatches.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

vite-agents-project-scaffolder

Generate Vite project scaffolds with configuration and starter files.

Official
Advanced
abereghiciabereghici

router-core/path-params

Define and consume dynamic URL parameters in TanStack Router routes.

Community
Advanced
VrooliVrooli
54

Documentation Search Skill

Search Vrooli documentation with globbing, grep, and relevance ranking.

Official
Intermediate
CommonCapitalCommonCapital
2

static-website-asset-paths

Convert absolute asset paths to relative in HTML for proxy compatibility.

Community
Intermediate