desktop

ultrahand: desktop

デスクトップアプリやWebアプリの画面を、インタラクティブなClaudeアーティファクトとしてデザインします。アーティファクトは、選択した最小サイズと最大サイズの間で自由にドラッグできるウィンドウで、一般的なラップトップ、モニター、スナップ分割のプリセットが用意されており、ドラッグ中にレイアウトがリアルタイムでリフローされます。適用するすべてのルールはreferences/principles.mdにあり、各ルールはreferences/sources.mdを引用しています。サイズ、制限、サイズクラスはreferences/presets.mdにあります。

1. 要件の収集

推測できないことだけを尋ねてください。描画を開始する前に、以下を確定させてください。

• プラットフォーム: macOS、Windows、Webアプリ、または複数。ネイティブのmacOSアプリにはメニューバーがあります。WindowsとWebアプリには、オーバーフロー付きのコマンドバーまたはツールバーがあります。
• スコープ: 1画面またはフロー。フローの場合は、画面をリストアップし、それらの間の移動方法（サイドバー、タブ、リスト→詳細、サイドパネル、ダイアログ、新しいウィンドウ）を説明します。
• プライマリタスク: 各画面の目的と、それに適したレイアウト（リスト詳細、サポートペイン、フィード、単一ドキュメントペイン）。
• 実際のコンテンツ: 名前、長さ、数、列セット、および最も長いと思われる文字列。Lorem Ipsumではデザインしないでください。
• データ状態: ペインごとに、何がロードされるか、何が空になり得るか、何が失敗またはオフラインになり得るか。
• ウィンドウ制限: 最小ウィンドウサイズ、最大サイズ、および最大コンテンツ幅。ネイティブアプリのデフォルトは640×480、Webアプリのデフォルトは320×256です（presets.mdを参照）。
• 入力: 常にポインターとキーボード。2-in-1やタッチ対応ラップトップで動作する可能性がある場合はタッチ。どのコマンドがショートカットに値するほど頻繁ですか？
• ウィンドウ: 1つのウィンドウ、または複数（ドキュメント、インスペクター、切り離されたパネル）？
• 制約: ブランドカラー、フォント、既存のデザインシステム、またはコンポーネントライブラリ。
• テーマ: 色、サイズ、間隔を選択する前に、プロジェクトのテーマを探してください（design/THEME.md、*.tokens.json。shared/theme/README.mdを参照）。テーマがある場合は、それを使ってデザインします：node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.htmlを実行し、--head theme.htmlをビルドに渡し、そのカスタムプロパティ（var(--color-surface)、var(--space-gap-group)）のみを使用し、インベントリ内のコンポーネントを再利用します。デザインにテーマにないものが必要な場合は、最も近いトークンを使用し、追加内容を未解決の質問としてリストアップします。値を独自に発明しないでください。テーマがない場合は、shared/theme/rules.mdの非交渉事項に従い、themeスキルを提供してください。

2. 参考文献を読む

デザインを始める前に、references/principles.mdとreferences/presets.mdを読んでください。新しいパターンを発明するのではなく、プラットフォーム独自のパターン（メニューバー、ツールバー、サイドバー、分割ビュー、コンテキストメニュー、シート、NavigationView）を使用してください。

3. 画面を構成する

各々がチェックに合格するコンポーネントでも、組み合わせると雑然とした画面になることがあります。構築する前に、プラグインの構成ルール（shared/composition/principles.md）を使用して、それらがどのようにセクションを形成し、セクションがどのように画面を形成するかを計画してください。

• セクションマップを書きます。 各画面について、そのセクション（最大3グループのツールバー、サイドバー、コンテンツペイン、インスペクター）をリストアップし、各セクションの単一の役割、使用頻度順のメンバー、および1つの強調ポイントを記述します。プライマリコンテンツとクロームを明示します。コンテンツが支配的で、クロームは後退します。
• スペースでグループ化します。 グループ内のギャップは、グループ間のギャップよりも明らかに小さくします。スペースでグループを示せない場合にのみコンテナを追加します。
• 役割ごとに1つの外観、セクションごとに1つの強調。 同じ役割には同じスタイル。ステータスとラベルは決してボタンのように見えません。強いアクセントはセクションごとに1つの要素にのみ使用し、選択状態は控えめな処理を使用します。
• 小さく保ちます。 約3つのタイプサイズ。1つの事実を1か所に。頻繁に使用するメンバーは表示し、まれなものはメニューの背後に。変更によって何かが追加される場合は、最初に再編成し、正当なものだけを追加します。

