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

uiblocks

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

455|91|Updated Sep 25, 2025
Search Tags:#ui design#webxr#3d ui#xr blocks#immersive computing
One-click install
npx skills add https://github.com/google/xrblocks --skill uiblocks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiblocks
Source: https://github.com/google/xrblocks/tree/main/src/addons/uiblocks
Command: npx skills add https://github.com/google/xrblocks --skill uiblocks

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation of interactive 3D user interfaces in XR Blocks apps, enabling developers to design spatial UI components that integrate seamlessly with immersive XR experiences.

Core Features & Use Cases

  • Spatial UI Creation: Develop UI components that can be placed anywhere in 3D space, supporting object anchoring, head-leashing, and manipulation.
  • Styling Options: Utilize flexbox layouts, gradients, shadows, and rounded corners to style your UI components.
  • Interactivity: Implement interactive behaviors like hover, click, and head-leashing for a responsive user experience.
  • Use Case: Imagine creating a spatial menu for an AR app that responds to user interactions and follows the user's movements.

Quick Start

Use the uiblocks skill to create a simple 3D UI card with text and a button.

Frequently Asked Questions about uiblocks

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

FAQPage Schema
How do I build interactive 3D user interfaces for WebXR applications?▼

You can build interactive 3D user interfaces by using spatial UI components that support object anchoring and head-leashing. This approach allows you to place UI elements directly in 3D space for seamless AR and VR integration.

What is the best way to create spatial menus in XR that follow user movements?▼

Creating spatial menus that follow user movements is achieved through head-leashing interactivity. This allows your 3D UI components to dynamically track user positions and respond to interactions within immersive XR experiences.

Does the uiblocks skill support flexbox layouts and styling for 3D UI components?▼

Yes, the uiblocks skill supports flexbox layouts for 3D UI components. You can apply advanced styling options like gradients, shadows, and rounded corners to design your spatial interfaces.

Can I use Three.js and uikit for rendering and layout management in XR Blocks?▼

Yes, you can use Three.js and uikit for rendering and layout management in XR Blocks. These dependencies are required to properly render your 3D user interfaces and manage their spatial layout.

How do I add hover and click interactivity to spatial UI components in VR?▼

You can add hover and click interactivity to spatial UI components by implementing the built-in interactive behaviors provided. This ensures a responsive user experience for your VR and AR applications.

Are there limitations when anchoring 3D UI objects in augmented reality environments?▼

While the skill supports object anchoring for 3D UI in AR, complex spatial manipulations require careful management of Three.js and uikit dependencies. Proper rendering setup is essential to avoid layout issues in immersive environments.

Related Skills

Explore More Software Engineering Skills→
tadams95tadams95
1

threejs-materials

Apply and configure Three.js materials to 3D meshes for realistic rendering.

Community
Intermediate
daffy0208daffy0208
34

spatial-developer

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

Community
Intermediate
imagepitimagepit

quiz-writer

Generate structured comprehension tests from technical training chapters using quiz syntax.

Community
Intermediate
hkcm91hkcm91

bridging-2d-3d-rendering

Manage parallel 2D DOM canvas and 3D WebGL rendering with coordinate conversion.

Community
Advanced