| name | ios-mobile-design-competency |
| description | Master Apple-standard iOS UI design and implementation across SwiftUI and UIKit. Use when designing or reviewing iOS screens to follow Human Interface Guidelines (HIG), build adaptive layouts, choose navigation patterns (NavigationStack/TabView/sheets or UINavigationController/UITabBarController), integrate SF Symbols/system typography/semantic colors, ensure Dark Mode + high-contrast support, and implement accessibility (VoiceOver, Dynamic Type, touch targets). |
iOS Mobile Design Competency
Use this skill to design and implement polished, native iOS UI that matches Apple conventions and stays compliant across:
- SwiftUI (declarative)
- UIKit (imperative)
Operating rules (fast)
- Prefer system defaults first: semantic colors, dynamic type styles, SF Symbols.
- Respect safe areas and touch targets (>= 44x44pt).
- Validate Dark Mode and Dynamic Type early (not at the end).
- Treat accessibility as a feature, not a pass.
Workflow
1) Clarify the UI contract
Capture, in 5 bullets:
- Screen purpose + primary action
- Information hierarchy (what’s most important?)
- Navigation entry/exit (push? tab? modal?)
- States (loading/empty/error)
- Accessibility expectations (labels, headings, focus order)
2) Pick the framework layer
- Use SwiftUI when you can (new screens, rapid iteration, composable UI).
- Use UIKit when needed (legacy app sections, fine-grained control, advanced collection layouts, specific integrations).
- Mixed is fine: embed via UIHostingController or UIViewControllerRepresentable.
3) Layout implementation checklist
SwiftUI
- Compose with
VStack/HStack/ZStack; use Spacer() intentionally.
- Prefer
LazyVGrid/LazyHGrid for collections.
- Use
GeometryReader only when necessary; avoid “layout hacks”.
- Use
.safeAreaInset / .ignoresSafeArea deliberately.
UIKit
- Prefer Auto Layout anchors +
NSLayoutConstraint.activate.
- Use
UIStackView for vertical/horizontal structure; constrain the stack, not every child.
- Pin to
safeAreaLayoutGuide.
4) Navigation patterns
- Hierarchical (push):
- SwiftUI:
NavigationStack + navigationDestination
- UIKit:
UINavigationController.pushViewController
- Tab-based:
- SwiftUI:
TabView
- UIKit:
UITabBarController
- Modal / sheet:
- SwiftUI:
.sheet / .fullScreenCover
- UIKit:
present(_:animated:) with appropriate modalPresentationStyle
5) System assets & typography
- SF Symbols:
- SwiftUI:
Image(systemName:)
- UIKit:
UIImage(systemName:)
- Configure scale/weight with symbol configuration when needed.
- Typography:
- Use semantic text styles (
.body, .headline, etc.) not fixed sizes.
- Ensure Dynamic Type is supported.
6) Theming & visual design
- Use semantic colors (
.systemBackground, .label, .secondaryLabel, .tint, etc.).
- Avoid hard-coded hex unless defining Asset Catalog colors properly.
- Keep elevation subtle; prefer system materials for blur.
7) Accessibility (A11y)
- Set labels, hints, and correct traits.
- Ensure logical focus order.
- Verify tap targets.
- Don’t rely on color alone to convey meaning.
Done criteria (ship checklist)
- Works on at least: small iPhone + large iPhone + iPad (or explicitly out-of-scope).
- Passes Dark Mode + increased contrast.
- Passes Dynamic Type (including largest sizes) without truncation of key content.
- VoiceOver: elements are discoverable, labeled, and navigable.
References
- For detailed snippets/patterns, read:
references/patterns.md.