4. キャンバスアーティファクトを構築する

プラグインの共有リサイズ可能キャンバス（shared/canvas/。README.mdに完全な契約があります）上に構築します。画面をscreen.htmlとして、デザイン独自の設定をconfig.jsonとして書き、ビルドします。

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/desktop/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<デザイン名>" --out index.html

index.htmlをアーティファクトとして公開します。

• config.json は、title、states（例：デフォルト、ローディング、空、エラー）、およびデザインの limits を設定します：{ minWidth, minHeight, maxWidth, maxHeight }。キャンバスでは、その間の任意のサイズにドラッグできます。Webアプリの場合は、"initialPreset": "browser"も設定します。
• プリセット（presets.mdから）：ラップトップ（1366×768、1536×864、MacBook 1440×900）、モニター（1920×1080、2560×1440）、スナップ分割（960×1080、720×900）、ブラウザウィンドウ（1280×720）。チェック：最小ウィンドウ、短い1366×600ウィンドウ、320×256での400%ズーム。
• 画面契約： data-screenセクションを持つ1つの<template id="uh-screen">。クリックにはdata-nav、data-nav-back、data-show-stateを使用します。サイズには@mediaではなく@container screen (width >= …)で応答します。テキストはrem。ヒット領域、アイコン、ガターはpx。これにより、200%テキストはコントロールではなく単語を拡大します。色はlight-dark()を使用します。動作はwindow.ultrahandSetup = function (canvas) { … }に記述します。
• 組み込みトグル： ライト/ダーク、200%テキスト、状態ピッカー、タップターゲット（デスクトップでは最小24px）。メニューやポップオーバーを開いた後にcanvas.refresh()を呼び出して、ターゲットオーバーレイがそれを認識するようにします。
• デスクトップアプリのように動作させる： ホバー状態、右クリック（およびShift+F10）のコンテキストメニュー、フォーカスの可視化、Tabおよび矢印キーナビゲーションの動作、メニューとツールチップのショートカットヒント、表示/非表示切り替え可能なペイン、ドラッグ可能なディバイダー。alert、confirm、promptは絶対に使用せず、画面上にダイアログを描画してください。

5. すべてのサイズクラスをデザインする

ワイドからナローに向かって作業し、各問題をそれが発生するサイズで修正します。

1. 大/特大（laptop-125、desktop-fhd）：ペイン、ナビゲーション、ツールバーグループ、密度を選択します。コンテンツ幅に上限を設定します。余分な幅はペインに割り当て、行を長くするためには使用しません。
2. 拡大（snap-half、約960）：インスペクターまたはセカンダリペインを折りたたみ、サイドバーをレールにし、計画された順序でツールバー項目をオーバーフローに移動し始めます。
3. ミディアムと最小（mac-half、最小ウィンドウチェック）：1つまたは2つのペイン、ナビゲーション用のメニューボタンまたはレール。すべてのコマンドはメニューから引き続きアクセス可能。
4. 最大から最小までゆっくりドラッグし、戻します。 選択、スクロール位置、入力テキスト、開いているパネルは、すべてのブレークポイントで維持される必要があります。

次にチェックを実行します：短いウィンドウ（固定バー、フォーカスが隠れない）、Webアプリの場合は320×256での400%ズーム（1列、垂直スクロールのみ）。

6. 提示前の自己チェック

各項目を確認してください。失敗を修正するか、または名前を挙げて許容できる理由を説明してください。

構成（構成監査を実行：node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"を最大サイズと最小サイズで、または目視で確認）：

