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.
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/hig-components-menus/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/hig-components-menus/
1Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a codex2Manually: put the files in place
.agents/skills/hig-components-menus/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a cursor2Manually: put the files in place
.cursor/skills/hig-components-menus/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install raintree-technology/hig-doctor hig-components-menus2Manually: put the files in place
.github/skills/hig-components-menus/SKILL.md1Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a gemini-cli2Platform CLI
gemini skills install https://github.com/raintree-technology/hig-doctor --path skills/hig-components-menusManually: put the files in place
.devin/skills/hig-components-menus/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-menus -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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