hig-components-dialogs

Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.

16 stars

Best use case

hig-components-dialogs is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.

Teams using hig-components-dialogs 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

$curl -o ~/.claude/skills/hig-components-dialogs/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/hig-components-dialogs/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/hig-components-dialogs/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How hig-components-dialogs Compares

Feature / Agenthig-components-dialogsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.

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: 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)*

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.

Related Skills

test-cotton-components

16
from diegosouzapw/awesome-omni-skill

Guide AI agents on testing Django Cotton components using django-cotton-bs5 pytest fixtures. Covers when to use cotton_render vs cotton_render_soup vs cotton_render_string vs cotton_render_string_soup, best practices for component testing, DOM assertions, context handling, and multi-component testing patterns. Use when writing or reviewing Cotton component tests.

pcf-code-components

16
from diegosouzapw/awesome-omni-skill

Understanding code components structure and implementation Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Next.js App Router & Server Components

16
from diegosouzapw/awesome-omni-skill

Build Next.js 15 applications using App Router, Server Components, Client Components, Server Actions, and streaming. Apply when creating pages, handling data fetching, implementing routes, or optimizing performance.

hig-components-system

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.

hig-components-search

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

hig-components-menus

16
from diegosouzapw/awesome-omni-skill

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...

hig-components-layout

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for layout and navigation components.

hig-components-content

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for content display components.

assembling-components

16
from diegosouzapw/awesome-omni-skill

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

architecting-components

16
from diegosouzapw/awesome-omni-skill

Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.

App Components

16
from diegosouzapw/awesome-omni-skill

Your approach to handling app components. Use this skill when working on files where app components comes into play.