ultrahand: mobile

電話サイズの画面を、3種類の電話サイズを縦横で切り替え可能なインタラクティブなClaude Artifactとしてデザインします。適用するすべてのルールはreferences/principles.mdにあり、各ルールはreferences/sources.mdを引用しています。サイズとセーフエリアはreferences/presets.mdにあります。

1. 要件の収集

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

プラットフォーム: iOS、Android、または両方。両方の場合は、48単位のターゲットとプラットフォームに依存しないパターンを使用します。
スコープ: 1画面またはフロー。フローの場合は、画面をリストアップし、ユーザーがそれらの間をどのように移動するか（タブ、プッシュ、シート、全画面モーダル）を示します。
プライマリタスク: 各画面が担当する1つのこと。そのアクションはサムリーチ内に配置します。
実際のコンテンツ: 名前、長さ、カウント、および最も長い可能性のある文字列。ダミーテキストでデザインしないでください。
データ状態: 何が読み込まれるか、何が空になり得るか、何が失敗またはオフラインになり得るか。
制約: ブランドカラー、フォント、既存のデザインシステム、およびネイティブアプリか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/mobile/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<design name>" --out index.html

index.htmlをアーティファクトとして公開します。プリセットは、small 360 (Android)、medium 393、large 430 (iOS)です。回転により各プリセットが横向きになり、320幅のリフローパスはチェックの下にあります。

config.json は、titleとstates（例：default、loading、empty、error）を設定します。iOSのみのデザインの場合は"initialPreset": "medium"を設定します。iOSとAndroid両方の場合は"minTarget": 48を設定して、すべてのプリセットがより厳しいターゲットに対して測定されるようにします。
画面契約： [data-screen]セクションを持つ1つの<template id="uh-screen">と、クリック用のdata-nav、data-nav-replace（タブ）、data-nav-back、data-show-state。端はvar(--uh-safe-top|right|bottom|left)でパディングします。これらはプリセットとその回転に従います。それらを使用するトークンは[data-screen]で宣言します。:hostはそれらを認識できないためです。サイズには@mediaではなく@container screen (width >= …)で応答します。テキストはrem。ヒット領域、アイコン、ガターはpx単位で、200%テキストでは単語が大きくなり、コントロールは大きくなりません。色はlight-dark()を使用します。動作はwindow.ultrahandSetup = function (canvas) { … }に記述します。
固定部分： 下部に固定されるすべてのもの（タブバー、FAB、スナックバー）は、重ならないように1つのドックにスタックし、[data-screen]にscroll-paddingを設定して、フォーカスが固定バーの上にスクロールしないようにします[WCAG-2.4.11]。高さがコンパクトな場合や200%テキストの場合は、ヘッダーを静的（固定解除）にします[WCAG-1.4.4]。
プリセットごとのプラットフォーム： smallはAndroid、mediumとlargeはiOSです。戻るコントロール、タイトルの配置、ターゲットサイズなど、異なる慣習についてはcanvas.size.platformに従います。
組み込みトグル： ライト/ダーク、200%テキスト、ステートピッカー、タップターゲット表示（44pt、Androidプリセットでは48dp）。独自に作成しないでください。シートを開いた後はcanvas.refresh()を呼び出して、ターゲットオーバーレイがそれを認識するようにします。
固定のデバイス番号ではなく、柔軟なユニットとインセットでレイアウトします。これにより、1つのデザインがすべてのプリセットに適応します。
メインフローをクリック可能にします：タブは切り替わり、行はプッシュされ、シートは開閉します。シートとダイアログは画面内に描画し、alert、confirm、promptは決して使用しないでください。

5. すべてのプリセットをデザインする

各画面について、small、次にmedium、次にlarge、そしてそれぞれの横向きの順に作業します。問題が発生したサイズで修正します：

small (360): テキストとボタンは、重要な情報を切り詰めずに収まる必要があります。
large (430): コンテンツが長い行に引き伸ばされたり、デッドスペースを残したりしないようにします。
landscape: 短い高さでも、フォーカスされたフィールドがキーボードの上に表示され、サイドのセーフエリアが尊重されます。200%テキストでも確認します：固定ヘッダーとドックを合わせても、コンテンツ用の画面の大部分が残っている必要があります。

次に、320幅のリフローチェックを簡単にパスします。

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スキル用）、および未解決の質問を述べてください。

モバイルUI設計