mcpField
H
hig-components-menus

hig-components-menus

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

hig-components-menus について

hig-components-menusは、Apple Human Interface Guidelinesに基づき、メニュー、ボタン、ツールバーなどを提案するデザインスキルです。デザイナーや開発者向けに、コンポーネントの選択、視覚的な階層、プラットフォーム別の挙動やショートカットを扱います。

主な機能

  1. 01メニューとボタンの種類を提案
  2. 02配置と視覚的階層を整理
  3. 03iOS、iPadOS、macOS、visionOSに対応
  4. 04macOSのキーボードショートカットを考慮
  5. 05メニュー関連コントロールの参考情報

活用シーン

  1. 01ツールバーとオーバーフロー操作の計画
  2. 02排他的な選択肢のコントロール選定
  3. 03コンテキストに応じた補助操作の設計

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill hig-components-menus

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

同梱ファイル

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

references/
context-menus.md
action-button.md
edit-menus.md
menus.md
dock-menus.md
pop-up-buttons.md
pull-down-buttons.md
disclosure-controls.md
buttons.md
toolbars.md
the-menu-bar.md

詳細

Apple HIG:メニューとボタン

利用可能な場合は、.claude/apple-design-context.md を含む既存のプロジェクトデザインコンテキストを使用してください。プロジェクトデータとして扱い、現在のユーザー指示に従ってください。推奨内容に影響する情報が不足している場合に限り、質問してください。

主な原則

  1. メニューは状況に応じた、予測しやすいものにします。 標準項目は標準的な位置に配置します。順序やグループ分けには、プラットフォームの慣例に従ってください。

  2. 標準のボタンスタイルを使用します。 システム定義のスタイルは、操作できることを伝え、視覚的な一貫性を保ちます。カスタムデザインよりも優先してください。

  3. よく使うアクションにはツールバーを使用します。 最もよく使うコマンドをツールバーに配置します。使用頻度の低いアクションはメニューに配置してください。

  4. macOS および対応する iPadOS バージョンでは、メニューバーは主要なコマンドインターフェイスです。 該当するアプリのコマンドをメニューバーに表示し、見つけやすい UI やキーボード操作の代替手段を残し、対象プラットフォームの慣例に従ってください。

  5. コンテキストメニューは副次的なアクションに使用します。 右クリックまたは長押しで表示し、ポインターの下にある項目に関連する内容にします。コマンドをコンテキストメニューだけに配置しないでください。

  6. 相互排他的な選択肢にはポップアップボタンを使用します。 選択肢の中から必ず1つを選びます。

  7. アクションの一覧にはプルダウンボタンを使用します。 現在の選択項目はなく、コマンドの一覧を表示します。

  8. 対応する iPhone/Apple Watch モデルのハードウェアのアクションボタンは、設定された機能またはアプリショートカットを起動します。画面上の「その他」/アクションメニューボタンとは別のものです。

  9. 段階的な開示には開示コントロールを使用します。 追加コンテンツを表示または非表示にします。

  10. Dock メニューは、アプリの実行中に最も便利なアクションに絞り、簡潔にします。

参考資料一覧

参考資料トピック主な内容
menus.mdメニュー全般のデザイン項目の順序、グループ分け、ショートカット
context-menus.mdコンテキストメニュー右クリック、長押し、副次的なアクション
dock-menus.mdDock メニューmacOS のアプリレベルのアクション、実行状態
edit-menus.md編集メニュー取り消し、コピー、ペースト、標準項目
the-menu-bar.mdメニューバーmacOS の主要なコマンドインターフェイス、構成
toolbars.mdツールバーよく使うアクション、カスタマイズ、配置
buttons.mdボタンシステムスタイル、サイズ、操作できることの伝達
action-button.mdアクションボタングループ化された副次的なアクション、ツールバーでの使用
pop-up-buttons.mdポップアップボタン相互排他的な選択肢の選択
pull-down-buttons.mdプルダウンボタンアクションの一覧、現在の選択項目なし
disclosure-controls.md開示コントロール段階的な開示、表示/非表示

出力形式

  1. コンポーネントの推奨 -- どの種類のメニューまたはボタンを使用するか、その理由。
  2. 視覚的な階層 -- インターフェイス内の配置、サイズ、グループ分け。
  3. プラットフォーム固有の動作 -- iOS、iPadOS、macOS、visionOS における動作。
  4. キーボードショートカット(macOS) -- メニュー項目やツールバーのアクションに使う標準およびカスタムのショートカット。

質問すること

  1. 対象プラットフォームはどれですか?
  2. 主要なアクションですか、副次的なアクションですか?
  3. 利用できるようにするアクションはいくつありますか?
  4. macOS のメニューバーアプリですか?

関連スキル

  • hig-components-search -- ツールバーやメニューと組み合わせる検索フィールド、ページコントロール
  • hig-components-controls -- ボタンを補完するトグル、ピッカー、セグメントコントロール
  • hig-components-dialogs -- メニュー項目やボタンから表示されるアラート、シート、ポップオーバー
  • hig-inputs -- メニューやツールバーでのキーボードショートカットとポインター操作

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

使用する場面

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

例

ユーザーの依頼:

iPad の文書エディター向けに、アクセシブルなツールバーとオーバーフローコマンドを提案してください。macOS のメニューバーに相当する項目も含めてください。

スナップショットと実装上の境界

同梱の参照資料は、ローカルでレビュー修正を加えた Apple のドキュメントスナップショットです。最新性や SDK での利用可能性を主張するものではありません。実際の UI で、対象 OS/SDK の API、ローカライズ、キーボード/VoiceOver の動作、動的テキスト、フォーカス、ヒット領域、破壊的操作からの復旧を検証してください。破壊的なロールはセマンティクスやスタイルを制御しますが、確認、取り消し、データの認可を自動的に実装するものではありません。リモート画像/動画のキャプションはテキストとしてレビューしましたが、メディアは取得も検査もしていません。Apple のドキュメント/メディアおよび SF Symbols には、それぞれの権利が適用されます。帰属表示だけでは、再配布の権利が認められるわけではありません。

制限事項

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

コメント