A skill that teaches AI coding agents (Claude, and any agent that reads SKILL.md skills) to design and build interfaces in the style of Apple's Human Interface Guidelines, updated for the Liquid Glass era. It covers web apps, dashboards, landing pages and native SwiftUI.
Works with
Ali MohammedBuilding..... · 29 Sept 2026Contents
Claude Code: download it and save it as ~/.claude/skills/apple-hig-design-skill/SKILL.md. Claude uses it whenever it fits.
A skill that teaches AI coding agents (Claude, and any agent that reads SKILL.md skills) to design and build interfaces in the style of Apple's Human Interface Guidelines, updated for the Liquid Glass era. It covers web apps, dashboards, landing pages and native SwiftUI. It was made while building Sorted AI, and the motion recipes come straight from that app. What's inside: - apple-hig-design/SKILL.md - The design language: seven core ideas and the eight HIG principles. - Web tokens (semantic colours for light and dark, type scale, spacing, radii, motion). - Foundations, 40+ component rules, patterns, writing style, platform notes, legal guardrails. - A review checklist to run before shipping. - apple-hig-design/references/web-motion-recipes.md: copy-ready CSS and React for the interactions that make a web app feel like iOS: - Sliding glass lens: tab bars and segmented switches where one glass capsule glides between options, swells when pressed, and follows your finger when you drag along the bar. - Hide-on-scroll bars: top and bottom bars slide away while you scroll down and return on scroll up. - Page-shift drawer: the page slides aside with rounded corners to reveal the menu (like X on iOS). - Light / Dark / Automatic: a theme switch that never flashes the wrong theme. - Glass and press utilities, with reduced-motion and reduced-transparency fallbacks. Notes: - This is an independent summary of Apple's public design guidance, written in its own…