Skills Design & Creative Apple HIG Compliance & Design Expert

Apple HIG Compliance & Design Expert

v20260612
apple-hig-expert
This expert skill audits and designs user interfaces for the Apple ecosystem (iOS, macOS, watchOS, visionOS) against the official Human Interface Guidelines (HIG). It checks crucial elements like contrast ratios (WCAG standards), minimum tap-target sizes, and adherence to modern design languages like Liquid Glass. Use it when reviewing mockups or developing native-feeling Apple apps to ensure accessibility and optimal user experience.
Get Skill
57 downloads
Overview

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.

Related Skills

  • 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.
Info
Name apple-hig-expert
Version v20260612
Size 9.94KB
Updated At 2026-06-13
Language