Apple hig expert

Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025).

How to use it

Claude Code
  1. Run the line below. It pulls the whole folder into ~/.claude/skills/apple-hig-expert, including the files SKILL.md points to.
  2. Describe your job in plain words. Claude Code follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit alirezarezvani/claude-skills/product-team/apple-hig-expert/skills/apple-hig-expert#main ~/.claude/skills/apple-hig-expert

For one project only, change the path to .claude/skills/apple-hig-expert. This skill also uses product-context.md, ios-design-context.md, audit.json — copying SKILL.md alone won't be enough. See the folder on GitHub.

Claude (web or desktop app)
  1. On this page open ⋯ → Download .md.
  2. Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
  3. Pick the file and Save. Claude shows the name and description and runs a security scan.
  4. Check the skill is switched on.
  5. Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
  1. ChatGPT: make a Project and paste it into Instructions.
  2. Neither? Paste it at the top of a new chat — it works for that chat.
Not working?
  • Check which app you pasted it into — the steps above name the right one.
  • Some skills need the paid tier of Claude or ChatGPT.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Source of Apple hig expert

Show the full text109 lines
namedescriptionlicensemetadata
apple-hig-expertAudits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast or tap-target sizes, or designing native-feeling Apple UI (e.g., 'audit my iOS app against the HIG', 'is this text readable on Liquid Glass?').MIT version: 1.1.0 author: Alireza Rezvani category: design updated: 2026-06-11

Apple HIG Expert

Design and audit apps against the Apple Human Interface Guidelines (HIG, developer.apple.com/design/human-interface-guidelines), including the Liquid Glass design language. HIG content evolves with each OS release — when a claim matters, verify against the live HIG pages cited in references/.

Before Starting

If product-context.md or ios-design-context.md exists, read it before asking questions. Then gather:

  1. Platform target: iOS, macOS, watchOS, or visionOS?
  2. Current state: new design or auditing an existing mockup/code?
  3. App category: utility, productivity, game, social, etc.

Modes

  • Mode 1 — Design from scratch: pick the platform navigation paradigm and layout primitives first (see references/platform-specifics.md), then apply typography and semantic color (references/visual-design.md).
  • Mode 2 — HIG audit: fill in templates/hig-audit-template.md, run scripts/hig_checker.py on every measurable element, and deliver a scored report (see Worked example below).

The Compliance Tool

scripts/hig_checker.py (stdlib-only) has three subcommands:

# 1. Contrast ratio (WCAG formula; pass >= 4.5:1 for normal text)
python3 scripts/hig_checker.py contrast "#8E8E93" "#FFFFFF"
# -> Contrast Ratio: 3.26 [FAILED]

# 2. Tap-target size (pass >= 44x44 pt per HIG)
python3 scripts/hig_checker.py target 32 32
# -> Tap Target: 32x32 [FAILED]

# 3. Batch audit from JSON -> scorecard (starts at 100, -10 per violation)
python3 scripts/hig_checker.py batch audit.json

Batch input shape:

{
  "checks": [
    {"type": "contrast", "name": "caption-on-card", "fg": "#8E8E93", "bg": "#FFFFFF"},
    {"type": "target", "name": "close-button", "w": 32, "h": 32}
  ]
}

Scorecard rubric: the batch score starts at 100 and subtracts 10 per failed check; violations are listed by element name. 90-100 = ship, 70-80 = fix before release, below 70 = systematic rework. Checks the tool cannot measure (VoiceOver labels, Dynamic Type behavior, Reduce Transparency) are assessed manually via the audit template and tagged with confidence.

Worked example: iOS settings-screen audit

Input: mockup with body text #1C1C1E and captions #8E8E93 on white cards, a 32x32 pt close button, and a 343x50 pt primary CTA.

Run:

python3 scripts/hig_checker.py batch audit.json

Output (real):

