mcpField
U
uikitml

uikitml

github.com/drawcall-ai開発13117 回インストール13 週間前に更新
リポジトリ

uikitml について

UIKitMLはpmndrs/uikit向けのHTML風マークアップで、空間3D、VR、ARのインターフェースを開発する人を対象としています。Shadcn風とMeta Horizon風のコンポーネントキットを備え、CLIで検証、レンダリング、変換ができます。

主な機能

  1. 01空間3D・XRインターフェースの記述
  2. 02標準またはHorizonコンポーネントキット
  3. 03HTMLタグとLucideアイコンの利用
  4. 04マークアップの検証・描画・変換
  5. 05React Three FiberまたはThree.jsコードの生成

活用シーン

  1. 01VR/ARプロジェクトのUI構築
  2. 02UIKitMLの記述と診断結果の確認
  3. 03UIプレビューのPNG出力
  4. 04React Three FiberまたはThree.js向けの変換

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/drawcall-ai/uikitml --skill uikitml

インストール後、Claude Code で/uikitmlを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
default-kit.md
horizon-kit.md
lucide-kit.md

詳細

UIKitML

使用場面

空間 3D UI や、VR/AR デバイスを対象とする UI には UIKitML を使用してください。VR/AR デバイスを対象としないプロジェクトの HUD UI には、代わりに HTML を直接使用してください。

UIKitML は、pmndrs/uikit 用の厳密な HTML 風マークアップです。ルートコンポーネントは 1 つ使用してください。トップレベルの <style> ブロックと <meta preferred-color-scheme="dark|light|system" /> は、ルートの隣に配置できます。

キットでは PascalCase のコンポーネントタグを使用します。デフォルトのキットは Shadcn スタイルで、Horizon キットは Meta Horizon iOS スタイルの 3D/XR インターフェイス向けです。どちらのキットでも Lucide アイコンと HTML タグを使用できます。正確なコンポーネント名と props については、該当するリファレンスを参照してください。

<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>

言語仕様

  • タグは正確に指定し、大文字と小文字を区別します。
  • UIKitML では prop 名に kebab-case を使用します。UIKit の props に変換される際に camelCase になります。
  • 明示的な閉じタグ、または自己終了タグを使用してください。
  • 属性値を省略した属性は true になります：<Button disabled />。
  • class は classList になり、id はそのまま渡され、スタイルを設定できます。
  • インラインスタイルには、<style> と同じ宣言構文を使用します：<Card style="padding: 16; gap: 8" />。
  • font-family では、バンドルされた MSDF フォント名を指定できます：crimson-text、fira-code、inconsolata、inter、lato、libre-baskerville、merriweather、montserrat、nunito、open-sans、playfair-display、poppins、raleway、roboto、source-code-pro、space-mono、work-sans。
  • レイアウトには UIKit のフレックスレイアウトを使用します：display は flex（デフォルト）、none、contents をサポートし、配置には静的／デフォルトのフローと position-type="absolute" を使用できます。
  • テキストの前後の空白は削除され、HTML エンティティはデコードされます。
  • プレーンな .uikitml では、コールバックやアイコンコンストラクターなどの関数 props を指定できません。

サポートされているスタイルシートのセレクター：.class、#id、:hover、:active、:focus、:sm、:md、:lg、:xl、:2xl、> *。

HTML タグは常に使用できます：div、p、span、li、h1-h6、ol、ul、a、button、img、svg、video、input、textarea。これらは、UIKit のベースとなる Container／Image／Svg／Video／Input／Textarea の動作に対応します。

Lucide アイコンは、常に PascalCase の自己終了タグとして使用できます。例：<Search /> や <Activity />。

CLI

CLI は @drawcall/uikitml パッケージに含まれています。パッケージ名を指定して呼び出してください：

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'

入力は、まず - の場合は標準入力、次にファイルパス、最後にインラインソースとして解決されます。--kit を省略するとデフォルトのキットが選択されます。Meta Horizon iOS スタイルの 3D/XR キットを使用するには、--kit horizon を指定してください。どちらのキットでも Lucide アイコンと HTML タグを使用できます。

validate は診断情報を出力し、UIKitML が有効か無効かにかかわらず終了コード 0 で終了します。CLI／ランタイムの失敗時には error ... が出力され、ゼロ以外の終了コードで終了します。

変換先：デフォルトでは convert は @react-three/fiber コードを出力します。convert --to three は生の Three.js コードを出力します。IWSDK は .uikitml ファイルを直接使用するため、変換は不要です。

ユーザーに起因しない問題を報告するには、feedback を使用してください。UIKitML の不具合の疑い、予期しないパーサー／レンダー／変換の動作、誤解を招く診断情報、その他のツールの不具合が対象です。報告は簡潔にし、分かる範囲でコマンド、期待される動作、実際の動作を記載してください。

リファレンス

  • references/default-kit.md：Shadcn スタイルのデフォルトキットのコンポーネント一覧。
  • references/horizon-kit.md：Meta Horizon OS 3D/XR キットのコンポーネント一覧。
  • references/lucide-kit.md：Lucide アイコン名の一覧。

コメント

Markdown 対応