Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
drawcall-ai avatar

Uikitml

  • 117 installs
  • 11 repo stars
  • Updated July 29, 2026
  • drawcall-ai/uikitml

Write HTML-like markup to build spatial 3D user interfaces for VR/AR, compiling to pmndrs/uikit components with Shadcn-style or Meta Horizon kits.

About

UIKitML is a strict, HTML-like markup language for authoring spatial 3D user interfaces for VR/AR devices, compiling PascalCase component tags down to pmndrs/uikit. It ships a default Shadcn-style kit plus a Horizon kit tuned for Meta's iOS-style 3D interfaces, and supports Lucide icons and standard HTML elements. A solo builder reaches for it to lay out XR interfaces declaratively instead of hand-wiring 3D UI components.

  • HTML-like markup for pmndrs/uikit
  • Spatial 3D UI for VR/AR
  • Shadcn-style and Meta Horizon kits
  • Supports Lucide icons and HTML elements

Uikitml by the numbers

  • 117 all-time installs (skills.sh)
  • Ranked #1,016 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/drawcall-ai/uikitml --skill uikitml

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs117
repo stars11
Last updatedJuly 29, 2026
Repositorydrawcall-ai/uikitml

What it does

Write HTML-like markup to build spatial 3D user interfaces for VR/AR, compiling to pmndrs/uikit components with Shadcn-style or Meta Horizon kits.

Who is it for?

Declaratively building VR/AR interfaces

Skip if: Standard 2D web pages

When should I use this skill?

You are building a spatial 3D interface for VR/AR

What you get

  • 3D UI markup

Files

SKILL.mdMarkdownGitHub ↗

UIKitML

When to Use

Use UIKitML for spatial 3D UI or UI targeting VR/AR devices. For HUD UI in projects that do not target VR/AR devices, use HTML directly instead.

UIKitML is strict HTML-like markup for pmndrs/uikit. Use one root component. Top-level <style> blocks and <meta preferred-color-scheme="dark|light|system" /> may sit beside the root.

Kits provide PascalCase component tags. The default kit is Shadcn-style; the Horizon kit is for Meta Horizon iOS-style 3D/XR interfaces. Lucide icons and HTML tags are available with either kit. For exact component names and props, read the matching reference.

<meta preferred-color-scheme="dark" />
<style>
  .card { width: 360; flex-direction: column; gap: 12; padding: 16; border-radius: 12; }
  .row { flex-direction: row; align-items: center; gap: 8; }
</style>

<Card class="card">
  <CardHeader class="row"><Activity width="18" height="18" /><CardTitle>Status</CardTitle></CardHeader>
  <CardContent><Badge>Live</Badge></CardContent>
</Card>

Language

  • Tags are exact and case-sensitive.
  • Use kebab-case prop names in UIKitML; they become camelCase UIKit props.
  • Use explicit closing or self-closing tags.
  • Bare attributes become true: <Button disabled />.
  • class becomes classList; id is passed through and can be styled.
  • Inline styles use the same declaration syntax as <style>: <Card style="padding: 16; gap: 8" />.
  • font-family accepts bundled MSDF font names: crimson-text, fira-code, inconsolata, inter, lato, libre-baskerville, merriweather, montserrat, nunito, open-sans, playfair-display, poppins, raleway, roboto, source-code-pro, space-mono, and work-sans.
  • Layout is UIKit flex layout: display supports flex (the default), none, and contents; positioning supports static/default flow and position-type="absolute".
  • Text is trimmed and HTML entities are decoded.
  • Plain .uikitml cannot express function props such as callbacks or icon constructors.

Supported stylesheet selectors: .class, #id, :hover, :active, :focus, :sm, :md, :lg, :xl, :2xl, and > *.

HTML tags are always available: div, p, span, li, h1-h6, ol, ul, a, button, img, svg, video, input, textarea. They map to base UIKit Container/Image/Svg/Video/Input/Textarea behavior.

Lucide icons are always available as PascalCase self-closing tags, for example <Search /> or <Activity />.

CLI

The CLI belongs to the @drawcall/uikitml package. Invoke the package by name:

npx @drawcall/uikitml validate '<Card><Badge>Live</Badge></Card>'
npx @drawcall/uikitml render card.uikitml --width 800 --height 600 --color-scheme dark --out card.png
npx @drawcall/uikitml convert card.uikitml --name Card --color-scheme dark --out Card.tsx
npx @drawcall/uikitml convert card.uikitml --to three --name createCard --out card.ts
npx @drawcall/uikitml feedback 'unexpected render output for valid Horizon markup'

Inputs resolve as stdin with -, then file path, then inline source. The default kit is selected by omitting --kit; use --kit horizon for the Meta Horizon iOS-style 3D/XR kit. Lucide icons and HTML tags are available either way.

validate prints diagnostics and exits 0 for valid or invalid UIKitML. CLI/runtime failures print error ... and exit nonzero.

Conversion targets: default convert emits @react-three/fiber code; convert --to three emits raw Three.js code. IWSDK consumes .uikitml files directly, so no conversion is needed there.

Use feedback to report non-user problems: suspected UIKitML bugs, unexpected parser/render/convert behavior, misleading diagnostics, or other tool failures. Keep reports concise and include the command, expected behavior, and actual behavior when known.

References

  • references/default-kit.md: Shadcn-style default kit component catalog.
  • references/horizon-kit.md: Meta Horizon OS 3D/XR kit component catalog.
  • references/lucide-kit.md: Lucide icon name inventory.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.