Guide · Agent skill

How to use the iOS Mobile Design agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The iOS Mobile Design skill (mobile-ios-design) gives an AI agent a reference for Apple's Human Interface Guidelines and common SwiftUI patterns, so it can answer iOS interface questions and write SwiftUI views that look and behave like native apps. This guide is for developers and designers who may never have used an agent skill before. By the end you will know what the skill does, how to install it, how to ask for help in a way that triggers it, and what to check before you ship the code it produces.

iOS Mobile Designwshobson/agents · MIT Download the skill

Quick start

1Download the ZIP. Get the mobile-ios-design ZIP file from this page.
2Unzip the skill. Extract the archive so the skill folder contains SKILL.md and the references folder.
3Choose a location. Put the folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder for one project.
4Or upload it in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
5Ask an iOS design question. Describe the screen or component you want in plain language, mentioning iOS or SwiftUI.
6Test the output. Compile the code and run it on a device, checking accessibility and Dynamic Type.

What does the iOS Mobile Design skill make the agent do?

A skill is a folder of instructions that an agent loads when a task matches its description. This one covers iOS, iPadOS and visionOS interface design. When it is active, the agent uses Apple's Human Interface Guidelines as its reference and applies patterns such as NavigationStack, TabView, adaptive grids, SF Symbols, Dynamic Type, semantic colors and materials, and accessibility modifiers to the screens you ask for.

Writes SwiftUI layout code using stacks and grids
Suggests navigation structure with NavigationStack, TabView and sheets
Recommends semantic colors, system fonts and SF Symbols over fixed styling
Points out accessibility modifiers such as accessibilityLabel and accessibilityHint

How do you install the skill?

Download the ZIP file from this page and unzip it. Place the skill folder in one of two locations: the personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill to apply only to that project. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

Personal install: unzip into ~/.claude/skills/
Project install: unzip into the project's .claude/skills/ folder
Claude apps: upload the ZIP under Settings → Capabilities → Skills

What files are in the skill?

The skill contains a SKILL.md file with the main guidance and three reference files. references/hig-patterns.md covers layout, spacing and safe areas. references/ios-navigation.md covers NavigationStack and programmatic navigation. references/swiftui-components.md is a component library with lists and other collections. The agent reads these when a request needs more detail.

SKILL.md
references/hig-patterns.md
references/ios-navigation.md
references/swiftui-components.md

How do you trigger the skill with natural requests?

You do not need a special command. Describe an iOS task in plain language and mention iOS, SwiftUI or Apple design. The skill's description covers designing iOS interfaces, implementing SwiftUI views and checking that apps follow Apple's design principles, so requests that match those tasks are the ones most likely to use it.

Design a settings screen for an iPhone app that follows Apple's HIG
Write a SwiftUI list with swipe-to-delete and pull to refresh
Set up a tab bar with Home, Search and Profile tabs
Check whether this mockup follows iOS conventions for navigation and spacing
Make this card layout support Dynamic Type and Dark Mode

What does a typical SwiftUI example look like?

The skill includes working patterns such as a NavigationStack with a data-driven destination. The snippet below is taken from the skill's navigation reference. It shows a list that pushes a detail view when a row is tapped. Treat it as a starting point and adapt the types to your own app.

Use NavigationLink(value:) with a Hashable model type
Declare the destination with navigationDestination(for:)

NavigationStack {
    List(items) { item in
        NavigationLink(item.title, value: item)
    }
    .navigationTitle("Items")
    .navigationDestination(for: Item.self) { item in
        ItemDetailView(item: item)
    }
}

What do you need, and what are the safety notes?

The skill lists no requirements. It runs no scripts and does not use the network. It is documentation and guidance only, so installing it does not give the agent new tools or access to your machine beyond what your agent already has. The code it writes is generic, however, and may not match the iOS version or APIs you target. Compile the code and test it on a device before relying on it.

Requires: nothing listed
Runs scripts: no
Uses network: no
Licence: MIT

What tips improve the results?

Give the agent your target iOS version and whether the app is iPhone-only or universal. Paste the current screen code or a description of the mockup so the agent can point to specific changes instead of general advice. Ask for accessibility and Dynamic Type checks explicitly, because those are easy to skip.

State the iOS version and device class in your request
Share existing code rather than describing it from memory
Test with VoiceOver enabled and on a real device, since the simulator does not capture the full haptic and performance experience
Avoid hardcoded colors and fixed font sizes if you want dark mode and Dynamic Type to work

What people use it for

Building a SwiftUI settings or profile screen that uses standard list styles
Setting up a tab-based app structure with TabView and SF Symbols
Creating an adaptive grid of product or photo thumbnails for iPhone and iPad
Reviewing a design mockup for Apple HIG conventions before handing it to developers

Frequently asked questions

Is the iOS Mobile Design skill free?

The skill is published under the MIT licence, as listed on this page. The licence covers how you may use and share the code, so check its terms if you plan to redistribute it.

What do I need to install the mobile-ios-design skill?

The skill lists no requirements. Install it by unzipping the download into ~/.claude/skills/ or a project's .claude/skills/ folder, or by uploading the ZIP under Settings → Capabilities → Skills in the Claude apps.

Does the skill run scripts or access the internet?

No. The skill contains documentation and guidance only. It runs no scripts and does not use the network.

Will the SwiftUI code work without changes?

Not necessarily. The examples are generic snippets and can be wrong for a particular iOS version, so compile and test them on a device before shipping.

Can this skill replace a custom design system?

No. The skill pushes system defaults, such as semantic colors and standard navigation, rather than bespoke branding. Teams that need a custom brand system will need their own design guidance.

Does it work for Android or web projects?

The guidance is specific to iOS, iPadOS and visionOS. For other platforms, pick a skill written for that platform's design guidelines.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you build or review SwiftUI screens for Apple platforms and want layouts that follow standard iOS conventions. Pick something else if your project does not target Apple platforms or if you need a custom brand design system, since the skill favours system defaults.

Download the skill