mcpField
H
hig-components-menus

hig-components-menus

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

hig-components-menus について

hig-components-menusは、メニューとボタンの設計にApple HIGを適用するスキルです。デザイナーや開発者向けに、コンポーネントの選択、操作の整理、プラットフォームごとの動作、キーボードショートカットを案内します。

主な機能

  1. 01メニューとボタンの選択指針
  2. 02メニュー階層と操作のグループ化
  3. 03プラットフォーム別の動作指針
  4. 04キーボードショートカットの提案
  5. 05既存のApple設計コンテキストを確認

活用シーン

  1. 01画面上の操作に適したメニューの選択
  2. 02ツールバーとメニューへのコマンド配置
  3. 03Apple各プラットフォームのメニュー動作への対応

インストール

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

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

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

同梱ファイル

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

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

詳細

Apple HIG:メニューとボタン

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

主な原則

  1. メニューは状況に応じた、予測しやすいものにします。 標準項目は標準の場所に配置します。順序やグループ分けにはプラットフォームの慣習に従います。

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

  3. 頻繁に使う操作にはツールバーを使用します。 最もよく使うコマンドをツールバーに配置します。使用頻度の低い操作はメニューに配置します。

  4. macOS ではメニューバーが主要なコマンドインターフェイスです。 すべてのコマンドにメニューバーからアクセスできるようにします。ツールバーやコンテキストメニューは補助的に使い、置き換えるものではありません。

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

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

  7. プルダウンボタンは操作の一覧に使用します。 現在の選択項目はなく、一連のコマンドを提示します。

  8. アクションボタンは関連する操作をまとめ、 ツールバーやタイトルバーの単一のアイコンから利用できるようにします。

  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 が制作 · その他の開発者向けツール

コメント