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

xb-uiblocks

Add flexbox-based 3D spatial UI components to XR applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @pmndrs/uikit, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the need for rich, 3D spatial UI components for immersive experiences, offering advanced styling and layout options beyond the lightweight core SpatialPanel.

Core Features & Use Cases

  • Spatial UI Components: Offers UICard, UIPanel, UIText, UIImage, UIIcon for creating complex 3D interfaces.
  • Flexible Styling: Incorporates gradients, strokes, rounded corners, shadows, and spatial behaviors.
  • Layout: Includes flexbox-laid-out 3D cards/panels for web-like styling fidelity.
  • Use Case: Use it when creating spatial applications that require web-like styling or flexbox layout in 3D space.

Quick Start

Use the xb-uiblocks skill to add a styled 3D panel with text and image to your XR experience.

Frequently Asked Questions about xb-uiblocks

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

FAQPage Schema
How do I create flexbox layouts for 3D spatial UI in XR applications?▼

3D spatial UI with flexbox layouts is created using components like UICard and UIPanel that support web-like styling fidelity, including gradients, strokes, rounded corners, and shadows. These components enable complex interface layouts in immersive experiences.

What components are available for building immersive 3D interfaces?▼

Components for building immersive 3D interfaces include UICard, UIPanel, UIText, UIImage, and UIIcon. These elements allow developers to construct complex 3D interfaces with advanced visual effects and spatial behaviors for XR applications.

Do I need a specific renderer to use 3D spatial UI components?▼

Yes, using these 3D spatial UI components requires a uikit renderer and appropriate configuration. The @pmndrs/uikit dependency is necessary to enable complex 3D interface layouts and advanced visual effects in XR experiences.

When should I use advanced 3D panels instead of a lightweight SpatialPanel?▼

Use advanced 3D panels when your immersive experience requires rich styling options like gradients, shadows, and flexbox layout beyond the capabilities of a lightweight core SpatialPanel. It is ideal for achieving web-like styling fidelity in 3D space.

Can I apply web-like visual effects to 3D panels in spatial applications?▼

Yes, you can apply web-like visual effects to 3D panels in spatial applications. The styling system incorporates gradients, strokes, rounded corners, and shadows to achieve high visual fidelity for interfaces deployed in immersive XR environments.

Related Skills

Explore More Software Engineering Skills→
googlegoogle
455

uiblocks

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

Official
Advanced
daffy0208daffy0208
34

spatial-developer

Develop AR/VR spatial experiences with WebXR, Vision Pro, and React Three Fiber.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Immersive 3D Web Development

Build interactive 3D web scenes with Three.js, React Three Fiber, and WebXR.

Official
Advanced
tungnguyen10tungnguyen10

tailwindcss-advanced-layouts

Implement complex responsive Tailwind CSS v4 layouts without custom CSS.

Community
Intermediate