102.7K+Download
Skip to the usage guide
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 OpenDesignView 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 source focuses on iOS and adaptive iPad layouts, with only brief platform notes for visionOS. It recommends Dynamic Type, accessibility labels, semantic styling and physical-device testing; the examples are patterns, not a complete tested app.

What it produces

  • SwiftUI view code with stack-based layouts, navigation patterns, and system integration
See the example prompt ↗

How It Works

  1. 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).

  2. 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.

  3. 03
    Implement Navigation Patterns

    The snapshot uses NavigationStack for iOS 16+ and the newer Tab syntax for iOS 18+. Match navigation code to the project deployment target.

  4. 04
    Integrate System Resources

    Use semantic fonts and SF Symbols. The source marks variable symbols as iOS 16+ and symbol effects as iOS 17+; check availability for the target app.

  5. 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

  • Native SwiftUI scopeThis is guidance and example view code, not a packaged application or a full visionOS implementation.
  • Testing still requiredSemantic styles and accessibility labels do not establish that every screen works with Dynamic Type, VoiceOver or iPad multitasking.

What to Provide

  • Project and deployment targetProvide relevant SwiftUI views, the minimum iOS version and supported iPhone/iPad layouts.
  • Screen content and behaviorSupply feature titles, descriptions, icons, navigation destinations and accessibility requirements.

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.

  1. Always Use Semantic Colors

    Use .primary, .secondary, and .background instead of hardcoded colors to automatically support light and dark mode.

  2. Use Semantic Fonts for Dynamic Type

    Apply semantic fonts like .body and .headline instead of fixed sizes so text scales with user preferences.

  3. Respect Safe Areas

    Use safeAreaInset and avoid hardcoded padding at screen edges to prevent content from being obscured.

  4. Use LazyVStack for Long Lists

    Use LazyVStack or LazyHStack for long scrolling lists to avoid eagerly creating every item; measure performance on the target device.

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. Building and testing the SwiftUI examples requires a compatible Apple development environment and SDK; importing a skill does not supply these.

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
In [SwiftUI project], build a feature list from [titles, descriptions and SF Symbols] for minimum iOS [version]. Use navigation supported by that target, semantic colors and Dynamic Type, with labeled cards opening detail views. Adapt for iPhone and iPad split view. Check large text, VoiceOver and light/dark appearances; report which checks you actually ran and which need a device.

Editorial starter prompt based on the dated SKILL.md snapshot; not a recorded execution or verified result.

Check the First Result

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

  • Check API availability against the minimum iOS version.
  • Test large Dynamic Type, VoiceOver labels and hints, light/dark appearances, and iPad split-view layouts.
  • Test on a physical device for performance and any haptics; distinguish inspected code from executed tests.

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

  1. When to Use This SkillLists scenarios including iOS interface design, SwiftUI views, navigation patterns, adaptive layouts, and accessibility
  2. Core ConceptsCovers HIG principles, SwiftUI layout system, navigation patterns, system integration, and visual design
  3. Human Interface Guidelines PrinciplesDefines clarity, deference, and depth principles with platform considerations for iOS, iPadOS, and visionOS
  4. SwiftUI Layout SystemShows stack-based layouts with VStack and HStack, and grid layouts with LazyVGrid
  5. Navigation PatternsDemonstrates NavigationStack with navigationDestination and TabView with Tab for iOS 16 and 18
  6. System IntegrationExplains SF Symbols with rendering modes and effects, and Dynamic Type with semantic fonts
  7. Visual DesignCovers semantic colors, system materials for blur effects, and shadows for depth
  8. Quick Start ComponentProvides a complete FeatureCard view example with icon, title, description, and styling
  9. Best PracticesLists eight rules including semantic colors, SF Symbols, Dynamic Type, accessibility, safe areas, and testing
  10. 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 OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/wshobson/agents --skill mobile-ios-design