スキル一覧に戻る

hig-components-menus

raintree-technology
更新日 4 days ago
78
9
78
GitHubで表示
メタdesign

について

このスキルは、メニューバー、コンテキストメニュー、ツールバー、および様々なボタンタイプを含む、メニューとボタンコンポーネントを設計するためのAppleのヒューマンインターフェースガイドラインを提供します。コンポーネントのレイアウトや動作、コンテキストメニューとアクションシートのようなUI要素の選択に関するガイダンスが必要な際にご利用ください。具体的なデザイン原則と、コントロール、検索、ダイアログに関連するHIGスキルへの相互参照を提供します。

クイックインストール

Claude Code

推奨
メイン
npx skills add raintree-technology/claude-starter -a claude-code
プラグインコマンド代替
/plugin add https://github.com/raintree-technology/claude-starter
Git クローン代替
git clone https://github.com/raintree-technology/claude-starter.git ~/.claude/skills/hig-components-menus

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

Apple HIG: Menus and Buttons

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Menus should be contextual and predictable. Standard items in standard locations. Follow platform conventions for ordering and grouping.

  2. Use standard button styles. System-defined styles communicate affordance and maintain visual consistency. Prefer them over custom designs.

  3. Toolbars for frequent actions. Most commonly used commands in the toolbar. Rarely used actions belong in menus.

  4. Menu bar is the primary command interface on macOS. Every command reachable from the menu bar. Toolbars and context menus supplement, not replace.

  5. Context menus for secondary actions. Right-click or long-press, relevant to the item under the pointer. Never put a command only in a context menu.

  6. Pop-up buttons for mutually exclusive choices. Select exactly one option from a set.

  7. Pull-down buttons for action lists. No current selection; they offer a set of commands.

  8. Action buttons consolidate related actions behind a single icon in toolbars or title bars.

  9. Disclosure controls for progressive disclosure. Show or hide additional content.

  10. Dock menus: short and focused on the most useful actions when the app is running.

Reference Index

ReferenceTopicKey content
menus.mdGeneral menu designItem ordering, grouping, shortcuts
context-menus.mdContext menusRight-click, long press, secondary actions
dock-menus.mdDock menusmacOS app-level actions, running state
edit-menus.mdEdit menusUndo, copy, paste, standard items
the-menu-bar.mdMenu barmacOS primary command interface, structure
toolbars.mdToolbarsFrequent actions, customization, placement
buttons.mdButtonsSystem styles, sizing, affordance
action-button.mdAction buttonGrouped secondary actions, toolbar use
pop-up-buttons.mdPop-up buttonsMutually exclusive choice selection
pull-down-buttons.mdPull-down buttonsAction lists, no current selection
disclosure-controls.mdDisclosure controlsProgressive disclosure, show/hide

Output Format

  1. Component recommendation -- which menu or button type and why.
  2. Visual hierarchy -- placement, sizing, grouping within the interface.
  3. Platform-specific behavior across iOS, iPadOS, macOS, visionOS.
  4. Keyboard shortcuts (macOS) -- standard and custom shortcuts for menu items and toolbar actions.

Questions to Ask

  1. Which platforms?
  2. Primary or secondary action?
  3. How many actions need to be available?
  4. macOS menu bar app?

Related Skills

  • hig-components-search -- Search fields, page controls alongside toolbars and menus
  • hig-components-controls -- Toggles, pickers, segmented controls complementing buttons
  • hig-components-dialogs -- Alerts, sheets, popovers triggered by menu items or buttons
  • hig-inputs -- Keyboard shortcuts and pointer interactions with menus and toolbars

Built by Raintree Technology · More developer tools

GitHub リポジトリ

raintree-technology/claude-starter
パス: templates/.claude/skills/hig-components-menus
0
ai-toolsanthropicclaudeclaude-aiclaude-codedeveloper-tools

関連スキル

content-collections

メタ

このスキルは、Content Collections(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。

スキルを見る

polymarket

メタ

このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。

スキルを見る

creating-opencode-plugins

メタ

このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。

スキルを見る

sglang

メタ

SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。

スキルを見る