apple-human-interface-skills

name

apple-human-interface-skills

description

Apple's Human Interface Guidelines distilled into design principles an AI can follow to make better-looking, better-behaved interfaces. Use when designing or reviewing any UI: laying out a screen, choosing and placing a component (button, sheet, tab bar, menu, form field, list, alert), designing a flow (onboarding, search, loading, feedback, settings, notifications), or applying foundations (color, typography, layout, spacing, hierarchy, dark mode, motion, accessibility). Each skill gives Apple's guidance, accessibility considerations, and anti-patterns. This is design guidance only — it does not prescribe frameworks, components, or code.

Apple Human Interface Skills

Apple's Human Interface Guidelines, distilled into short design-principle files so an AI follows good design instead of guessing. Each file covers one topic: what it is, when to use it, the design guidelines, accessibility considerations, and what to avoid.

This is design guidance, not implementation — it says how something should look and behave, never which framework or component to build it with.

How to use this skill

1. Figure out what you're designing — a foundation, a pattern/flow, a component, or an interaction.
2. Find it in the router below and read that one short file.
3. Apply its Guidelines, Accessibility, and Avoid points to your design.
4. Want the complete original guidance? Each file links to its full Apple HIG page on developer.apple.com.

skills/ holds 65 design skills, grouped into foundations, patterns, components, and interaction.

Router

Foundations — Visual & UX principles that apply to every screen.

Topic	What it covers
Accessibility	Designing interfaces everyone can perceive, operate, and understand regardless of ability or context
Branding	Expressing a recognizable brand identity while keeping the experience familiar and content-first
Color	Using color deliberately to communicate status, express brand, convey hierarchy, and provide cont…
Dark Mode	A systemwide dark color palette for low-light viewing that people expect every experience to resp…
Icon Systems	A consistent, configurable library of symbols that align with your typography across all weights …
Icons	Simple graphic symbols that express a single action, item, or mode in a way people instantly unde…
Images	Delivering artwork at the right format and resolution so it looks sharp on every display
Inclusion	Putting people first by using respectful language and imagery and presenting content everyone can…
Layout	A consistent, adaptive layout grounds people in content and works across screen sizes and orienta…
Materials	Translucent, blurred surfaces that separate a floating control or navigation layer from backgroun…

Patterns — How to design recurring flows and experiences.

Topic	What it covers
Collaboration and Sharing	Simple, responsive ways for people to share content and collaborate on it together while communic…
Drag and Drop	Moving or copying content by dragging a selection from a source location to a destination
Entering Data	Designing input so people can supply information quickly and without mistakes
Feedback	Cues that tell people what's happening, the result of an action, and how to avoid or fix mistakes
File Management	Letting people create, open, save, browse, and preview documents and files within an app
Launching	The startup experience from open to first interactive screen, ideally feeling instant
Loading	Handling waits for content so they don't disrupt the experience, ideally finishing before people …
Managing Accounts	Authentication and account flows that let people reach their content without becoming a barrier t…
Modality	Content shown in a dedicated mode that blocks interaction with the rest of the app until people e…
Notifications

Components — How to design each UI element well.

Topic	What it covers
Action Sheets	An action sheet presents a set of choices related to an action the user just initiated, typically…
Alerts	An alert is a modal that delivers critical information and requires the user to respond before co…
Boxes	A box visually groups logically related content and controls, set off by a border or background
Buttons	A button initiates an instantaneous action, combining style, content, and a semantic role
Charts	A chart organizes data visually to highlight key insights and help people understand and decide
Color Pickers	A color picker lets people choose and adjust a color for text, shapes, or other elements
Combo Boxes	A combo box combines a text field with a dropdown list, so people can type a custom value or pick…
Context Menus	A context menu provides quick access to actions relevant to a specific item or view, revealed on …
Disclosure Controls	Controls that reveal or hide related information or functionality, keeping advanced or secondary …
Embedded Content

Interaction — Designing for keyboard, pointer, touch, and focus.

Topic	What it covers
Focus and Selection	Focus marks the single element an interaction will target; selection marks the item or items a us…
Keyboard	Operating and navigating an interface — text entry, activation, and shortcuts — without relying o…
Pointer and Hover	Precise pointing input — moving, hovering, and invoking contextual actions — typical of mouse and…
Touch and Gestures	Direct physical manipulation of on-screen objects through motions like tap, swipe, drag, and pinch