• ぼやかした状態で、画面は意図されたセクションを示し、プライマリコンテンツが最初に目を引きます。意図しない明るいスポットはありません。
• 各セクションには1つの役割があり、そのメンバーは機能と頻度でグループ化され、グループ間のギャップはグループ内のギャップよりも明らかに大きくなっています。
• 各セクションには最大1つの強く強調された要素があります。選択状態は控えめです。
• 役割ごとに1つのスタイル：各セクションのコントロールスタイルを数え、追加のスタイルを正当化します。ラベルやステータスがボタンのように見えることはありません。
• 行とセクションは共有の端に揃っています。画面上のタイプサイズは約3つです。
• 同じ事実が2回表示されることはなく、ここでのタスクに役立たないものが画面上にありません。
• 変更のラウンド後：追加したものをリストアップします。画面は必要以上に賑やかではありません。
• テーマ値のみ：生の色なし、8ポイントスケール外の間隔なし、スケール外のタイプサイズなし、インベントリコンポーネントは再構築ではなく再利用されています（shared/theme/rules.md NN-1、NN-2、NN-6、EV-4）。

コンポーネントとプラットフォーム：

• デザインは、最小ウィンドウサイズ、最大ウィンドウサイズ、最大コンテンツ幅を指定しています。最小では何も重ならずクリップされず、最大では何も引き伸ばされません。
• レイアウトはデバイスではなく、ウィンドウ幅（Material 600 / 840 / 1200、またはWindows 641 / 1008）で切り替わります。すべての機能がすべてのサイズで利用可能です。
• リサイズはライブでリフローし、選択、スクロール、入力、開いているパネルを維持します。
• ペインは正規のレイアウトに従い、ディバイダーはドラッグ可能、ペインはボタン、メニュー、ショートカットで非表示にでき、説明なしに空のペインはありません。
• 本文テキストは1行80文字以下に保たれています。
• すべてのコマンドはメニュー（macOSではメニューバー）またはツールバーのオーバーフローにあります。利用できないメニュー項目は無効化され、非表示にはなりません。入力を必要とするコマンドは「…」で終わります。
• ツールバー項目は、ウィンドウが狭くなるにつれて計画された順序でオーバーフローし、最大3グループです。
• 右クリックで短く関連性のあるコンテキストメニューが開き、その各コマンドは他の場所にも存在します。
• すべてがキーボードで動作し、トラップはありません。フォーカスは常に可視であり、固定バーの下に隠れることはありません。標準ショートカットは別の目的に使用されていません。ショートカットはメニューとツールチップに表示されます。
• ホバーでのみ利用可能なものはありません。ホバーとフォーカスのコンテンツはEscで dismiss可能で、ホバー可能かつ永続的です。ツールチップには重要な情報は含まれません。
• ターゲットは少なくとも24×24 px（タッチが予想される場合は約40×40）です。
• スクロール：コンテンツのみがスクロールし、同じ方向にネストされたスクロール領域はありません。テーブルヘッダーは固定され、重要なコントロールがウィンドウの下端に配置されることはありません。
• 編集は最軽量のパターンを使用します：フィールドはインライン、レコードはサイドパネル、短いブロッキングタスクはシートまたはダイアログ、長いフローはウィンドウまたはページ。確認は破壊的で取り消し不可能なアクションにのみ使用されます。それ以外はすべて元に戻し（Undo）を提供します。
• すべてのドラッグアンドドロップには、非ドラッグの代替手段があります。
• レイアウトは200%テキストに耐え、コントラストはライトモードとダークモードの両方でテキストは少なくとも4.5:1、UIは3:1です。
• ローディング、空、エラーの状態は、ウィンドウだけでなく各ペインについてデザインされています。
• Webアプリ：320×256（400%ズーム）で双方向スクロールなしで動作し、スキップリンクがあります。

7. 提示

アーティファクトのリンクを共有します。数行で、セクションマップ（各セクションの役割と強調）、ウィンドウ制限と最大コンテンツ幅、主要な決定とその背後にある原則（ソースキーを引用）、各幅クラスでのレイアウトの変更方法、理由とともに受け入れた自己チェック項目、提案されたテーマ追加（themeスキル用）、および未解決の質問を記載します。