hig-components-dialogs by raintree-technology/apple-hig-skills
npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-dialogs提问前请检查 .claude/apple-design-context.md。使用现有上下文,仅询问未涵盖的信息。
警告框:谨慎使用,用于关键情况。 需要关注的错误、破坏性操作确认或需要确认的信息。它们会中断流程并要求用户响应。
表单:保持上下文关系的聚焦任务。 从边缘滑入(或在 macOS 上附加到窗口)。用于创建项目、编辑设置、多步骤表单。
弹出层:在 iPad 和 Mac 上为非模态。 出现在触发元素旁边,点击外部区域可关闭。用于提供额外信息、选项或控件,而不会占据整个屏幕。
操作列表:在多个操作中选择。 当需要从多个操作中选择时呈现,特别是其中一个是破坏性操作时。iPhone:从底部向上滑动。iPad:以弹出层形式出现。
最小化中断。 在使用模态组件之前,考虑内联呈现或使操作可撤销。
简洁、可操作的警告文本。 简短的描述性标题。如果需要,正文消息要简短。按钮标签应是具体的动词(如“删除”、“保存”),而不是“确定”。
清晰标记破坏性操作。 破坏性按钮样式(红色文本)。将破坏性按钮放在用户不太可能下意识点击的位置。
为包含多个操作的警告框和操作列表提供取消选项。 在操作列表中,取消按钮出现在底部,并与其他选项分隔开。
数字输入:聚焦且易于访问。 适当大小的输入字段,数字间自动跳转,支持粘贴和自动填充。
根据平台调整呈现方式。 相同的交互在 iPhone、iPad、Mac 和 visionOS 上可能使用不同的组件。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 参考 | 主题 | 核心内容 |
|---|---|---|
| alerts.md | 警告框 | 按钮排序、标题/消息文本、确认、破坏性操作 |
| action-sheets.md | 操作列表 | 多个操作、取消选项、破坏性操作处理 |
| popovers.md | 弹出层 | 非模态、点击外部关闭、iPad/Mac |
| sheets.md | 表单 | 模态任务、上下文保持 |
| digit-entry-views.md | 数字输入 | PIN 码输入、自动填充、自动跳转 |
由 Raintree Technology 构建 · 更多开发者工具
每周安装量
81
代码仓库
GitHub 星标数
31
首次出现
2026年2月15日
安全审计
安装于
opencode79
github-copilot77
codex76
cursor76
kimi-cli75
amp75
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Alerts: sparingly, for critical situations. Errors needing attention, destructive action confirmations, or information requiring acknowledgment. They interrupt flow and demand a response.
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.
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.
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.
Minimize interruptions. Before reaching for a modal, consider inline presentation or making the action undoable instead.
Concise, actionable alert text. Short descriptive title. Brief message body if needed. Button labels should be specific verbs ("Delete", "Save"), not "OK".
Mark destructive actions clearly. Destructive button style (red text). Place destructive buttons where users are less likely to tap reflexively.
Provide a cancel option for alerts and action sheets with multiple actions. On action sheets, cancel appears at the bottom, separated.
Digit entry: focused and accessible. Appropriately sized input fields, automatic advancement between digits, support for paste and autofill.
Adapt presentation to platform. The same interaction may use different components on iPhone, iPad, Mac, and visionOS.
| Reference | Topic | Key content |
|---|---|---|
| alerts.md | Alerts | Button ordering, title/message text, confirmation, destructive actions |
| action-sheets.md | Action sheets | Multiple actions, cancel option, destructive handling |
| popovers.md | Popovers | Non-modal, dismiss on tap outside, iPad/Mac |
| sheets.md | Sheets | Modal task, context preservation |
| digit-entry-views.md | Digit entry | PIN input, autofill, auto-advance |
Built byRaintree Technology · More developer tools
Weekly Installs
81
Repository
GitHub Stars
31
First Seen
Feb 15, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode79
github-copilot77
codex76
cursor76
kimi-cli75
amp75
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装