skills.rest
google
googleOFFICIAL
Explore all skills by this author →
Website𝕏@GoogleOSSGitHub

xb-ui

Construct grid-based spatial UI panels in XR Blocks applications.

455|91|Updated Sep 25, 2025
Search Tags:#UI development#spatial UI#XR Blocks#immersive application#XR application
One-click install
npx skills add https://github.com/google/xrblocks --skill xb-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xb-ui
Source: https://github.com/google/xrblocks/tree/main/skills/xb-ui
Command: npx skills add https://github.com/google/xrblocks --skill xb-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the creation of spatial user interfaces within XR Blocks applications, offering a lightweight, dependency-free approach to UI development.

Core Features & Use Cases

  • Spatial UI Construction: Offers a SpatialPanel system for creating grid-based UI elements such as text, buttons, and images.
  • User Interface Customization: Provides flexibility in panel positioning and the ability to add various UI components.
  • Use Case: Use xb-ui to design interactive HUDs, menus, dialogs, and control panels for XR applications, reducing the complexity of UI development.

Quick Start

Use the xb-ui skill to add a text panel to your XR Blocks app with the command: 'xb-ui addPanel'.

Frequently Asked Questions about xb-ui

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

FAQPage Schema
How do I build spatial UI for immersive applications?▼

To build spatial UI for immersive applications, you can use a grid-based layout system to construct panels containing text, buttons, and images for XR environments.

Can I create custom HUDs and menus for XR applications without adding dependencies?▼

Yes, you can create custom HUDs, menus, and dialogs for XR applications using a lightweight, dependency-free approach to UI development.

How do I add a text panel to an XR Blocks app?▼

You add a text panel to an XR Blocks app by executing the 'addPanel' command, which initializes a spatial panel for your user interface.

Does spatial UI construction support flexible panel positioning for immersive interfaces?▼

Spatial UI construction supports flexible panel positioning, allowing you to customize the exact placement of interactive components within your XR application interface.

What is the best way to design interactive control panels in XR Blocks?▼

The best way to design interactive control panels in XR Blocks is utilizing a SpatialPanel system that simplifies grid-based UI element creation and lightweight interaction design.

Related Skills

Explore More Software Engineering Skills→
googlegoogle
455

xb-sound

Integrates spatial audio and speech processing into XR Blocks applications.

Official
Intermediate
farsinkfarsink

micro-interactions

Design UI micro-interaction animations using CSS transitions and easing functions.

Community
Intermediate
googlegoogle
455

uiblocks

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

Official
Advanced
jinlulijinluli

unity-xr

Configure XR rigs, interactions, and UI using the XR Interaction Toolkit.

Community
Advanced