hig-components-menus
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Best use case
hig-components-menus is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Teams using hig-components-menus should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/hig-components-menus/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How hig-components-menus Compares
| Feature / Agent | hig-components-menus | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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)* ## When to Use This skill is applicable to execute the workflow or actions described in the overview. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related Skills
figma-code-connect-components
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
hig-components-system
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
hig-components-search
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
hig-components-layout
Apple Human Interface Guidelines for layout and navigation components.
hig-components-dialogs
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
hig-components-controls
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
hig-components-content
Apple Human Interface Guidelines for content display components.
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
vercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.