菜单
Build spatial UI in XR Blocks. Use when adding cards, overlays, panels, text, controls, model-viewer interfaces, layout, styling, themes, or UI placement with the built-in UI system.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/google/xrblocks --skill xb-add-spatial-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Design and implement XR Blocks interactions. Use when adding selection, hover, direct touch, grab, gestures, event ownership, propagation, automatic manipulation, or physics-driven object behavior.
Add AI behavior to an XR Blocks application. Use when implementing Gemini or OpenAI queries, Gemini Live voice or vision, generated images, scene-grounded responses, or model-requested tools with an observable XR outcome.
Connect physical-world sensing to XR Blocks application state. Use when adding planes, scene meshes, depth, occlusion, world collision evidence, object or human recognition, face tracking, segmentation, or agent-facing scene context.
正在显示 SKILL.md
| name | xb-add-spatial-ui |
| description | Build spatial UI in XR Blocks. Use when adding cards, overlays, panels, text, controls, model-viewer interfaces, layout, styling, themes, or UI placement with the built-in UI system. |
Build a usable surface: information and controls that remain legible, targetable, and observable in their intended pose.
Record every displayed value and action, its state owner, spatial anchor, appearance states, update cadence, desktop input, XR input, and observable result.
Complete this step when every value and control has a user purpose, source, anchor, and testable result.
Read ../../docs/docs/manual/UI.mdx before
implementation.
UICard for a world-space surface measured and positioned in meters.UIOverlay for a bounded view-space surface.UIPanel only inside a card or overlay for layout or visual grouping.Import components from xrblocks. Built-in UI starts automatically and joins
the normal XR Blocks interaction pipeline. Application code does not enable a
UI subsystem, register UIKit, or install a second raycaster.
Complete this step when one root owns the intended coordinate space and every nested element has one layout parent.
Build reading order with UIPanel, UIText, UIImage, and UIIcon. Use
UIButton and UISlider for actions instead of raw pointer handlers. Use
ModelViewer for supported interactive model presentation. Use semantic UI for
status, telemetry, instructions, and debug state instead of canvas sprites.
Treat UICard.size and world transforms as meters. Treat descendant numeric
layout values as UIKit layout units. Treat numeric lineHeight as a font-size
multiplier; use px or % strings for explicit units.
Use size: {width, height: 'auto'} for content-driven cards. Keep the width
fixed so text and percentage-width children have a stable wrapping constraint.
Use a numeric height only when the surface must have a fixed physical size.
Complete this step when all content fits at the intended physical size and each state-changing control has hover or active feedback plus an observable result.
Update component properties directly. Keep mounted text and controls stable; change structure only when the application structure changes. Use a theme preset or theme update for shared palette and structural roles, then use local styles for exceptions.
Use pointerEvents, interactionEnabled, visibility, material depth behavior,
and opacity for their separate purposes. Transparency alone does not disable
depth writes or input.
Read ../../docs/docs/manual/Placement.md
when the root follows, faces, or orbits another object. Read
../../docs/docs/manual/Interaction.md
for manipulation and target semantics.
Complete this step when state changes update the intended mounted element, theme changes produce the intended structure and palette, and placement does not compete with user manipulation.
Build or type-check the app. After a completed UI frame, run xb.ui.validate()
for the root or all roots. Check overflow, clipping, disabled behavior, input,
cleanup, and relevant console output. Start from
../../templates/01_spatial_ui/ or the
closest focused sample for executable evidence.
Give the user the exact URL, viewing pose, input route, control instructions, and expected idle, hover, active, disabled, and result states. Name real-device checks for legibility, target size, occlusion, reach, and head motion.
Finish when validation and available smoke checks pass and the user can test every control and state without inferring expected behavior from source.