{
  "score": 80,
  "violations": [
    "Contrast 3.26 fails for caption-on-card",
    "Target 32x32 small for close-button"
  ]
}

Findings → fixes (bottom line first):

HIG score 80/100 — two fixes before release.

  1. Captions fail contrast (3.26 < 4.5). Use .secondaryLabel (semantic color) instead of hardcoded #8E8E93, or darken to ≥ #6E6E73 on white. 🟢 verified by tool.
  2. Close button is 32x32 pt (< 44x44 minimum). Keep the glyph small but expand the hit region to 44x44 with padding/contentShape. 🟢 verified by tool.
  3. Manual check: the card uses an ultra-thin material over a photo background — re-test caption contrast against the busiest underlying region and with Reduce Transparency on. 🟡 needs device test.

Core Design Principles

  1. Liquid Glass — translucent material hierarchy (announced at WWDC25, June 2025; shipped Sept 2025 across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26, visionOS 26). In SwiftUI, apply it via the glassEffect view modifier; keep hierarchy between content and controls. See references/visual-design.md.
  2. Accessibility first — VoiceOver labels on every element, 44x44 pt minimum targets, 4.5:1 contrast for normal text (3:1 large text), Dynamic Type support. See references/accessibility.md.
  3. Platform ergonomics — tab bars/thumb reach on iOS, sidebars + menu bar + shortcuts on macOS, ornaments + gaze states on visionOS, glanceable vertical layouts on watchOS. See references/platform-specifics.md.

Proactive Triggers

Surface these WITHOUT being asked: low contrast over translucent layers; interactive elements under 44 pt; icon buttons with no accessibility label; density overload (no breathing room between glass layers).

Communication

  • Bottom line first — compliance status before details.
  • What + Why + How — "Expand the hit region (What) because 32 pt targets fail the HIG minimum (Why); pad to 44x44 via contentShape (How)."
  • Confidence tagging — 🟢 tool-verified / 🟡 needs device test / 🔴 assumed.
  • ui-design-system: token-based component systems (not platform HIG rules).
  • ux-researcher-designer: persona/research validation (not visual styling).
  • landing-page-generator: web marketing pages, not native apps.
