
Ipados Design Guidelines
- 806 installs
- 476 repo stars
- Updated March 19, 2026
- ehmo/platform-design-skills
ipados-design-guidelines is an agent skill that applies Apple Human Interface Guidelines for iPadOS so developers who ship tablet-native apps can implement adaptive layouts, multitasking, and pointer interactions correct
About
ipados-design-guidelines is a design skill grounded in Apple’s Designing for iPadOS Human Interface Guidelines. It organizes iPad-specific UI guidance into four impact-ranked categories: Responsive Layout, Multitasking, Navigation, and Pointer & Trackpad. The skill helps developers choose size classes, column layouts, Split View and Stage Manager behaviors, three-column navigation, sidebars, toolbars, hover states, and trackpad magnetism that feel native on a larger canvas. Reach for ipados-design-guidelines when implementing or reviewing SwiftUI or UIKit screens that must adapt across iPad window sizes and input modes rather than scaling iPhone layouts.
- 9-category iPadOS HIG checklist with CRITICAL, HIGH, and MEDIUM impact ratings
- Covers responsive layout, multitasking, sidebar navigation, pointer support, keyboard shortcuts, Apple Pencil, drag and
- Explicit differentiators from iOS including mandatory multitasking, pointer magnetism, and sidebar-first navigation
- Delivers ready-to-use design rules that agents can follow when generating SwiftUI or UIKit interfaces for iPad
- Hard-gate: must validate against all CRITICAL items before shipping an iPad app
Ipados Design Guidelines by the numbers
- 806 all-time installs (skills.sh)
- +28 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #474 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/ehmo/platform-design-skills --skill ipados-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 806 |
|---|---|
| repo stars | ★ 476 |
| Security audit | 3 / 3 scanners passed |
| Last updated | March 19, 2026 |
| Repository | ehmo/platform-design-skills ↗ |
How do you design iPad-native multitasking and pointer UI?
Generate iPadOS-native UI patterns, multitasking behaviors, and pointer interactions that feel native on the larger canvas.
Who is it for?
iOS developers shipping iPad-first or universal apps who need HIG-aligned multitasking, navigation, and pointer behaviors.
Skip if: Teams building iPhone-only apps, web-only interfaces, or Android tablet experiences without iPadOS-specific requirements.
When should I use this skill?
A developer asks to design, refactor, or review iPad layouts, Stage Manager, Split View, sidebars, or trackpad interactions.
What you get
iPadOS-compliant layout, navigation, multitasking, and pointer interaction patterns aligned to Apple HIG.
- iPadOS-native UI patterns
- Navigation and multitasking layout recommendations
By the numbers
- Organizes guidance into 4 impact-ranked HIG categories for iPadOS UI
Files
iPadOS Design Guidelines
Comprehensive rules for building iPad-native apps following Apple's Human Interface Guidelines. iPad is not a big iPhone -- it demands adaptive layouts, multitasking support, pointer interactions, keyboard shortcuts, and inter-app drag and drop. These rules extend iOS patterns for the larger, more capable canvas.
---
1. Responsive Layout (CRITICAL)
1.1 Use Adaptive Size Classes
iPad presents two horizontal size classes: regular (full screen, large splits) and compact (Slide Over, narrow splits). Design for both. Never hardcode dimensions.
struct AdaptiveView: View {
@Environment(\.horizontalSizeClass) var sizeClass
var body: some View {
if sizeClass == .regular {
TwoColumnLayout()
} else {
StackedLayout()
}
}
}1.2 Don't Scale Up iPhone UI
iPad layouts must be purpose-built. Stretching an iPhone layout across a 13" display wastes space and feels wrong. Use multi-column layouts, master-detail patterns, and increased information density in regular width.
1.3 Support All iPad Screen Sizes
Design for the full range: iPad Mini (8.3"), iPad (11"), iPad Air (11"/13"), and iPad Pro (11"/13"). Use flexible layouts that redistribute content rather than simply scaling.
1.4 Column-Based Layouts for Regular Width
In regular width, organize content into columns. Two-column is the most common (sidebar + detail). Three-column works for deep hierarchies (sidebar + list + detail). Avoid single-column full-width layouts on large screens.
struct ThreeColumnLayout: View {
var body: some View {
NavigationSplitView {
SidebarView()
} content: {
ContentListView()
} detail: {
DetailView()
}
}
}1.5 Respect Safe Areas
iPad safe areas differ from iPhone. Older iPads have no home indicator. iPads in landscape have different insets than portrait. Always use safeAreaInset and never hardcode padding for notches or indicators.
1.6 Support Both Orientations
iPad apps must work well in both portrait and landscape. Landscape is the dominant orientation for productivity. Portrait is common for reading. Adapt column counts and layout density to orientation.
---
2. Multitasking (CRITICAL)
2.1 Support Split View
Your app must function correctly at 1/3, 1/2, and 2/3 screen widths in Split View. At 1/3 width, your app receives compact horizontal size class. Content must remain usable at every split ratio.
2.2 Support Slide Over
Slide Over presents your app as a compact-width overlay on the right edge. It behaves like an iPhone-width app. Ensure all functionality remains accessible in this narrow mode.
2.3 Handle Stage Manager
Stage Manager allows freely resizable windows and multiple windows simultaneously. Your app must:
- Resize fluidly to arbitrary dimensions
- Support multiple scenes (windows) showing different content
- Not assume any fixed size or aspect ratio
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
// Support multiple windows
WindowGroup("Detail", for: Item.ID.self) { $itemId in
DetailView(itemId: itemId)
}
}
}2.4 Never Assume Full Screen
The app may launch directly into Split View or Stage Manager. Do not depend on full-screen dimensions during setup, onboarding, or any flow. Test your app at every possible size.
2.5 Handle Size Transitions Gracefully
When the user resizes via multitasking, animate layout changes smoothly. Preserve scroll position, selection state, and user context across size transitions. Never reload content on resize.
2.6 Support Multiple Scenes
Use UIScene / SwiftUI WindowGroup to let users open multiple instances of your app showing different content. Each scene is independent. Support NSUserActivity for state restoration.
---
3. Navigation (CRITICAL)
3.1 Sidebar for Primary Navigation
In regular width, replace the iPhone tab bar with a sidebar. The sidebar provides more room for navigation items, supports sections, and feels native on iPad.
struct AppNavigation: View {
@State private var selection: NavigationItem? = .inbox
var body: some View {
NavigationSplitView {
List(selection: $selection) {
Section("Main") {
Label("Inbox", systemImage: "tray")
.tag(NavigationItem.inbox)
Label("Drafts", systemImage: "doc")
.tag(NavigationItem.drafts)
Label("Sent", systemImage: "paperplane")
.tag(NavigationItem.sent)
}
Section("Labels") {
// Dynamic sections
}
}
.navigationTitle("Mail")
} detail: {
DetailView(for: selection)
}
}
}3.2 Automatic Tab-to-Sidebar Conversion
SwiftUI TabView with .sidebarAdaptable style automatically converts to a sidebar in regular width. Use this for seamless iPhone-to-iPad adaptation.
TabView {
Tab("Home", systemImage: "house") { HomeView() }
Tab("Search", systemImage: "magnifyingglass") { SearchView() }
Tab("Profile", systemImage: "person") { ProfileView() }
}
.tabViewStyle(.sidebarAdaptable)3.3 Three-Column Layout for Complex Hierarchies
Use NavigationSplitView with three columns when your information architecture has three levels: category > list > detail. Examples: mail (accounts > messages > message), file managers, settings.
3.4 Toolbar at Top
On iPad, toolbars live at the top of the screen in the navigation bar area, not at the bottom like iPhone. Place contextual actions in .toolbar with appropriate placement.
.toolbar {
ToolbarItemGroup(placement: .primaryAction) {
Button("Compose", systemImage: "square.and.pencil") { }
}
ToolbarItemGroup(placement: .secondaryAction) {
Button("Archive", systemImage: "archivebox") { }
Button("Delete", systemImage: "trash") { }
}
}3.5 Detail View Should Never Be Empty
When no item is selected in a list/sidebar, show a meaningful empty state in the detail area. Use a placeholder with icon and instruction text, not a blank screen.
3.6 Reduce Recall in Large-Canvas Navigation
Keep sidebar selection, search terms, and disclosure state visible and preserved across size changes and scene switches. In multi-column layouts, users should resume from structure on screen, not from memory.
---
4. Pointer & Trackpad (HIGH)
4.1 Add Hover Effects to Interactive Elements
All tappable elements should respond to pointer hover. The system provides automatic hover effects for standard controls. For custom views, use .hoverEffect().
Button("Action") { }
.hoverEffect(.highlight) // Subtle highlight on hover
// Custom hover effect
MyCustomView()
.hoverEffect(.lift) // Lifts and adds shadow4.2 Pointer Magnetism on Buttons
The pointer should snap to (be attracted toward) button bounds. Standard UIKit/SwiftUI buttons get this automatically. For custom hit targets, ensure the pointer region matches the tappable area using .contentShape().
4.3 Support Right-Click Context Menus
Right-click (secondary click) should present context menus. Use .contextMenu which automatically supports both long-press (touch) and right-click (pointer).
Text(item.title)
.contextMenu {
Button("Copy", systemImage: "doc.on.doc") { }
Button("Share", systemImage: "square.and.arrow.up") { }
Divider()
Button("Delete", systemImage: "trash", role: .destructive) { }
}4.4 Trackpad Scroll Behaviors
Support two-finger scrolling with momentum. Pinch to zoom where appropriate. Respect scroll direction preferences. For custom scroll views, ensure trackpad gestures feel natural alongside touch gestures.
4.5 Customize Cursor for Content Areas
Change cursor appearance based on context. Text areas show I-beam. Links show pointer hand. Resize handles show resize cursors. Draggable items show grab cursor.
4.6 Pointer-Driven Drag and Drop
Pointer users expect click-and-drag for rearranging, selecting, and moving content. Combine with multi-select via Shift-click and Cmd-click.
---
5. Keyboard (HIGH)
5.1 Cmd+Key Shortcuts for All Major Actions
Every primary action must have a keyboard shortcut. Standard shortcuts are mandatory:
| Shortcut | Action |
|---|---|
| Cmd+N | New item |
| Cmd+F | Find/Search |
| Cmd+S | Save |
| Cmd+Z | Undo |
| Cmd+Shift+Z | Redo |
| Cmd+C/V/X | Copy/Paste/Cut |
| Cmd+A | Select all |
| Cmd+P | |
| Cmd+W | Close window/tab |
| Cmd+, | Settings/Preferences |
| Delete | Delete selected item |
Button("New Document") { createDocument() }
.keyboardShortcut("n", modifiers: .command)5.2 Discoverability via Cmd-Hold Overlay
When the user holds the Cmd key, iPadOS shows a shortcut overlay. Register all shortcuts using .keyboardShortcut() so they appear in this overlay. Group related shortcuts logically.
5.3 Tab Key Navigation Between Fields
Support Tab to move forward and Shift+Tab to move backward between form fields and focusable elements. Use .focusable() and @FocusState to manage keyboard focus order.
struct FormView: View {
@FocusState private var focusedField: Field?
var body: some View {
Form {
TextField("Name", text: $name)
.focused($focusedField, equals: .name)
TextField("Email", text: $email)
.focused($focusedField, equals: .email)
TextField("Phone", text: $phone)
.focused($focusedField, equals: .phone)
}
}
}5.4 Never Override System Shortcuts
Do not claim shortcuts reserved by the system: Cmd+H (Home), Cmd+Tab (App Switcher), Cmd+Space (Spotlight), Globe key combinations. These will not work and create confusion.
5.5 Detect Hardware Keyboard
Adapt UI when a hardware keyboard is connected. Hide the on-screen keyboard shortcut bar. Show keyboard-optimized controls. Use GCKeyboard or track keyboard visibility to detect state.
5.6 Arrow Key Navigation
Support arrow keys for navigating lists, grids, and collections. Combine with Shift for multi-selection. This is essential for productivity-focused apps.
5.7 Shortcuts Must Be Discoverable
Do not rely on users memorizing shortcut vocabularies. Expose commands through the Cmd-hold overlay, menu labels, and visible focus movement so people learn shortcuts by recognition and repetition.
---
6. Apple Pencil (MEDIUM)
6.1 Support Scribble
iPadOS converts handwriting to text in any standard text field automatically. Do not disable Scribble. For custom text input, adopt UIScribbleInteraction. Test that Scribble works in all text entry points.
6.2 Double-Tap Tool Switching
Apple Pencil 2 and later supports double-tap to switch tools (e.g., pen to eraser). If your app has drawing tools, implement the UIPencilInteraction delegate to handle double-tap.
6.3 Pressure and Tilt for Drawing
For drawing apps, respond to force (pressure) and altitudeAngle/azimuthAngle (tilt) from pencil touch events. Use these for variable line width, opacity, or shading.
6.4 Hover Detection (M2+ Pencil)
Apple Pencil with hover (M2 iPad Pro and later) provides position data before the pencil touches the screen. Use this for preview effects, tool size indicators, and enhanced precision.
// UIKit hover support via UIHoverGestureRecognizer
let hoverRecognizer = UIHoverGestureRecognizer(target: self, action: #selector(pencilHoverChanged(_:)))
hoverRecognizer.allowedTouchTypes = [NSNumber(value: UITouch.TouchType.pencil.rawValue)]
canvas.addGestureRecognizer(hoverRecognizer)
@objc func pencilHoverChanged(_ hover: UIHoverGestureRecognizer) {
let location = hover.location(in: canvas)
showBrushPreview(at: location)
}6.5 PencilKit Integration
For note-taking and annotation, use PKCanvasView from PencilKit. It provides a full drawing experience with tool picker, undo, and ink recognition out of the box.
import PencilKit
struct DrawingView: UIViewRepresentable {
@Binding var canvasView: PKCanvasView
func makeUIView(context: Context) -> PKCanvasView {
canvasView.tool = PKInkingTool(.pen, color: .black, width: 5)
canvasView.drawingPolicy = .anyInput
return canvasView
}
}---
7. Drag and Drop (HIGH)
7.1 Inter-App Drag and Drop is Expected
iPad users expect to drag content between apps. Support dragging content out (as a source) and dropping content in (as a destination). This is a core iPad interaction.
// As drag source
Text(item.title)
.draggable(item.title)
// As drop destination
DropTarget()
.dropDestination(for: String.self) { items, location in
handleDrop(items)
return true
}7.2 Multi-Item Drag
Users can pick up one item, then tap additional items to add them to the drag. Support multi-item drag by providing multiple NSItemProvider items. Show a badge count on the drag preview.
7.3 Spring-Loaded Interactions
When dragging over a navigation element (folder, tab, sidebar item), pause briefly to "spring open" that destination. Implement spring-loading on navigation containers to enable deep drop targets.
7.4 Visual Feedback for Drag and Drop
Provide clear visual states:
- Lift: Item lifts with shadow when drag begins
- Move: Destination highlights when drag hovers over valid target
- Drop: Animate insertion at drop point
- Cancel: Item animates back to origin
7.5 Support Universal Control
Universal Control lets users drag between iPad and Mac. If your app supports drag and drop with standard NSItemProvider and UTTypes, Universal Control works automatically.
7.6 Drop Delegates for Custom Behavior
Use DropDelegate for fine-grained control over drop behavior: validating drop content, reordering within lists, and handling drop position.
struct ReorderDropDelegate: DropDelegate {
let item: Item
@Binding var items: [Item]
@Binding var draggedItem: Item?
func performDrop(info: DropInfo) -> Bool {
draggedItem = nil
return true
}
func dropEntered(info: DropInfo) {
guard let draggedItem,
let fromIndex = items.firstIndex(of: draggedItem),
let toIndex = items.firstIndex(of: item) else { return }
withAnimation {
items.move(fromOffsets: IndexSet(integer: fromIndex),
toOffset: toIndex > fromIndex ? toIndex + 1 : toIndex)
}
}
}---
8. External Display (MEDIUM)
8.1 Provide Extended Content, Not Just Mirroring
When connected to an external display, show complementary content rather than duplicating the iPad screen. Presentations, reference material, or expanded views belong on the external display while controls stay on iPad.
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
// Additional scene for external display
WindowGroup(id: "presentation") {
PresentationView()
}
}
}8.2 Handle Display Connection and Disconnection
Observe external display lifecycle via UIWindowScene events in your SceneDelegate or by listening for UIScene session notifications (UIApplication.didConnectSceneSessionNotification / UIApplication.didDisconnectSceneSessionNotification). Transition gracefully — if the external display disconnects mid-presentation, bring content back to the iPad screen without data loss.
// SceneDelegate: detect when a scene (external display window) connects or disconnects
func scene(_ scene: UIScene,
willConnectTo session: UISceneSession,
options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = scene as? UIWindowScene else { return }
configureExternalDisplay(for: windowScene)
}
func sceneDidDisconnect(_ scene: UIScene) {
restoreContentToiPad()
}8.3 Support Full External Display Resolution
Use the full resolution and aspect ratio of the external display. Do not letterbox or pillarbox your content. In iOS 16+ multi-scene contexts, UIScreen.main is deprecated — query the connected display via UIWindowScene.coordinateSpace.bounds and UIWindowScene.screen.scale, or use @Environment(\.displayScale) in SwiftUI.
---
9. Accessibility (CRITICAL)
Impact: CRITICAL
Rule 9.1: VoiceOver Labels on All Interactive Elements
Every button, control, and interactive element must have a meaningful accessibility label. Icon-only toolbar items and custom views must use .accessibilityLabel().
Correct:
Button(action: compose) {
Image(systemName: "square.and.pencil")
}
.accessibilityLabel("Compose new message")Incorrect:
Button(action: compose) {
Image(systemName: "square.and.pencil")
}
// VoiceOver reads "square.and.pencil" — meaningless to usersRule 9.2: Support Dynamic Type Including Accessibility Sizes
Use semantic text styles (title, body, caption) so text scales with the user's preferred size. In iPad's larger canvas, never clamp text size or disable scaling. Test up to the five accessibility size steps.
Text("Section Header")
.font(.headline) // Scales with Dynamic Type automaticallyRule 9.3: Pointer Accessibility — Hover Must Not Be the Only Cue
Hover states (.hoverEffect) enhance pointer input but must not be the sole indicator of interactivity. Ensure all interactive elements are also distinguishable via color, shape, or label for VoiceOver and keyboard-only users.
Rule 9.4: Full Keyboard Access and Focus Routing
With Full Keyboard Access enabled, Tab must move focus through all interactive elements in logical order. In Split View and multi-window layouts, focus must not escape to a hidden or occluded window. Use @FocusState and .focusable() to control the keyboard focus graph.
struct FormView: View {
@FocusState private var focusedField: Field?
var body: some View {
VStack {
TextField("Name", text: $name)
.focused($focusedField, equals: .name)
TextField("Email", text: $email)
.focused($focusedField, equals: .email)
}
}
}Rule 9.5: VoiceOver in Split View — Separate Focus Contexts
In Split View, each app has its own VoiceOver focus context. Your app must not assume it occupies the full screen. Ensure VoiceOver can navigate your entire visible interface even at 1/3 or 1/2 split width. Do not hide actionable content outside the visible region without also removing it from the accessibility tree.
Rule 9.6: Respond to Bold Text
When the user enables Bold Text in Settings, custom-rendered text must adapt. SwiftUI text styles handle this automatically. UIKit code must check UIAccessibility.isBoldTextEnabled or use @Environment(\.legibilityWeight) in SwiftUI.
Correct:
// SwiftUI — handled automatically for standard text styles
Text("Section Header")
.font(.headline)
// SwiftUI — custom rendering respects legibilityWeight
@Environment(\.legibilityWeight) var legibilityWeight
var body: some View {
Text("Custom Label")
.fontWeight(legibilityWeight == .bold ? .bold : .regular)
}Incorrect:
// Hardcoded weight ignores Bold Text preference
label.font = UIFont.systemFont(ofSize: 17, weight: .regular)
// Missing: re-query font when UIAccessibility.boldTextStatusDidChangeNotification firesRule 9.7: Respond to Increase Contrast
When the user enables Increase Contrast in Settings, custom colors must provide higher-contrast variants. Use @Environment(\.colorSchemeContrast) in SwiftUI or UIAccessibility.isDarkerSystemColorsEnabled in UIKit.
Correct:
// SwiftUI
@Environment(\.colorSchemeContrast) var contrast
var separatorColor: Color {
contrast == .increased ? Color.primary : Color.secondary
}
// UIKit
let useHighContrast = UIAccessibility.isDarkerSystemColorsEnabled
let borderColor: UIColor = useHighContrast ? .label : .separatorIncorrect:
// Static color ignores Increase Contrast setting
let borderColor = UIColor.separator // Always low-contrast; ignores user preference---
Evaluation Checklist
Use this checklist to verify iPad-readiness:
Layout & Multitasking
- [ ] App uses adaptive layout with
horizontalSizeClass - [ ] Tested at all Split View ratios (1/3, 1/2, 2/3)
- [ ] Tested in Slide Over (compact width)
- [ ] Stage Manager: resizes fluidly to arbitrary dimensions
- [ ] Multiple scenes/windows supported
- [ ] Both orientations (portrait and landscape) work correctly
- [ ] No content clipped at any size
- [ ] Safe areas respected on all iPad models
Navigation
- [ ] Sidebar visible in regular width
- [ ] Tab bar used in compact width
- [ ] Detail view shows placeholder when no selection
- [ ] Toolbar items placed at top, not bottom
- [ ] Three-column layout used where appropriate
Pointer & Trackpad
- [ ] Hover effects on all interactive elements
- [ ] Right-click context menus available
- [ ] Pointer cursor adapts to content (I-beam for text, etc.)
- [ ] Click-and-drag works for reordering
Keyboard
- [ ] Cmd+key shortcuts for all major actions
- [ ] Shortcuts appear in Cmd-hold overlay
- [ ] Tab key navigates between form fields
- [ ] No system shortcut conflicts
- [ ] Arrow keys navigate lists and grids
- [ ] Return/Enter activates default action
Apple Pencil
- [ ] Scribble works in all text fields
- [ ] Drawing apps support pressure and tilt
- [ ] Double-tap interaction handled (if applicable)
Drag and Drop
- [ ] Content can be dragged out to other apps
- [ ] Content can be dropped in from other apps
- [ ] Multi-item drag supported
- [ ] Visual feedback for all drag states
External Display
- [ ] Extended content shown (not just mirror)
- [ ] Graceful handling of connect/disconnect
Accessibility
- [ ] VoiceOver labels on all icon-only buttons and custom interactive elements
- [ ] Text uses semantic type styles and scales with Dynamic Type (including accessibility sizes)
- [ ] All functionality reachable with Full Keyboard Access (Tab navigation, logical focus order)
- [ ] Interactive elements are distinguishable without relying solely on hover state
- [ ] VoiceOver navigates correctly at all Split View widths
- [ ] Bold Text preference respected (SwiftUI handles automatically; UIKit checks
UIAccessibility.isBoldTextEnabled) - [ ] Increase Contrast preference respected (custom colors provide higher-contrast variants via
colorSchemeContrastorisDarkerSystemColorsEnabled)
---
Anti-Patterns
DO NOT: Scale Up iPhone Layouts
Stretching a single-column iPhone UI to fill an iPad screen wastes space, looks lazy, and provides a poor experience. Always redesign for the larger canvas.
DO NOT: Disable Multitasking
Never opt out of multitasking support. Users expect every app to work in Split View and Slide Over. Requiring full screen is hostile to iPad workflows.
DO NOT: Ignore the Keyboard
Many iPad users have Magic Keyboard or Smart Keyboard. An app with no keyboard shortcuts forces them to reach for the screen constantly. Provide shortcuts for all frequent actions.
DO NOT: Use iPhone-Style Bottom Tab Bars in Regular Width
Tab bars at the bottom waste vertical space on iPad and look out of place. Convert to sidebar navigation in regular width. SwiftUI does this automatically with .sidebarAdaptable.
DO NOT: Show Popovers as Full-Screen Sheets
On iPad, popovers should anchor to their source element as floating panels. Only use full-screen sheets for immersive content or flows that genuinely need the full screen. Avoid the iPhone pattern of everything being a sheet.
DO NOT: Ignore Pointer Hover States
Missing hover effects make the app feel broken when using a trackpad. Users cannot tell what is interactive. Always add hover feedback to custom interactive elements.
DO NOT: Hardcode Dimensions
Never hardcode widths, heights, or positions based on a specific iPad model. Use Auto Layout constraints, SwiftUI flexible frames, and GeometryReader for dynamic sizing.
DO NOT: Forget Drag and Drop
On iPad, drag and drop between apps is a core workflow. Not supporting it makes your app a dead end for content. At minimum, support dragging text, images, and URLs in and out.
DO NOT: Override System Keyboard Shortcuts
Claiming Cmd+H, Cmd+Tab, Cmd+Space, or Globe shortcuts will not work and confuses users who expect system behavior. Check Apple's reserved shortcuts list before assigning.
DO NOT: Present Dense Content Without Scrolling
Large iPad screens tempt designers to show everything at once. Content should still scroll when it exceeds the visible area. Never truncate content to avoid scrolling.
iPadOS Design Guidelines Skill
iPad-specific HIG rules extending iOS patterns for the larger, multitasking-capable canvas.
Reference: Apple HIG - Designing for iPadOS
Categories & Impact
| # | Category | Impact | Key Focus |
|---|---|---|---|
| 1 | Responsive Layout | CRITICAL | Adaptive layouts, size classes, column-based design |
| 2 | Multitasking | CRITICAL | Split View, Slide Over, Stage Manager, resizable windows |
| 3 | Navigation | CRITICAL | Sidebar, three-column layout, toolbar placement |
| 4 | Pointer & Trackpad | HIGH | Hover effects, magnetism, right-click, drag and drop |
| 5 | Keyboard | HIGH | Cmd shortcuts, discoverability overlay, tab navigation |
| 6 | Apple Pencil | MEDIUM | Scribble, hover detection, PencilKit |
| 7 | Drag and Drop | HIGH | Inter-app, multi-item, spring-loaded, Universal Control |
| 8 | External Display | MEDIUM | Extended content, AirPlay, display lifecycle |
| 9 | Accessibility | CRITICAL | VoiceOver labels, Dynamic Type, pointer accessibility, Full Keyboard Access |
Key Differentiators from iOS
- Sidebar replaces tab bar in regular width size class
- Multitasking is mandatory -- app must function at all split sizes
- Pointer support expected -- hover states, magnetism, right-click menus
- Keyboard shortcuts required -- Cmd+key for all major actions with discoverability overlay
- Drag and drop across apps -- first-class interaction pattern
- Stage Manager -- freely resizable windows, multiple scenes
- Toolbar at top instead of bottom navigation
- Three-column layouts for deep hierarchies
Never Do
- Never scale up an iPhone layout to fill the iPad screen — redesign for the larger canvas
- Never opt out of multitasking — every app must work in Split View and Slide Over
- Never use bottom tab bars in regular width — use sidebar navigation
- Never show popovers as full-screen sheets — anchor popovers to their source element
- Never hardcode pixel dimensions for specific iPad models
- Never omit hover states for interactive elements — trackpad users need visual feedback
- Never override system keyboard shortcuts (Cmd+H, Cmd+Tab, Cmd+Space)
- Never ignore drag and drop — at minimum support dragging text, images, and URLs
- Never block the keyboard from dismissing modal sheets on iPad
- Never present iPhone-style modals when a popover or inspector is more appropriate
- Never omit accessibility labels on icon-only buttons or custom interactive elements
- Never disable Dynamic Type scaling or clamp text size — iPad users rely on large type too
- Never create keyboard focus paths that trap or skip interactive elements in Split View
{
"version": "1.0.0",
"organization": "Platform Design Skills",
"date": "February 2026",
"abstract": "Apple Human Interface Guidelines for iPad apps. 50+ rules across 9 categories covering multitasking, pointer support, sidebar navigation, keyboard shortcuts, Stage Manager, responsive layout, accessibility, and iPad-specific adaptations. Extends iOS patterns for the larger canvas.",
"references": [
"https://developer.apple.com/design/human-interface-guidelines",
"https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados",
"https://developer.apple.com/documentation/swiftui",
"https://developer.apple.com/documentation/uikit"
]
}
iPadOS Design Guidelines - Sections
Section 1: Responsive Layout
- Impact: CRITICAL
- Scope: Adaptive layouts, size classes, column-based design, safe areas, all iPad screen sizes
- Applies when: Building any iPad UI, handling regular/compact width transitions, supporting iPad Mini through 13" Pro
Section 2: Multitasking
- Impact: CRITICAL
- Scope: Split View, Slide Over, Stage Manager, resizable windows, multiple scenes
- Applies when: App runs alongside other apps, user resizes windows, app enters compact width via multitasking
Section 3: Navigation
- Impact: CRITICAL
- Scope: Sidebar navigation, tab-to-sidebar conversion, three-column layout, toolbar placement, detail views, preserved visible hierarchy and state
- Applies when: Designing primary navigation, building information hierarchies, placing toolbars and actions
Section 4: Pointer & Trackpad
- Impact: HIGH
- Scope: Hover effects, pointer magnetism, right-click context menus, scroll behaviors, cursor customization, pointer-driven drag and drop
- Applies when: Any interactive element needs pointer adaptation, supporting Magic Keyboard or trackpad input
Section 5: Keyboard
- Impact: HIGH
- Scope: Cmd+key shortcuts, discoverability overlay, tab navigation, hardware keyboard detection, system shortcut conflicts, shortcut learnability
- Applies when: Adding keyboard shortcuts, building forms, supporting hardware keyboard users
Section 6: Apple Pencil
- Impact: MEDIUM
- Scope: Scribble handwriting input, double-tap tool switching, pressure/tilt sensitivity, hover detection, PencilKit
- Applies when: Building drawing or note-taking features, supporting handwriting input in text fields
Section 7: Drag and Drop
- Impact: HIGH
- Scope: Inter-app drag and drop, multi-item selection, spring-loaded interactions, Universal Control, drop delegates
- Applies when: Content can be moved between apps, supporting file/image/text transfers, building content organization features
Section 8: External Display
- Impact: MEDIUM
- Scope: Extended display content, AirPlay support, display connection/disconnection handling
- Applies when: App supports presentation mode, external monitors, or AirPlay output
Section 9: Accessibility
- Impact: CRITICAL
- Scope: VoiceOver labels, Dynamic Type scaling, pointer accessibility, Full Keyboard Access, Split View focus routing, Bold Text, Increase Contrast
- Applies when: Building any interactive element, supporting keyboard users, testing with assistive technologies, adapting UI across split widths
- Rules: 9.1 VoiceOver labels, 9.2 Dynamic Type, 9.3 Hover accessibility, 9.4 Full Keyboard Access, 9.5 VoiceOver in Split View, 9.6 Bold Text, 9.7 Increase Contrast
Related skills
How it compares
Choose this over generic iOS or web design skills when the target surface is specifically iPad multitasking, windowing, and pointer input.
FAQ
What does ipados-design-guidelines cover?
ipados-design-guidelines covers Apple Human Interface Guidelines for iPadOS across four categories: Responsive Layout, Multitasking, Navigation, and Pointer & Trackpad. Developers use it to implement adaptive columns, windowing, sidebars, and trackpad-native interactions on iPad.
When should developers use ipados-design-guidelines?
Developers should use ipados-design-guidelines when building or reviewing iPad-native UI that must support multitasking, larger canvases, and trackpad or mouse input. The skill translates HIG rules into concrete layout, navigation, and interaction decisions.
Is Ipados Design Guidelines safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.