When & Why to Use This Skill
This Claude skill serves as a comprehensive framework for iOS UI/UX design, enabling the creation of high-quality, intuitive mobile interfaces that align with Apple's Human Interface Guidelines. It provides structured guidance on navigation patterns, accessibility standards, state management, and performance optimization to ensure a premium and consistent user experience.
Use Cases
- Designing intuitive app navigation structures using native iOS patterns like Tab Bars, Navigation Stacks, and Sheets.
- Implementing robust UI state handling, including skeleton screens for loading, clear error messaging, and engaging empty states.
- Ensuring mobile accessibility compliance by integrating VoiceOver labels, Dynamic Type support, and proper contrast ratios.
- Optimizing interactive elements and forms with appropriate touch targets, haptic feedback, and inline validation.
- Conducting a final UI/UX audit using the comprehensive checklist to verify dark mode compatibility and visual hierarchy.
| name | ios-ui-ux |
|---|
| description | UI/UX design principles for iOS. Use when designing screens, making UI look good, user flow design, handling loading states, empty states, error states, animations, navigation patterns, accessibility, dark mode, form design, better UX. |
|---|
| allowed-tools | Read, Grep, Glob |
|---|
UI/UX Design Principles
Table of Contents
1. Design Philosophy
Core Values
- Simple first - Prioritize simplicity, avoid over-complication
- Consistency - Consistent throughout the app
- Feedback - Always respond to user actions
- Accessibility - Design for all users
Design Style
- Minimalist / Clean
- iOS native feel (follow Human Interface Guidelines)
- Light mode first, support dark mode
Key Principles
- Content over chrome
- Clarity over decoration
- Depth through layering
- Direct manipulation
2. Navigation Patterns
Main Structure
- Tab Bar for main navigation (max 5 tabs)
- Navigation Stack for drill-down
- Modal/Sheet for temporary actions
Rules
- No more than 3 levels deep in navigation stack
- Back button always visible
- Swipe back gesture enabled
- Clear navigation hierarchy
Navigation Types
| Type |
Use Case |
Presentation |
| Push |
Drill-down to detail |
NavigationStack |
| Sheet |
Temporary task |
.sheet() |
| Full Screen |
Immersive content |
.fullScreenCover() |
| Tab |
Main sections |
TabView |
3. States & Feedback
Every Screen Must Handle
| State |
Display |
| Loading |
Skeleton or ProgressView |
| Empty |
Illustration + message + CTA |
| Error |
Message + retry button |
| Success |
Confirmation + next action |
State Diagram
┌─────────┐
│ Idle │
└────┬────┘
│ load()
▼
┌─────────┐
┌────│ Loading │────┐
│ └─────────┘ │
│ error │ success
▼ ▼
┌─────────┐ ┌─────────┐
│ Error │ │ Success │
└────┬────┘ └────┬────┘
│ retry() │ refresh()
└────────┬────────┘
▼
┌─────────┐
│ Loading │
└─────────┘
User Feedback
- Haptic feedback for important actions
- Animation for state transitions (0.3s default)
- Toast/Snackbar for light confirmations
- Progress indicators for long operations
4. Interaction Patterns
Touch Targets
- Minimum 44x44pt for tappable elements
- Spacing between buttons: 8pt minimum
- Adequate padding around interactive elements
Gestures
| Gesture |
Use Case |
| Tap |
Primary action |
| Long press |
Secondary options |
| Swipe |
Delete, archive, quick actions |
| Pull to refresh |
Reload data |
| Pinch |
Zoom |
| Pan |
Scroll, drag |
Forms
- Inline validation
- Clear error messages
- Auto-focus next field
- Appropriate keyboard type
- Show/hide password toggle
- Clear button for text fields
Form Validation
| Timing |
Use Case |
| On blur |
Field-level validation |
| On change |
Real-time feedback (optional) |
| On submit |
Full form validation |
5. Visual Hierarchy
Typography Scale
| Style |
Usage |
Weight |
| Large Title |
Screen titles |
Bold |
| Title |
Section headers |
Bold |
| Headline |
Important text |
Semibold |
| Body |
Main content |
Regular |
| Callout |
Secondary content |
Regular |
| Caption |
Labels, hints |
Regular |
| Footnote |
Legal, timestamps |
Regular |
Spacing System
- Base unit: 8pt
- Use: 4, 8, 16, 24, 32, 48
- Consistent spacing throughout app
Colors
| Type |
Usage |
| Primary |
Brand color for CTAs |
| Secondary |
Supporting actions |
| Destructive |
Red for delete/danger |
| Success |
Green for success states |
| Warning |
Yellow/Orange for warnings |
| Error |
Red for error states |
Elevation/Shadows
- Use sparingly
- Consistent shadow styles
- Higher elevation = more important
6. Accessibility
Required
- VoiceOver labels for all interactive elements
- Dynamic Type support
- Minimum contrast ratio 4.5:1
- Don't use color as only indicator
- Support reduced motion
VoiceOver
Button("Submit") {
// action
}
.accessibilityLabel("Submit form")
.accessibilityHint("Double tap to submit your information")
Dynamic Type
Text("Hello")
.font(.body) // Automatically scales
Contrast
- Text on background: 4.5:1 minimum
- Large text: 3:1 minimum
- Interactive elements: clearly distinguishable
7. Performance UX
Loading
- Skeleton screens instead of spinners when possible
- Optimistic UI for fast actions
- Lazy loading for long lists
- Progressive loading for images
Skeleton Example
┌────────────────────────────┐
│ ████████████ │ <- Title placeholder
│ ████████████████████████ │ <- Subtitle placeholder
│ │
│ ████████████████████████ │ <- Content placeholder
│ ████████████████ │
└────────────────────────────┘
Offline
- Cache important data
- Show offline indicator
- Queue actions to sync later
- Graceful degradation
Performance Tips
- Avoid blocking main thread
- Use lazy loading for lists
- Cache computed values
- Optimize images
- Minimize re-renders
8. Checklist
When Designing New Screen
When Implementing
Before Release
