mcpField
D
dot-canvas-designer

dot-canvas-designer

github.com/mindresetデザイン・UI15147 回インストール1 週間前に更新
リポジトリ

dot-canvas-designer について

Dot Canvas APIのカード、ダッシュボード、ステータスパネル、`windowData`レイアウトを作成・修正するためのデザインスキルです。JSONの構成と表示設計を扱い、デバイス操作や送信は別のスキルに任せます。

主な機能

  1. 01CanvasペイロードをJSONで作成
  2. 02カードやダッシュボードを設計
  3. 03対応するテンプレートロジックを使用
  4. 04レイアウトと表示の指針を適用
  5. 05設計とデバイス送信を分離

活用シーン

  1. 01入力データからDotのステータスパネルを作成
  2. 02Canvasカードのレイアウトを修正
  3. 03条件付きコンテンツを含む`windowData`を構築

インストール

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

$npx skills add https://github.com/mindreset/dot_skill --skill dot-canvas-designer

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

同梱ファイル

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

agents/
openai.yaml
references/
content-design.md
display-design.md
examples.md
windowdata.md

詳細

Dot Canvas デザイナー

ユーザーが Dot の設計や修正を希望する場合に、このスキルを使用します。対象には、Canvas API のカード、ダッシュボード、ステータスパネル、windowData レイアウトが含まれます。

既存のペイロードをデバイスに送信するだけの場合は、このスキルを使用しないでください。デバイス操作には、dot-device-openapi を使用します。

出力範囲

Canvas ペイロードまたは windowData オブジェクトを作成します。API キー、デバイス ID、デバイスへの送信は扱いません。

ユーザーが Canvas カードの設計と送信を求めた場合：

  1. このスキルを使用して Canvas ペイロードを作成します。
  2. dot-device-openapi を使用して送信します。

設計ワークフロー

レイアウトを書く前に、content-design.md を読み、主要な事実、実際のデータ、対象、言語、状態の動作を確認します。階層、タイポグラフィ、画像の扱い、小画面での構成については、display-design.md を読みます。これらの判断は公開する Canvas ペイロードの指針となるものであり、追加のペイロードフィールドではありません。

Read Pico または Rand/0 に関するリクエストでは、まず製品および連携ガイドを確認します。一般的な設計原則はデバイス間で応用できますが、Canvas の配信に対応しているかは別途確認する必要があります。

構成モデル

windowData は JSX、JavaScript、生の HTML、外部 CSS、画像ではなく、JSON として作成します。

ルートの形状：

{
  "default": [
    {
      "type": "div",
      "props": {
        "tw": "flex flex-col flex-1 bg-white text-black",
        "children": "Hello Dot."
      }
    }
  ]
}

要素の形状：

  • type：div、span、または img
  • props：レンダリング用のプロパティ
  • props.tw：Tailwind 風のユーティリティクラス
  • props.style：明示的なインラインスタイルオブジェクト
  • props.children：文字列、1 つの要素オブジェクト、または要素オブジェクトの配列

動的な値は、{{get inputData "title" default="-"}} のような単純な get 式で Canvas の data を参照します。

サポートされているテンプレートロジック

安定した表示レイヤーのヘルパーのみを使用します。

  • $for / $empty：リスト構造
  • $ifAny / $then / $else：構造上の条件
  • if / else：値に内容があるかどうかに基づく短いコンテンツ分岐
  • compare：短いテキスト分岐
  • formatDate：日付表示
  • formatCompactNumber：数値表示
  • get：JSON パスの読み取り

公開する Canvas ペイロードでは、imageSrc、stripHtml、math、regexMatch などの内部的なクリーンアップや変換用ヘルパーは使用しないでください。JSON ペイロードの作成前に、データのクリーンアップと負荷の高い計算を行います。

レイアウトのガイドライン

  • flex、w-full、h-full、明示的な背景色とテキスト色を指定した、境界の明確なルートコンテナを 1 つ使用します。
  • 意図した読み取り量に合わせ、固定スロットとサポートされているテキストのクリッピングを使用します。縮小、切り詰め、トリミングが具体的に必要な場合にのみ、min-w-0、min-h-0、または overflow-hidden を追加します。意図した結果が変わらない防御的なスタイルは省略します。
  • 最外部の Canvas 要素には、通常パディングを追加しません。デバイスのレイアウト間隔は layoutFull から設定します。
  • 全面表示、背景、パディングの上書きには、layoutFull.tw または layoutFull.style を使用します。
  • 要素数とネストの深さを抑えます。装飾を深くネストするのではなく、明確なセクションを組み合わせます。

参考資料

  • references/content-design.md

  • references/display-design.md

  • references/windowdata.md

  • references/examples.md

コメント

Markdown 対応