Skip to main content
skill CX Codex

hig-components-menus — Claude Code skill: what it does, how to install

Guides button and menu architecture across Apple platforms based on official Human Interface Guidelines. Helps choose proper controls and organize toolbars.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a claude-code
Open on GitHub

What hig-components-menus does

The skill applies Apple HIG rules to interface buttons and menus. It covers macOS, iOS, iPadOS, and visionOS. Context menus remain strictly secondary. The assistant prevents common design flaws, like hiding a command solely behind a right-click menu. Frequent actions stay in toolbars, while rarely used commands go into menus.

Guidance relies on reference documents for buttons, dock menus, and disclosure controls. Each response follows a structured format: component choice, visual hierarchy, platform-specific behavior, and macOS shortcuts. Pop-up buttons handle mutually exclusive choices. Pull-down buttons present command lists without active selections.

Before asking questions, the skill checks .claude/apple-design-context.md. If context is missing, the assistant asks about platforms and whether an action is primary or secondary. This keeps discussions focused.

What it helps with

  • choose between pop-up and pull-down button types
  • structure menu bars and toolbars on macOS
  • configure secondary actions for context menus
  • assign keyboard shortcuts to menu commands

Example prompts for the agent

  • Should I use a pop-up button or a pull-down button for selecting document export formats?
  • What commands belong in the macOS menu bar versus the primary window toolbar?
  • How should context menus behave on iOS when a user long-presses a list item?

How to install hig-components-menus

1Skills CLI (Vercel)

npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a claude-code

2Manually: put the files in place

~/.claude/skills/hig-components-menus/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/hig-components-menus/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about hig-components-menus

How do I install hig-components-menus in Claude Code?

Run npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a claude-code. The file will be saved to ~/.claude/skills/hig-components-menus/SKILL.md.

What does hig-components-menus do?

It provides Apple HIG design rules for menus, context menus, toolbars, and buttons across iOS, iPadOS, macOS, and visionOS.

What is .claude/apple-design-context.md used for?

The skill reads this file to inspect your current project setup before asking questions. It prevents repetitive prompts about target platforms and application structure.

Source text

SKILL.md · MIT
---
name: hig-components-menus
version: 1.0.0
description: >-
  Apple HIG guidance for menu and button components including menus, context menus,
  dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons,
  pull-down buttons, disclosure controls, and standard buttons. Use this skill
  when the user says "how should my buttons look," "what goes in the menu bar,"
  "should I use a context menu or action sheet," "how do I design a toolbar," or
  asks about button design, menu design, context menu, toolbar, menu bar, action
  button, pop-up button, pull-down button, disclosure control, dock menu, edit
  menu, or any menu/button component layout and behavior. Cross-references:
  hig-components-search, hig-components-controls, hig-components-dialogs.
---

# 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

| Reference | Topic | Key content |
|---|---|---|
| [menus.md](references/menus.md) | General menu design | Item ordering, grouping, shortcuts |
| [context-menus.md](references/context-menus.md) | Context menus | Right-click, long press, secondary actions |
| [dock-menus.md](references/dock-menus.md) | Dock menus | macOS app-level actions, running state |
| [edit-menus.md](references/edit-menus.md) | Edit menus | Undo, copy, paste, standard items |
| [the-menu-bar.md](references/the-menu-bar.md) | Menu bar | macOS primary command interface, structure |
| [toolbars.md](references/toolbars.md) | Toolbars | Frequent actions, customization, placement |
| [buttons.md](references/buttons.md) | Buttons | System styles, sizing, affordance |
| [action-button.md](references/action-button.md) | Action button | Grouped secondary actions, toolbar use |
| [pop-up-buttons.md](references/pop-up-buttons.md) | Pop-up buttons | Mutually exclusive choice selection |
| [pull-down-buttons.md](references/pull-down-buttons.md) | Pull-down buttons | Action lists, no current selection |
| [disclosure-controls.md](references/disclosure-controls.md) | Disclosure controls | Progressive 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](https://raintree.technology) · [More developer tools](https://raintree.technology)*

© raintree-technology · MIT · raintree-technology/hig-doctor

Similar skills

Everything for Design →

From the same set15

hig-patterns A skill with interaction patterns from Apple's Human Interface Guidelines: onboarding, loading, modality, notifications, search. Useful when you design UX for an Apple app. CX Codex +1 685installs hig-platforms Provides Apple Human Interface Guidelines for multi-platform design across iOS, iPadOS, macOS, tvOS, visionOS, and watchOS. Helpful when adapting an app to another Apple device. CX Codex +1 666installs hig-components-controls Applies Apple HIG principles to pickers, toggles, text fields, and inputs. Guides control selection, state behavior, and VoiceOver accessibility. CX Codex +1 655installs hig-components-dialogs Provides Apple Human Interface Guidelines for alerts, sheets, popovers, and digit entry views. Helps pick the right modal UI pattern across iOS, iPadOS, macOS, and visionOS. CX Codex +1 647installs hig-components-content Provides Apple Human Interface Guidelines for content components like charts and collections. It helps choose standard controls across Apple platforms. CX Codex +1 641installs hig-components-status Provides Apple Human Interface Guidelines for progress indicators and status bars. Useful when building interfaces for iOS and watchOS. CX Codex +1 636installs hig-components-search Tells your agent how to design search, paging and breadcrumbs the Apple HIG way. Useful while you are still sketching navigation for an iOS or macOS app. CX Codex +1 634installs hig-inputs A skill that feeds your agent Apple HIG guidance on input: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, focus. CX Codex +1 633installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor