Apple HIG Compliance for Web

This skill captures the cross-device polish that makes a website feel native on Apple platforms — iPhone (portrait + landscape), iPad (any orientation), macOS Safari — while remaining clean on Windows and Android. The patterns are framework-agnostic: they work in vanilla HTML, React, Next.js, Svelte, Vue, or anything else that ultimately renders CSS and DOM.

The guidance is rooted in Apple's Human Interface Guidelines plus the practical web realities of Safari (URL chrome, safe-area insets, hover semantics on touch). It was distilled from real iOS-polish work on a production site, so the patterns have all survived contact with actual iPhones and iPads.

When this skill applies

Invoke this skill for any of:

• Building a new responsive site or webapp from scratch
• Auditing an existing site for mobile/iOS bugs
• "Make it look good on my phone / iPad" requests
• Anything involving the meta viewport, safe-area insets, hero sections, full-screen layouts, sticky bottom bars, lightboxes, or canvas/WebGL
• Any UI with buttons, taps, hovers, or interactive controls — to verify HIG-minimum tap targets and touch-vs-mouse affordances
• Code review of frontend changes before merging to a branch that will be deployed

If you're not sure, invoke it. The cost of a quick check is tiny; the cost of shipping an iPhone where the URL bar eats the call-to-action is much larger.