1---
2name: apple-hig-expert
3description: "Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast or tap-target sizes, or designing native-feeling Apple UI (e.g., 'audit my iOS app against the HIG', 'is this text readable on Liquid Glass?')."
4license: MIT
5metadata:
6 version: 1.1.0
7 author: Alireza Rezvani
8 category: design
9 updated: 2026-06-11
10---
11 
12# Apple HIG Expert
13 
14Design and audit apps against the Apple Human Interface Guidelines (HIG, [developer.apple.com/design/human-interface-guidelines](https://developer.apple.com/design/human-interface-guidelines)), including the **Liquid Glass** design language. HIG content evolves with each OS release — when a claim matters, verify against the live HIG pages cited in `references/`.
15 
16## Before Starting
17 
18If `product-context.md` or `ios-design-context.md` exists, read it before asking questions. Then gather:
19 
201. **Platform target**: iOS, macOS, watchOS, or visionOS?
212. **Current state**: new design or auditing an existing mockup/code?
223. **App category**: utility, productivity, game, social, etc.
23 
24## Modes
25 
26- **Mode 1 — Design from scratch**: pick the platform navigation paradigm and layout primitives first (see `references/platform-specifics.md`), then apply typography and semantic color (`references/visual-design.md`).
27- **Mode 2 — HIG audit**: fill in `templates/hig-audit-template.md`, run `scripts/hig_checker.py` on every measurable element, and deliver a scored report (see Worked example below).
28 
29## The Compliance Tool
30 
31`scripts/hig_checker.py` (stdlib-only) has three subcommands:
32 
33```bash
34# 1. Contrast ratio (WCAG formula; pass >= 4.5:1 for normal text)
35python3 scripts/hig_checker.py contrast "#8E8E93" "#FFFFFF"
36# -> Contrast Ratio: 3.26 [FAILED]
37 
38# 2. Tap-target size (pass >= 44x44 pt per HIG)
39python3 scripts/hig_checker.py target 32 32
40# -> Tap Target: 32x32 [FAILED]
41 
42# 3. Batch audit from JSON -> scorecard (starts at 100, -10 per violation)
43python3 scripts/hig_checker.py batch audit.json
44```
45 
46Batch input shape:
47 
48```json
49{
50 "checks": [
51 {"type": "contrast", "name": "caption-on-card", "fg": "#8E8E93", "bg": "#FFFFFF"},
52 {"type": "target", "name": "close-button", "w": 32, "h": 32}
53 ]
54}
55```
56 
57**Scorecard rubric:** the batch score starts at 100 and subtracts 10 per failed check; violations are listed by element name. 90-100 = ship, 70-80 = fix before release, below 70 = systematic rework. Checks the tool cannot measure (VoiceOver labels, Dynamic Type behavior, Reduce Transparency) are assessed manually via the audit template and tagged with confidence.
58 
59## Worked example: iOS settings-screen audit
60 
61**Input:** mockup with body text `#1C1C1E` and captions `#8E8E93` on white cards, a 32x32 pt close button, and a 343x50 pt primary CTA.
62 
63**Run:**
64 
65```bash
66python3 scripts/hig_checker.py batch audit.json
67```
68 
69**Output (real):**
70 
71```json
72{
73 "score": 80,
74 "violations": [
75 "Contrast 3.26 fails for caption-on-card",
76 "Target 32x32 small for close-button"
77 ]
78}
79```
80 
81**Findings → fixes (bottom line first):**
82 
83> **HIG score 80/100 — two fixes before release.**
84> 1. Captions fail contrast (3.26 < 4.5). Use `.secondaryLabel` (semantic color) instead of hardcoded `#8E8E93`, or darken to ≥ `#6E6E73` on white. 🟢 verified by tool.
85> 2. Close button is 32x32 pt (< 44x44 minimum). Keep the glyph small but expand the hit region to 44x44 with padding/`contentShape`. 🟢 verified by tool.
86> 3. Manual check: the card uses an ultra-thin material over a photo background — re-test caption contrast against the *busiest* underlying region and with Reduce Transparency on. 🟡 needs device test.
87 
88## Core Design Principles
89 
901. **Liquid Glass** — translucent material hierarchy (announced at WWDC25, June 2025; shipped Sept 2025 across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26, visionOS 26). In SwiftUI, apply it via the `glassEffect` view modifier; keep hierarchy between content and controls. See `references/visual-design.md`.
912. **Accessibility first** — VoiceOver labels on every element, 44x44 pt minimum targets, 4.5:1 contrast for normal text (3:1 large text), Dynamic Type support. See `references/accessibility.md`.
923. **Platform ergonomics** — tab bars/thumb reach on iOS, sidebars + menu bar + shortcuts on macOS, ornaments + gaze states on visionOS, glanceable vertical layouts on watchOS. See `references/platform-specifics.md`.
93 
94## Proactive Triggers
95 
96Surface these WITHOUT being asked: low contrast over translucent layers; interactive elements under 44 pt; icon buttons with no accessibility label; density overload (no breathing room between glass layers).
97 
98## Communication
99 
100- **Bottom line first** — compliance status before details.
101- **What + Why + How** — "Expand the hit region (What) because 32 pt targets fail the HIG minimum (Why); pad to 44x44 via contentShape (How)."
102- **Confidence tagging** — 🟢 tool-verified / 🟡 needs device test / 🔴 assumed.
103 
104## Related Skills
105 
106- **ui-design-system**: token-based component systems (not platform HIG rules).
107- **ux-researcher-designer**: persona/research validation (not visual styling).
108- **landing-page-generator**: web marketing pages, not native apps.
109 

Discussion

Alternatives

Also in AccessibilitySee all 106 in Design →