Mobile Ios Design

When to use this skill

Use Mobile Ios Design when an AI agent needs a reusable SKILL.md workflow for this job: 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.

When not to use it

Skip Mobile Ios Design when the task is outside the creativity category, or when a more specific skill in this directory already covers the same workflow with clearer triggers.

How to install

1. Personal install: create ~/.claude/skills/mobile-ios-design/SKILL.md (and any bundled scripts) so Claude Code, Claude Desktop, and compatible agents can load it in every project.
2. Project install: commit the same folder at .claude/skills/mobile-ios-design/ so teammates get the skill with the repo.
3. Restart the agent session after copying files so it re-scans the skills directory, then ask for the task in words that match the skill description.

Full install guide for Claude, Cursor, and Codex

What this skill does

# 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:**

```swift // Vertical stack with alignment VStack(alignment: .leading, spacing: 12) { Text("Title") .font(.headline) Text("Subtitle") .font(.subheadline) .foregroundStyle(.secondary) }

// Horizontal stack with flexible spacing HStack { Image(systemName: "star.fill") Text("Featured") Spacer() Text("View All") .foregroundStyle(.blue) } ```

**Grid Layouts:**

```swift // Adaptive grid that fills available width LazyVGrid(columns: [ GridItem(.adaptive(minimum: 150, maximum: 200)) ], spacing: 16) { ForEach(items) { item in ItemCard(item: item) } }

// Fixed column grid LazyVGrid(columns: [ GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()) ], spacing: 12) { ForEach(items) { item in ItemThumbnail(item: item) } } ```

### 3. Navigation Patterns

**NavigationStack (iOS 16+):**

```swift struct ContentView: View { @State private var path = NavigationPath()

var body: some View { NavigationStack(path: $path) { List(items) { item in NavigationLink(value: item) { ItemRow(item: item) } } .navigationTitle("Items") .navigationDestination(for: Item.self) { item in ItemDetailView(item: item) } } } } ```

**TabView (iOS 18+):**

```swift struct MainTabView: View { @State private var selectedTab = 0

var body: some View { TabView(selection: $selectedTab) { Tab("Home", systemImage: "house", value: 0) { HomeView() }

Tab("Search", systemImage: "magnifyingglass", value: 1) { SearchView() }

Tab("Profile", systemImage: "person", value: 2) { ProfileView() } } } } ```

### 4. System Integration

**SF Symbols:**

```swift // Basic symbol Image(systemName: "heart.fill") .foregroundStyle(.red)

// Symbol with rendering mode Image(systemName: "cloud.sun.fill") .symbolRenderingMode(.multicolor)

// Variable symbol (iOS 16+) Image(systemName: "speaker.wave.3.fill", variableValue: volume)

// Symbol effect (iOS 17+) Image(systemName: "bell.fill") .symbolEffect(.bounce, value: notificationCount) ```

**Dynamic Type:**

```swift // Use semantic fonts Text("Headline") .font(.headline)

Text("Body text that scales with user preferences") .font(.body)

// Custom font that respects Dynamic Type Text("Custom") .font(.custom("Avenir", size: 17, relativeTo: .body)) ```

### 5. Visual Design

**Colors and Materials:**

```swift // Semantic colors that adapt to light/dark mode Text("Primary") .foregroundStyle(.primary) Text("Secondary") .foregroundStyle(.secondary)

// System materials for blur effects Rectangle() .fill(.ultraThinMaterial) .frame(height: 100)

// Vibrant materials for overlays Text("Overlay") .padding() .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12)) ```

**Shadows and Depth:**

```swift // Standard card shadow RoundedRectangle(cornerRadius: 16) .fill(.background) .shadow(color: .black.opacity(0.1), radius: 8, y: 4)

// Elevated appearance .shadow(radius: 2, y: 1) .shadow(radius: 8, y: 4) ```

## Quick Start Component

```swift import SwiftUI

struct FeatureCard: View { let title: String let description: String let systemImage: String

var body: some View { HStack(spacing: 16) { Image(systemName: systemImage) .font(.title) .foregroundStyle(.blue) .frame(width: 44, height: 44) .background(.blue.opacity(0.1), in: Circle())

VStack(alignment: .leading, spacing: 4) { Text(title) .font(.headline) Text(description) .font(.subheadline) .foregroundStyle(.secondary) .lineLimit(2) }

Spacer()

Image(systemName: "chevron.right") .foregroundStyle(.tertiary) } .padding() .background(.background, in: RoundedRectangle(cornerRadius: 12)) .shadow(color: .black.opacity(0.05), radius: 4, y: 2) } } ```

## 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

Intended uses

• 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