user-interface
Installation
SKILL.md
User Interface
Building good UI for a 3D app is two decisions: where the UI lives (spatial vs. screen) and how it looks (design quality). This skill routes the first and sets the bar for the second.
Choosing the technology
Decide per surface — a single app often uses both:
| Surface | Use |
|---|---|
| A panel or control living in the 3D world | drawcall-ai/uikitml |
| Any UI in an app that targets AR/VR (even a flat panel — it renders as 3D geometry) | drawcall-ai/uikitml |
| A 2D HUD, menu, or overlay in a non-AR/VR app | HTML/CSS |
Spatial and XR UI go through the drawcall-ai/uikitml skill (npx skills add drawcall-ai/uikitml): pmndrs/uikit interfaces written as strict HTML-like markup you can validate, preview, and convert to Three.js / R3F / IWSDK. Flat HUD/menu chrome in a non-XR app is plain HTML/CSS over the canvas — faster, fully featured, crisp at any resolution; uikit is unnecessary there.
To make 3D objects (including spatial UI) respond to clicks and hovers, use the @pmndrs/pointer-events package.