register-asset

アセットを登録

design-assets.json に成果物を追加し、assets.html のビジュアル概要を更新します。

引数の解析

$ARGUMENTS から解析します：

• 位置 0：html-path（必須）
• --asset "<name>"：表示名（デフォルト：ファイル名から生成し、タイトルケースに変換）
• --group <X>：Type、Colors、Spacing、Components、Brand のいずれか（デフォルト：Components）
• --subtitle "<text>"：短い説明
• --status <X>：needs-review | approved | changes-requested（デフォルト：needs-review）
• --auto：/done から呼び出されるサイレントモード — サムネイルのキャプチャをスキップ（.claude/last-preview.png を再利用）し、確認プロンプトを表示せず、1 行のみでレポートします

手順

1. サムネイルをキャプチャ：

   • --auto が指定され、.claude/last-preview.png が存在する場合：Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png) — 再利用します
   • それ以外の場合：/preview <html-path> → 500ms 待機 → mcp__chrome-devtools__take_screenshot → assets/thumbs/<slug>-<ts>.png に保存（最初に Bash(mkdir -p assets/thumbs) を実行）

2. 既存の design-assets.json を読み込み：

   • ファイルがない場合 → {"items": []} を作成します

3. エントリーを追加または更新：

   • （asset, path）のペアをキーにします
   • 既存の場合 → フィールドとサムネイルを更新し、updated_at を更新します
   • 新規の場合 → 追加します

   スキーマ：

   {
     "items": [
       {
         "asset": "Primary button",
         "path": "artifacts/button.html",
         "group": "Components",
         "status": "approved",
         "subtitle": "Filled variant with hover state",
         "thumbnail": "assets/thumbs/button-20260420T120000Z.png",
         "registered_at": "2026-04-20T12:00:00Z",
         "updated_at": "2026-04-20T12:00:00Z"
       }
     ]
   }
   

4. design-assets.json を書き込み： 2 スペースのインデントを使用した整形済み JSON にします。

5. assets.html を再生成：

   • Bash(node scripts/make-assets-index.mjs) — 下記のスクリプトを参照してください
   • ユーザーが /doctor を実行しておらず、node がない場合は、Write ツールを使って HTML テンプレートからインラインで生成します

6. レポート： "<group> に <asset> を登録しました。assets.html で確認できます。"

assets.html のレイアウト

グループごとにセクションを表示します。各カードには以下を表示します：

• サムネイル（クリックするとソース HTML を新しいタブで開きます）
• アセット名（太字）
• サブタイトル（控えめな表示）
• ステータスバッジ（色分け：green=approved、amber=needs-review、red=changes-requested）
• 更新日
• ミニメニュー：承認、変更をリクエスト、登録解除

HTML は静的で、サーバーは不要です。ステータスの変更は Claude 経由で行います（ユーザーが「ボタンのアセットを承認して」と言うと、Claude は /register-asset ... --status approved を再実行します）。