hig-components-dialogs — скилл для Claude Code: что делает
Скилл подсказывает правила Apple Human Interface Guidelines для модальных окон, алертов, шторок и полей ввода цифр. Пригодится при проектировании UI под iOS, iPadOS, macOS и visionOS.
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a claude-codeЧто делает hig-components-dialogs
Скилл помогает выбрать подходящий тип отображения: alert, sheet, action sheet или popover. Ассистент оценивает необходимость модальности. Лишние блокировки экрана раздражают пользователей, поэтому скилл часто советует встроенные элементы или отмену действия вместо всплывающего окна. Если модальность оправдана, ассистент подбирает формулировки для кнопок и правила закрытия.
В справочник входят пять компонентов: алерты, шторки, popover, action sheet и поля ввода кода. Для опасных действий скилл требует конкретные глаголы вроде «Удалить» с красным шрифтом. Обычная надпись «OK» исключается. Итоговый ответ содержит обоснование выбора, требования к текстам и альтернативы без всплывающих окон.
Перед началом диалога скилл ищет файл .claude/apple-design-context.md. Если файла нет, ассистент запросит платформу и блокирующий характер окна вручную. Это важно учитывать заранее. Поведение одного компонента заметно меняется при переходе с iPhone на iPad, Mac или visionOS.
Какие задачи решает
- выбрать между alert, action sheet, popover и sheet по гайдлайнам Apple
- составить понятный текст для диалога подтверждения с кнопками действий
- оформить ввод цифрового PIN-кода с автопереходом и вставкой
- заменить навязчивые модальные окна на встроенный UI или отмену действия
Примеры запросов агенту
- Что лучше использовать для подтверждения удаления: alert или sheet?
- Как оформить окно ввода проверочного кода по гайдлайнам Apple?
- Когда на iPad и Mac стоит открывать popover вместо шторки?
Как установить hig-components-dialogs
1Через Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a claude-code2Вручную: положить файлы
~/.claude/skills/hig-components-dialogs/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hig-components-dialogs/
1Через Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a codex2Вручную: положить файлы
.agents/skills/hig-components-dialogs/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a cursor2Вручную: положить файлы
.cursor/skills/hig-components-dialogs/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install raintree-technology/hig-doctor hig-components-dialogs2Вручную: положить файлы
.github/skills/hig-components-dialogs/SKILL.md1Через Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a gemini-cli2Командой платформы
gemini skills install https://github.com/raintree-technology/hig-doctor --path skills/hig-components-dialogsВручную: положить файлы
.devin/skills/hig-components-dialogs/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о hig-components-dialogs
Как установить hig-components-dialogs в Claude Code?
Выполните команду npx skills add raintree-technology/hig-doctor --skill hig-components-dialogs -a claude-code. Она загрузит файлы скилла в окружение Claude Code.
Что делает скилл hig-components-dialogs?
Он предоставляет правила Apple HIG для алертов, шторок, всплывающих меню popover, action sheets и полей ввода цифр. Скилл помогает выбрать подходящий компонент, составить текст кнопок и продумать альтернативы без блокировки интерфейса.
Зачем скиллу файл apple-design-context.md?
Скилл ищет файл .claude/apple-design-context.md перед тем, как задавать уточняющие вопросы. Если контекст проекта сохранён в этом файле, Claude Code сразу формирует ответ без дополнительных расспросов.
Исходный текст
SKILL.md · MIT
---
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
| Reference | Topic | Key content |
|---|---|---|
| [alerts.md](references/alerts.md) | Alerts | Button ordering, title/message text, confirmation, destructive actions |
| [action-sheets.md](references/action-sheets.md) | Action sheets | Multiple actions, cancel option, destructive handling |
| [popovers.md](references/popovers.md) | Popovers | Non-modal, dismiss on tap outside, iPad/Mac |
| [sheets.md](references/sheets.md) | Sheets | Modal task, context preservation |
| [digit-entry-views.md](references/digit-entry-views.md) | Digit entry | PIN 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](https://raintree.technology) · [More developer tools](https://raintree.technology)*
© raintree-technology · MIT · raintree-technology/hig-doctor