name: ios-hig-design
description: Design native iOS apps following Apple's Human Interface Guidelines. Use this skill when building iPhone/iPad interfaces, creating SwiftUI/UIKit components, validating iOS design compliance, or ensuring accessibility. Covers layout, typography, navigation, components, gestures, colors, and platform conventions.
license: MIT

iOS Human Interface Guidelines Design Skill

This skill guides creation of native iOS app interfaces that feel intuitive, consistent, and aligned with Apple's design philosophy.

Core Design Principles

Apple's iOS design philosophy rests on three foundational principles:

1. Clarity

Every element must be legible and purposeful. Typography, iconography, and spacing communicate hierarchy and focus.

2. Deference

The interface should never overshadow the content. The UI exists to support user tasks, not distract from them.

3. Depth

Layering, transitions, and realistic motion provide hierarchy and spatial relationships.

Screen Sizes & Layout

iPhone Screen Sizes (Design Points)

Best Practice: Design for smaller screens first (375pt width).

Page Layout Structure

┌─────────────────────────────────┐
│         Status Bar (59pt)       │
├─────────────────────────────────┤
│         Nav Bar Row 1 (44pt)    │
├─────────────────────────────────┤
│         Nav Bar Row 2 (58pt)    │  ← Large title (optional)
├─────────────────────────────────┤
│         Content Area            │
├─────────────────────────────────┤
│         Tab Bar (49pt)          │
├─────────────────────────────────┤
│       Home Indicator (34pt)     │
└─────────────────────────────────┘

Safe Areas

Critical: UI components must not overlap with hardware features (notch, Dynamic Island, home indicator).

VStack { Text("Content") }  // Default: respects safe area

VStack { Color.blue }.ignoresSafeArea()  // Extend beyond

Quick Reference: Component Spacing

Touch Target Min:     44 × 44pt
Screen Edge Margin:   16-20pt
List Row Height:      44pt minimum
Standard Spacing:     8 / 16 / 24pt

Common Pitfalls

Don't:
- Override standard gestures (swipe back, pull refresh)
- Use touch targets smaller than 44pt
- Ignore safe areas
- Force Android patterns (top tab bar, hamburger menus)
- Neglect Dark Mode
- Use low contrast text

Do:
- Use native components
- Test on real devices
- Support Dynamic Type
- Test with VoiceOver enabled
- Preview in both light and dark modes

Detailed Reference Files

• references/typography.md — Text styles, font sizes, Dark Mode typography
• references/navigation.md — Tab bar, navigation bar, modals, back navigation
• references/components.md — Buttons, lists, input controls, touch targets
• references/colors-depth.md — Semantic colors, Dark Mode, contrast ratios
• references/gestures.md — Standard gestures, haptics, animations
• references/accessibility.md — VoiceOver, Dynamic Type, checklist
• references/app-icons.md — Icon sizes, shape, guidelines

Resources

• Apple Human Interface Guidelines
• SF Symbols
• Apple Design Resources (Figma/Sketch)
• WWDC Design Sessions