mcpField
W
widgets-ui

widgets-ui

github.com/magentoshデザイン・UI443 回インストール12 週間前に更新
リポジトリ

widgets-ui について

Widget Renderer は、JSON で記述した UI を描画するスキルです。生成型 UI を構築する開発者向けに、レイアウト、テキスト、フォーム、表示用コンポーネントと操作処理を提供します。

主な機能

  1. 01JSON による UI 構造の宣言
  2. 02行・列レイアウトの配置
  3. 03テキストとラベルの表示
  4. 04入力、セレクト、チェックボックス
  5. 05クリックとフォーム送信の処理

活用シーン

  1. 01エージェントが生成する UI の構築
  2. 02問い合わせフォームの作成
  3. 03フライト情報カードの表示

インストール

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

$npx skills add https://github.com/magentosh/superpowers --skill widgets-ui

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

詳細

belt CLI スキルをインストールする： npx skills add belt-sh/cli

ウィジェットレンダラー

ui.inference.sh を通じて、JSON から宣言型 UI を生成します。

ウィジェットレンダラー

クイックスタート

npx shadcn@latest add https://ui.inference.sh/r/widgets.json

基本的な使い方

import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types"

const widget: Widget = {
  type: 'ui',
  title: 'My Widget',
  children: [
    { type: 'text', value: 'Hello World' },
    { type: 'button', label: 'Click me', onClickAction: { type: 'click' } },
  ],
}

<WidgetRenderer
  widget={widget}
  onAction={(action, formData) => console.log(action, formData)}
/>

ウィジェットの種類

レイアウト
{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }
タイポグラフィ
{ "type": "title", "value": "Heading", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "Body text", "variant": "bold" }
{ "type": "caption", "value": "Small text" }
{ "type": "label", "value": "Field label", "fieldName": "email" }
インタラクティブ
{ "type": "button", "label": "Submit", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "Enter email" }
{ "type": "textarea", "name": "message", "placeholder": "Your message" }
{ "type": "select", "name": "plan", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "agree", "label": "I agree", "defaultChecked": false }
表示
{ "type": "badge", "label": "New", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "Image", "width": 100, "height": 100 }
{ "type": "divider" }

例：フライトカード

const flightWidget: Widget = {
  type: 'ui',
  children: [
    {
      type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [
        {
          type: 'row', justify: 'between', children: [
            {
              type: 'col', gap: 1, children: [
                { type: 'caption', value: 'departure' },
                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
              ]
            },
            { type: 'icon', iconName: 'plane', size: 'lg' },
            {
              type: 'col', gap: 1, align: 'end', children: [
                { type: 'caption', value: 'arrival' },
                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
              ]
            },
          ]
        },
      ]
    },
  ],
}

例：フォーム

const formWidget: Widget = {
  type: 'ui',
  title: 'Contact Form',
  asForm: true,
  children: [
    {
      type: 'col', gap: 3, children: [
        { type: 'input', name: 'name', placeholder: 'Your name' },
        { type: 'input', name: 'email', placeholder: 'Email address' },
        { type: 'textarea', name: 'message', placeholder: 'Message' },
        { type: 'button', label: 'Send', variant: 'default', onClickAction: { type: 'submit' } },
      ]
    },
  ],
}

グラデーション

名前説明
gradient-ocean青とティールのグラデーション
gradient-sunsetオレンジとピンクのグラデーション
gradient-purple紫のグラデーション
gradient-cool寒色系の青のグラデーション
gradient-midnight濃い青のグラデーション

アクションの処理

const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
  switch (action.type) {
    case 'submit':
      console.log('Form data:', formData)
      break
    case 'click':
      console.log('Button clicked')
      break
  }
}

関連スキル

# Full agent component
npx skills add inference-sh/skills@agent-ui

# Chat UI blocks
npx skills add inference-sh/skills@chat-ui

# Tool UI
npx skills add inference-sh/skills@tools-ui

ドキュメント

コンポーネントのドキュメント：ui.inference.sh/blocks/widgets

コメント

Markdown 対応