ultrahand: tablet（タブレット）

Claudeアーティファクトとしてタブレット画面をデザインします。このアーティファクトは、iPadとAndroidタブレットの両方のサイズで両方の向きを切り替え、分割幅（1/3、1/2、2/3）にスナップし、ウィンドウをフル幅から320までドラッグしながらライブでリフローします。適用するすべてのルールはreferences/principles.mdにあり、各ルールはreferences/sources.mdを引用しています。サイズ、分割、サイズクラスはreferences/presets.mdにあります。

1. 要件の収集

推測できないことだけを尋ねてください。描画を開始する前にこれらを確定します：

プラットフォーム： iPadOS、Android、またはその両方。両方の場合は、48単位のターゲットとプラットフォームに依存しないパターンを使用します。
スコープ： 単一の画面またはフロー。フローの場合は、画面とそれらの間の移動方法（サイドバーまたはレール、リストから詳細、シート、ポップオーバー、または新しいウィンドウ）をリストします。
主要タスク： 各画面の目的と、それに適した標準レイアウト（リスト詳細、サポートペイン、フィード、またはシングルペイン）。
実際のコンテンツ： 名前、長さ、数、および最も長い可能性のある文字列。Lorem Ipsumではデザインしないでください。
データ状態： 読み込まれるもの、空になる可能性があるもの、失敗またはオフラインになる可能性があるもの。
入力： タッチのみ、またはキーボード、トラックパッド、マウス、ペンも含む。特に指定がない限り、すべて可能と想定します。
マルチタスク： このアプリ以外でユーザーが行うこと（サイドバイサイドでの参照、コンテンツのドラッグイン/アウト）。320幅からフルスクリーンまでのウィンドウを想定します。
制約： ブランドカラー、フォント、既存のデザインシステム、およびネイティブアプリかWebか。
テーマ： 色、サイズ、間隔を選択する前に、プロジェクトのテーマ（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 を読んでください。新しいパターンを発明するのではなく、プラットフォーム独自のパターン（サイドバーまたはレール、分割ビュー、ポップオーバー、メニューバーコマンド）を使用します。

3. 画面を構成する

それぞれがチェックを通過したコンポーネントでも、まとめると乱雑な画面になることがあります。構築する前に、プラグインの構成ルール（shared/composition/principles.md）を使用して、それらがどのようにセクションを形成し、セクションがどのように画面を形成するかを計画します：

セクションマップを書く。 各画面について、そのセクション（サイドバー、リストペイン、ツールバー付きの詳細ペイン、インスペクター）をリストし、各セクションの単一の役割、使用頻度順に並べたメンバー、および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/tablet/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<design name>" --out index.html

index.html をアーティファクトとして公開します。references/presets.md からキャンバスは以下を取得します：

フルスクリーン： ipad-mini 744、ipad 820、ipad-13 1032、android-tablet 800。回転によりそれぞれの横向きが得られます。
分割ビュー： ipad-split、ipad-13-split、android-split。アプリを分割線の片側に配置した横向きのデバイスです。分割線は1/3、1/2、2/3にスナップします（ドラッグするか、フォーカスして矢印キーを押します）；Fullは横向きのフルスクリーンプリセットです。
フリーリサイズ： プリセットサイズから320×450までドラッグハンドルでリサイズできます。
チェック： 320幅でのリフロー、およびキーボード表示時の横向き（1180×420）。

ドラッグ中、レイアウトはライブでリフローする必要があります。フル幅から半幅への移行では、840と600のブレークポイントを通過しても、リロードや状態の損失なしに継続的に再レンダリングする必要があります。読み取り値には現在の幅とそのサイズクラス（コンパクト、ミディアム、エクスパンデッド、ラージ）が表示されます。

config.json は title と states（例：デフォルト、ローディング、空、エラー）を設定します。Androidのみのデザインの場合は "initialPreset": "android-tablet" を設定します；iPadOSとAndroidの両方の場合は "minTarget": 48 を設定します。
画面の契約： 1つの <template id="uh-screen"> と [data-screen] セクション、およびクリック用の data-nav、data-nav-replace、data-nav-back、data-show-state を持つこと。レイアウトはサイズクラスに基づいて、@container screen (width >= 600px) と (width >= 840px)、またはビューポートの data-width-class を使用して行います。プリセットや @media では行いません。エッジのパディングは [data-screen] で宣言された var(--uh-safe-*) を使用します（:host はそれらを認識できません）。テキストは rem で；ヒットエリア、アイコン、ガターは px で指定します。これにより、200%テキストは単語を拡大し、コントロールは拡大しません。色は light-dark() を使用します。動作は window.ultrahandSetup = function (canvas) { … } に配置します。
組み込みトグル： ライト/ダーク、200%テキスト、状態ピッカー、タップターゲット表示。独自のものは構築しないでください。シート、ポップオーバー、またはメニューを開いた後は canvas.refresh() を呼び出します。
ポインターとキーボードは常にライブ： ビューアはマウスとキーボードでアーティファクトを操作するため、すべてのコントロールにホバー状態、プラットフォームが持つ場合は右クリックコンテキストメニュー、可視の :focus-visible フォーカス、およびショートカットヒントを提供します。タップターゲットオーバーレイでタッチをチェックします。これらを独自のトグルの背後に隠さないでください。
ウィンドウ化されたiPad状態では、先頭のツールバーボタンが先頭上部のウィンドウコントロールと重ならないようにします。
メインフローをクリック可能にします：ナビゲーションの切り替え、行の選択またはプッシュ、ペインの表示/非表示、シートとポップオーバーの開閉。alert、confirm、prompt は絶対に使用しないでください。

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

ワイドからナローへ作業し、問題が現れるサイズで修正します：

エクスパンデッド/ラージ、横向きフルスクリーン（例：ipad 1180）：ペイン、ナビゲーション（サイドバーまたはレール）、密度を選択します。行の長さとコントロールの幅に上限を設定します。
ミディアム、縦向きフルスクリーンおよび2/3分割（例：820、787）：より少ないペインに折りたたみ、レールまたは上部タブバーを使用します。
コンパクト、1/2および1/3分割（例：590、393）：スマートフォンレイアウトで、下部バーまたはタブバー、一度に1つのペイン、リストに戻るためのBackボタンを使用します。
ドラッグ フル幅から320までゆっくりと、そして戻します。選択、スクロール位置、入力テキストが維持されることを確認します。リスト詳細が狭くなるときに開いている詳細を保持し、広くなるときにその項目を選択することを確認します。

次に、追加のケースを確認します：320幅でのリフロー、キーボード表示時の横向き、および（Androidがスコープ内の場合）android-tablet プリセットの両方の向き。

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

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

7. 提示

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

tablet（タブレットUI）