PaperclipOrg
Claude Agent Skill · by Wshobson

Mobile Ios Design

This handles iOS interface design and SwiftUI implementation with a focus on Apple's Human Interface Guidelines. It covers navigation patterns like NavigationSt

Install
Terminal · npx
$npx skills add https://github.com/wshobson/agents --skill mobile-ios-design
Works with Paperclip

How Mobile Ios Design fits into a Paperclip company.

Mobile Ios Design drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md259 lines
Expand
---name: mobile-ios-designdescription: 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.--- # 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 alignmentVStack(alignment: .leading, spacing: 12) {    Text("Title")        .font(.headline)    Text("Subtitle")        .font(.subheadline)        .foregroundStyle(.secondary)} // Horizontal stack with flexible spacingHStack {    Image(systemName: "star.fill")    Text("Featured")    Spacer()    Text("View All")        .foregroundStyle(.blue)}``` **Grid Layouts:** ```swift// Adaptive grid that fills available widthLazyVGrid(columns: [    GridItem(.adaptive(minimum: 150, maximum: 200))], spacing: 16) {    ForEach(items) { item in        ItemCard(item: item)    }} // Fixed column gridLazyVGrid(columns: [    GridItem(.flexible()),    GridItem(.flexible()),    GridItem(.flexible())], spacing: 12) {    ForEach(items) { item in        ItemThumbnail(item: item)    }}``` ### 3. Navigation Patterns **NavigationStack (iOS 16+):** ```swiftstruct 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+):** ```swiftstruct 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 symbolImage(systemName: "heart.fill")    .foregroundStyle(.red) // Symbol with rendering modeImage(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 fontsText("Headline")    .font(.headline) Text("Body text that scales with user preferences")    .font(.body) // Custom font that respects Dynamic TypeText("Custom")    .font(.custom("Avenir", size: 17, relativeTo: .body))``` ### 5. Visual Design **Colors and Materials:** ```swift// Semantic colors that adapt to light/dark modeText("Primary")    .foregroundStyle(.primary)Text("Secondary")    .foregroundStyle(.secondary) // System materials for blur effectsRectangle()    .fill(.ultraThinMaterial)    .frame(height: 100) // Vibrant materials for overlaysText("Overlay")    .padding()    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))``` **Shadows and Depth:** ```swift// Standard card shadowRoundedRectangle(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 ```swiftimport 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 support2. **Embrace SF Symbols**: Use system symbols for consistency and automatic accessibility3. **Support Dynamic Type**: Use semantic fonts (`.body`, `.headline`) instead of fixed sizes4. **Add Accessibility**: Include `.accessibilityLabel()` and `.accessibilityHint()` modifiers5. **Use Safe Areas**: Respect `safeAreaInset` and avoid hardcoded padding at screen edges6. **Implement State Restoration**: Use `@SceneStorage` for preserving user state7. **Support iPad Multitasking**: Design for split view and slide over8. **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