mobile-ios-design
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
By wshobson · 21,781 installs
npx skills add wshobson/agents --skill mobile-ios-design
Source repository · Upstream listing
iOS Mobile Design
Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.
When to Use This Skill
Designing iOS app interfaces following Apple HIG
Building SwiftUI views and layouts
Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
Creating adaptive layouts for iPhone and iPad
Using SF Symbols and system typography
Building accessible iOS interfaces
Implementing iOS specific gestures and interactions
Designing for Dynamic Type and Dark Mode
Core Concepts
1. Human Interface Guidelines Principles
Clarity : Content is legible, icons are precise, adornments are subtle
Deference : UI helps users understand content without competing with it
Depth : Visual layers and motion convey hierarchy and enable navigation
Platform Considerations:
iOS : Touch first, compact displays, portrait orientation
iPadOS : Larger canvas, multitasking, pointer support
visionOS : Spatial computing, eye/hand input
2. SwiftUI Layout System
Stack Based Layouts:
Grid Layouts:
3. Navigation Patterns
NavigationStack (iOS 16+):
TabView (iOS 18+):
4. System Integration
SF Symbols:
Dynamic Type:
5. Visual Design
Colors and Materials:
Shadows and Depth:
Quick Start Component
Best Practices
1. Use Semantic Colors : Always use .primary , .secondary , .background for automatic light/dark mode support
2. Embrace SF Symbols : Use system symbols for consistency and automatic accessibility
3. Support Dynamic Type : Use semantic fonts ( .body , .headline ) instead of fixed sizes
4. Add Accessibility : Include .accessibilityLabel() and .accessibilityHint() modifiers
5. Use Safe Areas : Respect safeAreaInset and avoid hardcoded padding at screen edges
6. Implement State Restoration : Use @SceneStorage for preserving user state
7. Support iPad Multitasking : Design for split view and slide over
8. Test on Device : Simulator doesn't capture full haptic and performance experience
Common Issues
Layout Breaking : Use .fixedSize() sparingly; prefer flexible layouts
Performance Issues : Use LazyVStack / LazyHStack for long scrolling lists
Navigation Bugs : Ensure NavigationLink values are Hashable
Dark Mode Problems : Avoid hardcoded colors; use semantic or asset catalog colors
Accessibility Failures : Test with VoiceOver enabled
Memory Leaks : Watch for strong reference cycles in closures