Mobile Ios Design
Apply Apple Human Interface Guidelines in SwiftUI with standard margins, safe areas, and adaptive layouts for indie iOS apps.
Overview
Mobile iOS Design is an agent skill for the Build phase that applies iOS Human Interface Guidelines spacing, safe areas, and adaptive SwiftUI layouts.
Install
npx skills add https://github.com/wshobson/agents --skill mobile-ios-designWhat is this skill?
- Standard HIG margins: 16pt standard, 8pt compact, 24pt large with EdgeInsets presets
- Safe area handling with ScrollView, lazy stacks, and bottom safeAreaInset action strips
- Adaptive layouts driven by horizontalSizeClass for compact vs regular grids
- SwiftUI snippets for materials, bordered button styles, and floating confirm/cancel rows
- Patterns aligned to iOS Human Interface Guidelines spacing and structure
- 3 standard margin tiers documented (8pt, 16pt, 24pt)
- 3 EdgeInsets presets (standard, listRow, card)
Adoption & trust: 16.2k installs on skills.sh; 36.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your SwiftUI screens use arbitrary padding and ignore safe areas, so the app feels un-native on iPhone and iPad.
Who is it for?
Indie builders shipping SwiftUI apps who want HIG defaults without rereading Apple’s full guideline docs each sprint.
Skip if: Android or cross-platform-only UI work, or teams needing brand-heavy custom design systems that intentionally break HIG spacing.
When should I use this skill?
Building or refining SwiftUI iOS screens that should follow Human Interface Guidelines for layout, spacing, safe areas, and adaptive width.
What do I get? / Deliverables
You implement HIG-consistent margins, safeAreaInset toolbars, and size-class-aware grids that read as standard iOS UI.
- HIG-aligned EdgeInsets and margin constants
- Safe-area-aware scroll layouts with bottom action insets
- Adaptive column grids for compact and regular width
Recommended Skills
Journey fit
HIG-aligned UI structure is implemented while building native iOS screens, placing the skill on the build shelf. Frontend subphase captures layout, spacing, and adaptive grid work rather than App Store launch or analytics.
How it compares
Layout and HIG pattern reference—not a full design system generator or Figma-to-code pipeline.
Common Questions / FAQ
Who is mobile-ios-design for?
Solo SwiftUI developers who want agent-guided Apple spacing, safe areas, and adaptive layouts while building iOS frontends.
When should I use mobile-ios-design?
During build/frontend when structuring lists, cards, and bottom actions, or early validate/prototype passes to avoid rework on margins and size classes.
Is mobile-ios-design safe to install?
It supplies UI code patterns only; review the Security Audits panel on this Prism page before installing any agent skill in your workflow.
SKILL.md
READMESKILL.md - Mobile Ios Design
# iOS Human Interface Guidelines Patterns ## Layout and Spacing ### Standard Margins and Padding ```swift // System standard margins private let standardMargin: CGFloat = 16 private let compactMargin: CGFloat = 8 private let largeMargin: CGFloat = 24 // Content insets following HIG extension EdgeInsets { static let standard = EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16) static let listRow = EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16) static let card = EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16) } ``` ### Safe Area Handling ```swift struct SafeAreaAwareView: View { var body: some View { ScrollView { LazyVStack(spacing: 16) { ForEach(items) { item in ItemRow(item: item) } } .padding(.horizontal) } .safeAreaInset(edge: .bottom) { // Floating action area HStack { Button("Cancel") { } .buttonStyle(.bordered) Spacer() Button("Confirm") { } .buttonStyle(.borderedProminent) } .padding() .background(.regularMaterial) } } } ``` ### Adaptive Layouts ```swift struct AdaptiveGridView: View { @Environment(\.horizontalSizeClass) private var sizeClass private var columns: [GridItem] { switch sizeClass { case .compact: return [GridItem(.flexible())] case .regular: return [ GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()) ] default: return [GridItem(.flexible())] } } var body: some View { ScrollView { LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } .padding() } } } ``` ## Typography Hierarchy ### System Font Styles ```swift // HIG-compliant typography scale struct Typography { // Titles static let largeTitle = Font.largeTitle.weight(.bold) // 34pt bold static let title = Font.title.weight(.semibold) // 28pt semibold static let title2 = Font.title2.weight(.semibold) // 22pt semibold static let title3 = Font.title3.weight(.semibold) // 20pt semibold // Headlines and body static let headline = Font.headline // 17pt semibold static let body = Font.body // 17pt regular static let callout = Font.callout // 16pt regular // Supporting text static let subheadline = Font.subheadline // 15pt regular static let footnote = Font.footnote // 13pt regular static let caption = Font.caption // 12pt regular static let caption2 = Font.caption2 // 11pt regular } ``` ### Custom Font with Dynamic Type ```swift extension Font { static func customBody(_ name: String) -> Font { .custom(name, size: 17, relativeTo: .body) } static func customHeadline(_ name: String) -> Font { .custom(name, size: 17, relativeTo: .headline) .weight(.semibold) } } // Usage Text("Custom styled text") .font(.customBody("Avenir Next")) ``` ## Color System ### Semantic Colors ```swift // Use semantic colors for automatic light/dark mode support extension Color { // Labels static let primaryLabel = Color.primary static let secondaryLabel = Color.secondary static let tertiaryLabel = Color(uiColor: .tertiaryLabel) // Backgrounds static let systemBackground = Color(uiColor: .systemBackground) static let secondaryBackground = Color(uiColor: .secondarySystemBackground) static let groupedBackground = Col