mcpField
H
hig-components-dialogs

hig-components-dialogs

github.com/raintree-technologyデザイン・UI148665 回インストール6 日前に更新
リポジトリ

hig-components-dialogs について

Apple HIGに基づき、各プラットフォームのプレゼンテーションコンポーネント設計を支援するスキルです。確認や編集、選択肢の提示に使うコンポーネントを選び、文言や閉じ方、より中断の少ない代替案も検討します。

主な機能

  1. 01アラート、シート、ポップオーバーの区別
  2. 02アクションシートと破壊的操作の指針
  3. 03タイトルとボタンラベルの提案
  4. 04閉じ方と非モーダルな代替案

活用シーン

  1. 01破壊的操作の確認フロー設計
  2. 02編集タスクに適した表示方法の選定
  3. 03モーダルダイアログによる中断の軽減

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/raintree-technology/hig-doctor --skill hig-components-dialogs

インストール後、Claude Code で/hig-components-dialogsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
action-sheets.md
alerts.md
digit-entry-views.md
popovers.md
sheets.md

詳細

Apple HIG:プレゼンテーションコンポーネント

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、まだ触れられていない情報だけを質問してください。

主な原則

  1. アラート:重要な状況でのみ使用します。 注意が必要なエラー、破壊的な操作の確認、または確認を要する情報に使用します。アラートは操作の流れを中断し、応答を求めます。

  2. シート:コンテキストを保ちながら進める、集中した作業に使用します。 画面の端からスライドして表示されます(macOSではウインドウに取り付けられます)。項目の作成、設定の編集、複数ステップのフォームに使用します。

  3. ポップオーバー:iPadとMacでは非モーダルです。 トリガー要素の隣に表示され、外側をタップすると閉じます。画面全体を占有せずに、追加情報、オプション、またはコントロールを表示する場合に使用します。

  4. アクションシート:アクションの選択に使用します。 複数のアクションから選択する場合、特にその中に破壊的なアクションがある場合に表示します。iPhoneでは画面下部からスライドして表示します。iPadではポップオーバーとして表示します。

  5. 中断を最小限に抑えます。 モーダルを使う前に、インライン表示や、操作を取り消し可能にする方法を検討してください。

  6. アラートのテキストは簡潔で、次の行動が明確になるようにします。 短く説明的なタイトルを使います。必要に応じて、簡潔な本文を添えます。ボタンのラベルには「OK」ではなく、「削除」「保存」など具体的な動詞を使います。

  7. 破壊的なアクションを明確に示します。 破壊的なボタンスタイル(赤いテキスト)を使います。破壊的なボタンは、ユーザーが反射的にタップしにくい位置に配置します。

  8. アクションが複数あるアラートやアクションシートには、キャンセルの選択肢を用意します。アクションシートでは、キャンセルを一番下に配置し、他のアクションと区切ります。

  9. 数字の入力:集中しやすく、アクセシブルにします。 適切なサイズの入力フィールドを使い、数字間の自動移動に対応し、ペーストと自動入力をサポートします。

  10. プラットフォームに合わせて表示方法を調整します。 同じ操作でも、iPhone、iPad、Mac、visionOSでは異なるコンポーネントを使う場合があります。

リファレンス一覧

リファレンストピック主な内容
alerts.mdアラートボタンの順序、タイトルと本文、確認、破壊的なアクション
action-sheets.mdアクションシート複数のアクション、キャンセルの選択肢、破壊的な操作への対応
popovers.mdポップオーバー非モーダル、外側をタップして閉じる、iPad/Mac
sheets.mdシートモーダルな作業、コンテキストの維持
digit-entry-views.md数字の入力PIN入力、自動入力、自動移動

出力形式

  1. 推奨する表示形式とその理由、および他の形式が適さない理由。
  2. コンテンツのガイドライン — Appleのトーンと簡潔さのルールに沿ったタイトル、本文、ボタンラベル。
  3. 閉じる動作 — ユーザーがどのように閉じるか、およびその結果(保存、破棄、キャンセル)。
  4. 代替案 — シナリオによってはモーダルをまったく使わなくてよい場合(インラインフィードバック、取り消し、段階的な情報開示)。

質問

  1. この表示で伝える情報や実行する操作は何ですか?
  2. 操作をブロックしますか、それともブロックしませんか?
  3. 対象プラットフォームはどれですか?
  4. これはどのくらいの頻度で表示されますか?

関連スキル

  • hig-components-menus — 表示を開始するボタンとツールバー項目
  • hig-components-controls — シートやポップオーバー内の入力コントロール
  • hig-components-search — 表示されたビュー内での検索とナビゲーション
  • hig-patterns — モダリティ、中断、ユーザーフローの管理
  • hig-foundations — プレゼンテーションコンポーネントの色、タイポグラフィ、レイアウト

制作:Raintree Technology · その他の開発者向けツール

コメント