mobile-ios-designby Seth Hobson

Mobile iOS Design Skill.

A Claude Code and Codex skill for mobile app design: native iOS UI following Apple's Human Interface Guidelines with SwiftUI.

Mobile Apps
UI code

Download OpenDesign View usage guide

wshobson/agents · plugins/ui-design/skills/mobile-ios-design/SKILL.mdSKILL.md

--- name: mobile-ios-design description: 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 to Use This Skill ## Core Concepts ## Quick Start Component ## Best Practices

Front matter and section headings read from the upstream file on 2026-09-14 · 6,921 characters in full

01 What it does

What the mobile-ios-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill teaches iOS Human Interface Guidelines and SwiftUI patterns for building native iOS applications that follow Apple's design principles. It covers clarity, deference, and depth as core HIG principles, SwiftUI's stack-based and grid layout systems, navigation patterns including NavigationStack and TabView, system integration with SF Symbols and Dynamic Type, and visual design using semantic colors and materials.

The skill addresses iOS, iPadOS, and visionOS platform considerations, focusing on touch-first interfaces, adaptive layouts for different screen sizes, accessibility, and automatic light/dark mode support through semantic styling.

What it produces

SwiftUI view code with stack-based layouts, navigation patterns, and system integration

See the example prompt ↗

How It Works

01
Apply HIG Principles
Build interfaces following clarity (legible content, precise icons), deference (UI helps users understand content without competing), and depth (visual layers convey hierarchy).
02
Compose with Stack and Grid Layouts
Use VStack and HStack with alignment and spacing parameters, or LazyVGrid with adaptive or flexible GridItem columns to structure views.
03
Implement Navigation Patterns
Use NavigationStack with navigationDestination for hierarchical navigation, or TabView with Tab for top-level app sections.
04
Integrate System Resources
Use SF Symbols with rendering modes and effects, and semantic fonts that respect Dynamic Type instead of fixed sizes.
05
Apply Semantic Styling
Use semantic colors like .primary and .secondary that automatically adapt to light and dark mode, and system materials for blur effects.

02 Find your fit

When to Use the mobile-ios-design Skill

Use the mobile-ios-design skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

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
Building accessible iOS interfaces

Know the Boundaries

Using hardcoded colors that do not adapt to light and dark mode
Creating closures with strong reference cycles that cause memory leaks

03 Inside the skill

Rules the mobile-ios-design Skill Gives Claude Code and Codex

4 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Always Use Semantic Colors
Use .primary, .secondary, and .background instead of hardcoded colors to automatically support light and dark mode.
Use Semantic Fonts for Dynamic Type
Apply semantic fonts like .body and .headline instead of fixed sizes so text scales with user preferences.
Respect Safe Areas
Use safeAreaInset and avoid hardcoded padding at screen edges to prevent content from being obscured.
Use LazyVStack for Long Lists
Use LazyVStack or LazyHStack instead of regular stacks for scrolling lists to avoid performance issues.

04 Put it to work

Install mobile-ios-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add mobile-ios-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

Generic skills CLI form for plugins/ui-design/skills/mobile-ios-design/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a feature list screen for an iOS app using NavigationStack. Each feature should be displayed in a card with an SF Symbol icon, title, and description. The cards should use semantic colors for automatic dark mode support and include proper accessibility labels. Add a detail view that shows when tapping a feature card, and ensure the layout adapts properly for both iPhone and iPad in split view mode.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Test on a physical device to capture full haptic and performance experience

In OpenDesign import mobile-ios-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/mobile-ios-design/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for mobile-ios-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists scenarios including iOS interface design, SwiftUI views, navigation patterns, adaptive layouts, and accessibility
Core ConceptsCovers HIG principles, SwiftUI layout system, navigation patterns, system integration, and visual design
Human Interface Guidelines PrinciplesDefines clarity, deference, and depth principles with platform considerations for iOS, iPadOS, and visionOS
SwiftUI Layout SystemShows stack-based layouts with VStack and HStack, and grid layouts with LazyVGrid
Navigation PatternsDemonstrates NavigationStack with navigationDestination and TabView with Tab for iOS 16 and 18
System IntegrationExplains SF Symbols with rendering modes and effects, and Dynamic Type with semantic fonts
Visual DesignCovers semantic colors, system materials for blur effects, and shadows for depth
Quick Start ComponentProvides a complete FeatureCard view example with icon, title, description, and styling
Best PracticesLists eight rules including semantic colors, SF Symbols, Dynamic Type, accessibility, safe areas, and testing
Common IssuesIdentifies layout breaking, performance, navigation, dark mode, accessibility, and memory leak problems with solutions

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 6,921 characters. Read the full file on GitHub.

06 Before you install

Questions About the mobile-ios-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Which navigation pattern should I use for iOS 16 and later?

Use NavigationStack with navigationDestination for hierarchical navigation. NavigationStack takes a path parameter and uses navigationDestination(for:) to define destination views for different value types. For top-level navigation, use TabView with the Tab syntax available in iOS 18+.

How do I ensure my text scales with user accessibility settings?

Use semantic fonts like .body and .headline instead of fixed sizes. These fonts respect Dynamic Type and automatically scale according to user preferences. For custom fonts, use the relativeTo parameter to tie the font to a semantic text style.

Mobile iOS Design

Run mobile-ios-design on a Real Mobile App Design Task.

Download OpenDesign, import mobile-ios-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills