Agent Skills: iOS App Design Guidelines

iOS App Design Guidelines

Apple Human Interface Guidelines + iOS 26 Liquid Glass design system reference.

Quick Reference (Priority Order)

CRITICAL - Must Follow

| Rule | Impact | Reference | |------|--------|-----------| | Liquid Glass adoption | Visual consistency with iOS 26 | liquid-glass.md | | Navigation patterns | Usability, platform conventions | navigation.md | | Safe areas & layout | Content visibility, device compat | layout.md | | Accessibility | Inclusivity, App Store compliance | accessibility.md |

HIGH - Strongly Recommended

| Rule | Impact | Reference | |------|--------|-----------| | Typography & Dynamic Type | Readability, user preference | typography.md | | Color system & themes | Visual coherence, dark mode | color-and-theme.md | | SF Symbols & icons | Platform-native feel | icons-and-imagery.md |

MEDIUM - Recommended

| Rule | Impact | Reference | |------|--------|-----------| | Motion & animation | Polish, perceived performance | motion.md | | Haptics & feedback | Tactile experience | haptics-and-feedback.md |

iOS 26 Liquid Glass - Key Principles

Three foundational pillars of iOS 26's design system:

1. Content Leads

Controls float above content using translucent glass layers. Content is never obscured by opaque chrome. The UI recedes; the user's content advances.

2. Concentricity

UI elements echo the rounded geometry of Apple hardware — rounded corners, circular buttons, pill shapes. Software and hardware share a unified visual rhythm.

3. Fluid Responsiveness

Elements dynamically adapt: tab bars shrink on scroll, glass refracts surrounding colors, controls morph contextually. Nothing is static.

Quick Decision Tree

iOS Design Issue?
├── Building navigation?
│   ├── Top-level sections → Tab Bar (≤5 tabs)
│   ├── Hierarchical drill-down → NavigationStack
│   ├── Focused task / decision → Modal (.sheet, .fullScreenCover)
│   └── Secondary actions → Toolbar items
├── Adopting Liquid Glass?
│   ├── Tab bar / toolbar → Use system defaults, remove custom backgrounds
│   ├── Custom controls → Apply .glassEffect modifier
│   ├── App icon → Use Icon Composer, multi-layer design
│   └── Existing solid chrome → Replace with system materials
├── Typography choices?
│   ├── Body text → San Francisco, support Dynamic Type
│   ├── Display / title → SF Pro Rounded or system serif
│   └── Fixed-size text → Almost never correct, justify carefully
├── Color decisions?
│   ├── Semantic colors → Use system colors (label, secondaryLabel, etc.)
│   ├── Brand accent → Tint color, one dominant hue
│   ├── Backgrounds → System background + materials, not hardcoded
│   └── Dark mode → Must work; use adaptive colors
├── Layout issues?
│   ├── Content clipped → Check safe area insets
│   ├── Landscape broken → Use GeometryReader / adaptive layout
│   └── iPad / large screen → Use NavigationSplitView, responsive columns
├── Accessibility?
│   ├── Text too small → Support Dynamic Type (all text categories)
│   ├── Low contrast → Check against WCAG AA (4.5:1 body, 3:1 large)
│   ├── VoiceOver → Add accessibility labels, traits, hints
│   └── Reduce Motion → Provide alternative to animations
└── Performance feel?
    ├── Janky scrolling → Lazy containers, async image loading
    ├── Slow transitions → Use matched geometry, spring animations
    └── Unresponsive taps → Haptic feedback, immediate visual response

Design Aesthetics for iOS

DO

• Embrace depth and translucency — Liquid Glass, vibrancy, materials
• Use system components — they automatically adopt Liquid Glass
• Design for multiple appearances — light, dark, tinted, high contrast
• Let content breathe — generous spacing, clear hierarchy
• Use SF Symbols — consistent with system, support Dynamic Type scaling
• Design for touch — minimum 44pt tap targets
• Use platform idioms — swipe-to-delete, pull-to-refresh, long press menus

DON'T

• Don't fight the platform — custom tab bars that break expected behavior
• Don't use opaque chrome — solid navigation bars feel dated in iOS 26
• Don't ignore Dynamic Type — fixed font sizes break accessibility
• Don't hardcode colors — use semantic system colors for theme adaptation
• Don't replicate Android/web patterns — hamburger menus, FABs, bottom sheets as primary nav
• Don't over-customize — heavy custom styling that loses Liquid Glass coherence
• Don't use thin/ultralight fonts for body — San Francisco is optimized at regular/medium weights
• Don't put critical actions in hard-to-reach areas — bottom of screen is easier than top for one-handed use

Reference Files

| File | Content | |------|---------| | liquid-glass.md | Liquid Glass material, modifiers, adoption strategy | | navigation.md | Tab bars, navigation stacks, modals, search | | layout.md | Safe areas, spacing, adaptive layout, iPad | | typography.md | San Francisco, Dynamic Type, text styles | | color-and-theme.md | System colors, dark mode, materials, vibrancy | | icons-and-imagery.md | SF Symbols, app icons, Icon Composer | | motion.md | Spring animations, transitions, matched geometry | | accessibility.md | VoiceOver, Dynamic Type, contrast, Reduce Motion | | haptics-and-feedback.md | Haptic engine, feedback patterns |

Search rules: grep -l "keyword" references/