AgentSkillsCN

hig-components-dialogs

Apple HIG 指南中关于展示组件的指导，包括警示框、操作表、弹出框、表单以及数字输入视图。当用户说“我应该使用警示框还是表单？”“我该如何展示确认对话框？”“我什么时候该使用弹出框？”“我的模态窗口让用户感到厌烦？”或者询问警示框设计、操作表、弹出框、表单、模态窗口、对话框、数字输入、确认对话框、警告对话框、模态展示、非模态内容、破坏性操作确认，或叠加式 UI 模式时，可选用此技能。交叉参考：HIG 组件菜单、HIG 组件控件、HIG 组件搜索、HIG 数据可视化模式。

SKILL.md
--- frontmatter
name: hig-components-dialogs
version: 1.0.0
description: >-
  Apple HIG guidance for presentation components including alerts, action sheets,
  popovers, sheets, and digit entry views. Use this skill when the user says
  "should I use an alert or a sheet," "how do I show a confirmation dialog,"
  "when should I use a popover," "my modals are annoying users," or asks about
  alert design, action sheet, popover, sheet, modal, dialog, digit entry,
  confirmation dialog, warning dialog, modal presentation, non-modal content,
  destructive action confirmation, or overlay UI patterns. Cross-references:
  hig-components-menus, hig-components-controls, hig-components-search,
  hig-patterns.

Apple HIG: Presentation Components

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

Key Principles

  1. •

    Alerts: sparingly, for critical situations. Errors needing attention, destructive action confirmations, or information requiring acknowledgment. They interrupt flow and demand a response.

  2. •

    Sheets: focused tasks that maintain context. Slides in from the edge (or attaches to a window on macOS). Use for creating items, editing settings, multi-step forms.

  3. •

    Popovers: non-modal on iPad and Mac. Appear next to the trigger element, dismissed by tapping outside. For additional information, options, or controls without taking over the screen.

  4. •

    Action sheets: choosing among actions. Present when picking from multiple actions, especially if one is destructive. iPhone: slide up from bottom. iPad: appear as popovers.

  5. •

    Minimize interruptions. Before reaching for a modal, consider inline presentation or making the action undoable instead.

  6. •

    Concise, actionable alert text. Short descriptive title. Brief message body if needed. Button labels should be specific verbs ("Delete", "Save"), not "OK".

  7. •

    Mark destructive actions clearly. Destructive button style (red text). Place destructive buttons where users are less likely to tap reflexively.

  8. •

    Provide a cancel option for alerts and action sheets with multiple actions. On action sheets, cancel appears at the bottom, separated.

  9. •

    Digit entry: focused and accessible. Appropriately sized input fields, automatic advancement between digits, support for paste and autofill.

  10. •

    Adapt presentation to platform. The same interaction may use different components on iPhone, iPad, Mac, and visionOS.

Reference Index

ReferenceTopicKey content
alerts.mdAlertsButton ordering, title/message text, confirmation, destructive actions
action-sheets.mdAction sheetsMultiple actions, cancel option, destructive handling
popovers.mdPopoversNon-modal, dismiss on tap outside, iPad/Mac
sheets.mdSheetsModal task, context preservation
digit-entry-views.mdDigit entryPIN input, autofill, auto-advance

Output Format

  1. •Recommended presentation type with rationale and why alternatives are less suitable.
  2. •Content guidelines -- title, message, button labels per Apple's tone and brevity rules.
  3. •Dismiss behavior -- how the user dismisses and what happens (save, discard, cancel).
  4. •Alternatives -- when the scenario might not need a modal at all (inline feedback, undo, progressive disclosure).

Questions to Ask

  1. •What information or action does the presentation need?
  2. •Blocking or non-blocking?
  3. •Which platforms?
  4. •How often does this appear?

Related Skills

  • •hig-components-menus -- Buttons and toolbar items triggering presentations
  • •hig-components-controls -- Input controls within sheets and popovers
  • •hig-components-search -- Search and navigation within presented views
  • •hig-patterns -- Modality, interruptions, user flow management
  • •hig-foundations -- Color, typography, layout for presentation components

Built by Raintree Technology · More developer tools