adapt

コンテキスト： このサブスキルは、より広範な ui-craft スキルの一つの観点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の観点を適用してください。

$ARGUMENTS の UI をデバイスに合わせて調整します。ui-craft スキルを読み込み、references/responsive.md を読んでください。

モバイルファーストで作業してください。デスクトップを縮小するのではなく、モバイルから広げていきます。

チェックリスト：

1. ブレークポイント — プロジェクトで既存のシステムを使用します（Tailwind：sm md lg xl、CSS：コンポーネントにはメディアクエリよりコンテナクエリを優先）。根拠のない幅を使わないでください。
2. タッチ操作 — タップ対象は 44×44px 以上にします（min-h-11 min-w-11）。タッチ領域が重ならないようにします。インタラクティブ要素には touch-action: manipulation を設定します。
3. セーフエリア — 固定ヘッダー／フッター／FAB に padding-top: env(safe-area-inset-top) などを設定します。iOS のノッチと Android のジェスチャーバーを確認します。
4. 横スクロールなし — 320px で横スクロールが発生しないようにします。開発者ツールのデバイスモードでテストします。
5. 可変サイズの文字 — スケーリングが重要な本文には clamp(1rem, 0.9rem + 0.5vw, 1.125rem) を使用します。ラベルやキャプションなどの小さな UI テキストには固定の px を使用します。
6. コンテナクエリ — コンポーネント単位のレスポンシブ対応では、ビューポートのメディアクエリより @container を優先します。サイドバーとメインコンテンツに配置されたコンポーネントは、同じビューポート幅でも異なる動作をします。
7. ホバー非対応デバイス — ホバーによる操作には、必ずホバー以外の代替手段を用意します。デスクトップ専用のエフェクトは @media (hover: hover) で適用範囲を限定します。
8. ビューポートに応じて密度を調整 — ブレークポイントごとに VISUAL_DENSITY を適切に反映します。
   • VISUAL_DENSITY ≤ 3 → デスクトップ幅でも列数を減らし、間隔を広くします。
   • VISUAL_DENSITY 8+ → ダッシュボードの密度を維持しつつ、タッチ操作とホバーの違いにも配慮します（モバイルではタッチ対象を 44px 以上に保ち、ホバーによる操作は @media (hover: hover) で制限します）。
   • ノブの値にかかわらず、モバイルでは常に 1 列に近づけ、間隔を広くします。
9. 画像 — aspect-ratio を設定し、ビューポートごとに srcset と sizes を指定します。画面下部の画像には loading="lazy"、ヒーロー画像には fetchpriority="high" を設定します。
10. ナビゲーションパターン — デスクトップでは横並びにし、モバイルでは折りたたみます（シート、ドロワー、または下部タブ）。トップレベル項目が 7 個を超える場合を除き、デスクトップではハンバーガーメニューを使用しないでください。

出力： コードを直接編集します。変更内容を Review Format の表で出力します。追加情報がないと修正できないレスポンシブの不具合（ブレークポイントのデザインがない、ナビゲーションパターンが不明確など）があれば、その旨を示してください。

次のステップ： /audit — アクセシビリティ、パフォーマンス、タッチ対象の観点からレスポンシブ対応を確認します（rung 1）。