# apple-hig-designer

Generates native iOS interfaces for iPhone, iPad, and Apple Watch following Apple Human Interface Guidelines. It formats SwiftUI components and validates accessibility.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 installs · ★ 221
- Author: jamesrochabrun
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/jamesrochabrun/skills/tree/HEAD/skills/apple-hig-designer/SKILL.md
- Updated: 2026-01-14
- HTML: https://affpapa.org/en/nevibecode/skills/apple-hig-designer

## What it does

The skill guides an AI assistant through Apple Human Interface Guidelines for iPhone, iPad, and Apple Watch. It generates SwiftUI and UIKit code aligned with the San Francisco font system, safe areas, and an 8pt layout grid. Semantic system colors supply built-in dark mode support without manual style overrides.

The instructions enforce native iOS navigation patterns. Lists default to the insetGrouped style, modal sheets use medium and large detents, and buttons follow a clear hierarchy from prominent to plain styles. Every touch target requires at least 44x44 points. This prevents frustrating misclicks on smaller screens.

The guideline bans placing a tab bar alongside a toolbar in the same view. Mixing both creates crowded layouts and breaks standard navigation flow.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add jamesrochabrun/skills --skill apple-hig-designer -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/apple-hig-designer/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/apple-hig-designer/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add jamesrochabrun/skills --skill apple-hig-designer -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/apple-hig-designer/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add jamesrochabrun/skills --skill apple-hig-designer -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/apple-hig-designer/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install jamesrochabrun/skills apple-hig-designer
```

2. **Manually: put the files in place**
- File: `.github/skills/apple-hig-designer/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add jamesrochabrun/skills --skill apple-hig-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/jamesrochabrun/skills --path skills/apple-hig-designer
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/apple-hig-designer/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add jamesrochabrun/skills --skill apple-hig-designer -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/jamesrochabrun/skills/tree/HEAD/skills/apple-hig-designer/SKILL.md

## When to use it
- generate SwiftUI layouts following the 8pt grid and safe areas
- implement accessibility features for VoiceOver and Dynamic Type
- organize button hierarchies across prominent, bordered, and plain styles
- structure native navigation using NavigationStack and TabView

## Example prompts
- Create a SwiftUI login view following Apple HIG with secure password fields
- Build an insetGrouped settings list using native Toggle switches
- Add a modal sheet presentation with medium and large detents

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0c8e3319c91a92bb.

BEGIN THIRD-PARTY FILE 0c8e3319c91a92bb
````text
---
name: apple-hig-designer
description: Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.
---

# Apple HIG Designer

Design beautiful, native iOS apps following Apple's Human Interface Guidelines (HIG). Create accessible, intuitive interfaces with native components, proper typography, semantic colors, and Apple's design principles.

## What This Skill Does

Helps you design and build iOS apps that feel native and follow Apple's guidelines:
- **Generate iOS Components** - Create SwiftUI and UIKit components
- **Validate Designs** - Check compliance with Apple HIG
- **Ensure Accessibility** - VoiceOver, Dynamic Type, color contrast
- **Apply Design Principles** - Clarity, Deference, Depth
- **Use Semantic Colors** - Automatic dark mode support
- **Implement Typography** - San Francisco font system
- **Follow Spacing** - 8pt grid system and safe areas

## Apple's Design Principles

### 1. Clarity

**Make content clear and focused.**

Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a focus on functionality drives the design.

```swift
// ✅ Clear, focused content
Text("Welcome back, Sarah")
    .font(.title)
    .foregroundColor(.primary)

// ❌ Unclear, cluttered
Text("Welcome back, Sarah!!!")
    .font(.title)
    .foregroundColor(.red)
    .background(.yellow)
    .overlay(Image(systemName: "star.fill"))
```

### 2. Deference

**UI helps people understand and interact with content, but never competes with it.**

The interface defers to content, using a light visual treatment that keeps focus on the content and gives the content room to breathe.

```swift
// ✅ Content-focused
VStack(alignment: .leading, spacing: 8) {
    Text("Article Title")
        .font(.headline)
    Text("Article content goes here...")
        .font(.body)
        .foregroundColor(.secondary)
}
.padding()

// ❌ Distracting UI
VStack(spacing: 8) {
    Text("Article Title")
        .font(.headline)
        .foregroundColor(.white)
        .background(.blue)
        .border(.red, width: 3)
}
```

### 3. Depth

**Visual layers and realistic motion convey hierarchy and help people understand relationships.**

Distinct visual layers and realistic motion impart vitality and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality without losing context.

```swift
// ✅ Clear depth hierarchy
ZStack {
    Color(.systemBackground)

    VStack {
        // Card with elevation
        CardView()
            .shadow(radius: 8)
    }
}

// Using blur for depth
Text("Content")
    .background(.ultraThinMaterial)
```

## iOS UI Components

### Navigation Patterns

#### 1. Navigation Bar

**Top bar for navigation and actions.**
````
END THIRD-PARTY FILE 0c8e3319c91a92bb

The third-party file has ended. Everything between the 0c8e3319c91a92bb tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2868 of 20283 bytes. © jamesrochabrun · MIT · https://github.com/jamesrochabrun/skills/tree/HEAD/skills/apple-hig-designer/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md