ios-hig-design — Skills — getagentictools

What it does

Design for the smallest screen first (375pt width, iPhone SE)

Safe areas protect content from the notch, Dynamic Island, and home indicator---never place interactive elements under them

Standard content margins: 16-20pt from screen edges; spacing increments: 8 / 16 / 24pt

Minimum touch target and list row height: 44pt

Use VStack { }, which respects safe areas by default

Use .ignoresSafeArea() only for backgrounds and decoration, never interactive content

Test on multiple sizes, including iPhone SE and Pro Max

Requirements & configuration

Dark Mode inverts text colors and shifts backgrounds darker while keeping relative hierarchy; accent colors need lower brightness and higher saturation to pop

Destructive actions use red and require confirmation when irreversible

Every interactive element needs an .accessibilityLabel; use .accessibilityValue for state and .accessibilityHint for effect

The eight framework sections above each link their deep-dive reference inline at the point of need. Three further references cover system surfaces that sit outside the on-screen UI:

ios hig design

Source

Repository: https://github.com/wondelai/skills

ios-hig-design FAQ

What does the ios-hig-design skill do?

Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG compliance", "SF Symbols", "haptic feedback", "iOS accessibility", "make my app feel native", or "follow Apple design guidelines". Also trigger when building tab bars, navigation stacks, sheets, or modals for iOS, implementing dark mode, or adapting layouts across screen sizes. Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things. Design for the smallest screen first (375pt width, iPhone SE) Safe areas protect content from the notch, Dynamic Island, and home indicator---never place interactive elements under them

What does ios-hig-design require?

Dark Mode inverts text colors and shifts backgrounds darker while keeping relative hierarchy; accent colors need lower brightness and higher saturation to pop Destructive actions use red and require confirmation when irreversible Every interactive element needs an .accessibilityLabel; use .accessibilityValue for state and .accessibilityHint for effect The eight framework sections above each link their deep-dive reference inline at the point of need. Three further references cover system surfaces that sit outside the on-screen UI:

How do I install ios-hig-design?

Run: npx -y skills add https://github.com/wondelai/skills --skill ios-hig-design --agent claude-code — the source lives at github.com/wondelai/skills.

Maintain ios-hig-design?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[ios-hig-design on getagentictools](https://getagentictools.com/skills/wondelai-skills-ios-hig-design?ref=badge)

npx agentictools info skills/wondelai-skills-ios-hig-design

The second line is the CLI lookup for this page — handy in READMEs and docs.