mobile-ios-design_skill

This skill helps you design polished iOS interfaces and SwiftUI layouts aligned with Apple's HIG for accessible, adaptive apps.

Python

28.7k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill wshobson/agents --skill mobile-ios-design

SKILL.md7.2 KB

Overview

This skill teaches iOS Human Interface Guidelines and SwiftUI patterns for building native, polished iOS apps. It focuses on clarity, deference, and depth while enabling adaptive layouts, accessible components, and platform-consistent navigation. Use it to design, implement, and validate iOS interfaces that feel native on iPhone and iPad.

How this skill works

The skill inspects UI decisions and suggests SwiftUI idioms, layout structures, and system integrations (SF Symbols, semantic colors, Dynamic Type). It recommends navigation patterns (NavigationStack, TabView, sheets), performance techniques (lazy stacks, grid patterns), and accessibility improvements. It also flags common pitfalls like hardcoded colors, navigation bugs, and layout breakage.

When to use it

Designing UI that follows Apple Human Interface Guidelines
Implementing SwiftUI views, stacks, grids, and cards
Creating adaptive layouts for iPhone, iPad, and multitasking
Ensuring accessibility, Dynamic Type, and Dark Mode support
Integrating SF Symbols and semantic system colors
Diagnosing layout, performance, or navigation issues

Best practices

Prefer semantic fonts (.body, .headline) and system colors (.primary, .background) to support Dynamic Type and Dark Mode
Use stack- and grid-based layouts (VStack, HStack, LazyVGrid) instead of fixed frames for adaptability
Embrace SF Symbols for consistent iconography and automatic accessibility behavior
Respect safe areas and use safeAreaInset instead of hardcoded edge padding
Add accessibility modifiers (.accessibilityLabel, .accessibilityHint) and test with VoiceOver
Use lazy containers for long lists and @SceneStorage for simple state restoration

Example use cases

Convert a UIKit screen to SwiftUI using NavigationStack and adaptive LazyVGrid
Design a reusable FeatureCard component with semantic styling and accessibility labels
Fix a layout that breaks at large Dynamic Type sizes by switching to flexible stacks
Implement TabView-based app structure with stateful selection and deep-link restoration
Optimize a long-scrolling feed by replacing VStack with LazyVStack and onAppear loading

FAQ

Use .font(.custom("FontName", size: baseSize, relativeTo: .body)) so the custom font scales according to user preferences.

When should I use NavigationStack instead of NavigationView?

Prefer NavigationStack on iOS 16+ for modern, value-based navigation and programmatic path control; use NavigationView only for legacy compatibility.