iwsdk-ui-panel

Render IWSDK PanelUI components in ScreenSpace for rapid UI iteration.

364|73|Updated Aug 25, 2025
One-click install
npx skills add https://github.com/facebook/immersive-web-sdk --skill iwsdk-ui-panel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: iwsdk-ui-panel
Source: https://github.com/facebook/immersive-web-sdk/tree/main/packages/starter-assets/claude-injections/skills/iwsdk-ui-panel
Command: npx skills add https://github.com/facebook/immersive-web-sdk --skill iwsdk-ui-panel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers building IWSDK UI panels often face slow iteration cycles and lack of a repeatable, dev-friendly workflow. This skill provides a structured approach to rapidly prototype and test PanelUI layouts using temporary ScreenSpace overlays, backdrops, and camera adjustments to keep the focus on UI changes.

Core Features & Use Cases

  • ScreenSpace component to temporarily render panels in screen space for rapid visual checks.
  • Backdrop and camera techniques to isolate UI during development and minimize distractions from the 3D scene.
  • VR/desktop readiness: automatic detachment in VR and stable world-space positioning for gameplay, ensuring a seamless workflow across modes.
  • Use cases include iterating on PanelUI configurations, testing layout responsiveness, and validating alignment and contrast in IWSDK applications.

Quick Start

Start a development session by enabling ScreenSpace UI panels and iterating with live backdrops and screenshots.

Frequently Asked Questions about iwsdk-ui-panel

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

FAQPage Schema
How do I iterate IWSDK UI panels faster during development?

To iterate IWSDK UI panels faster, use a structured workflow that renders PanelUI components in ScreenSpace overlays. This isolates UI layout changes from the 3D scene, enabling rapid visual checks and refinement without rebuilding the full application.

What is ScreenSpace used for in WebXR UI development?

ScreenSpace in WebXR UI development is used to temporarily render panels in screen space for rapid visual checks. It allows developers to isolate PanelUI components using backdrops and camera adjustments, minimizing distractions from the 3D scene during layout debugging.

Does the IWSDK ScreenSpace workflow support both VR and desktop modes?

Yes, the IWSDK ScreenSpace workflow supports both VR and desktop modes. It ensures automatic detachment in VR while maintaining stable world-space positioning for gameplay, providing a seamless UI iteration experience across different rendering environments.

How do I debug ThreeJS UI layout alignment and contrast?

Debug ThreeJS UI layout alignment and contrast by applying backdrops and camera techniques to isolate the UI. Using ScreenSpace overlays allows you to validate visual properties and test layout responsiveness quickly without interference from the underlying 3D scene.

What's the best way to isolate PanelUI components from a 3D scene?

The best way to isolate PanelUI components is by using temporary ScreenSpace overlays combined with backdrops and camera adjustments. This minimizes visual distractions from the 3D scene, keeping the focus entirely on UI alignment and configuration changes.

Why use a dedicated workflow for IWSDK PanelUI development?

Use a dedicated workflow for IWSDK PanelUI development to overcome slow iteration cycles. It provides a repeatable, dev-friendly process for prototyping layouts, refining frontmatter-driven metadata, and validating UI design across VR and desktop environments.