mcpField
H
hig-components-dialogs

hig-components-dialogs

github.com/sickn33デザイン・UI48.7k50 回インストール今日更新
リポジトリ

hig-components-dialogs について

アラート、アクションシート、ポップオーバー、シート、数字入力ビューなど、Apple の画面表示コンポーネントを選ぶためのスキルです。タスクやプラットフォームに応じた選択と、不要な中断の削減を支援します。

主な機能

  1. 01アラート、シート、ポップオーバーの使い分け
  2. 02アクションシートと数字入力の指針
  3. 03タイトルやボタンラベルの作成指針
  4. 04閉じ方と非モーダルな代替案

活用シーン

  1. 01破壊的操作の確認フロー設計
  2. 02設定編集に適した表示形式の選択
  3. 03PIN 入力画面の計画

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --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. アクションシート: アクションの中からの選択。 複数のアクションから選択する場合、特にそのうちの 1 つが破壊的な場合に提示します。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 -- プレゼンテーションコンポーネントのための色、タイポグラフィ、レイアウト

Built by Raintree Technology · More developer tools

使用する場合

このスキルは、概要に記載されているワークフローまたはアクションを実行する場合に適用されます。

例

ユーザーのリクエスト:

このタスクに @hig-components-dialogs を使用してください: アラート、アクションシート、ポップオーバー、シート、数字入力ビューを含むプレゼンテーションコンポーネントに関する Apple HIG ガイダンス。

制限事項

  • このスキルは、タスクが上記のスコープに明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、専門家によるレビューの代替として扱わないでください。
  • 必要な入力、権限、安全境界、成功基準が欠けている場合は、作業を中断して確認を求めてください。

コメント