Ipados Design Guidelines
Apple Human Interface Guidelines for iPad.
Install
npx skills add ehmo/platform-design-skills --skill ipados-design-guidelines -g -a claude-code -y- Repository
- ehmo/platform-design-skills637
- Category
- Engineering
- Updated
- 8mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Apple Human Interface Guidelines for iPad. Use when building iPad-optimized interfaces, implementing multitasking, pointer support, keyboard shortcuts, or responsive layouts. Triggers on tasks involving iPad, Split View, Stage Manager, sidebar navigation, or trackpad support.
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()
}
}
}
