Apply iOS/SwiftUI design principles following Apple Human Interface Guidelines when building any iOS UI component.
Build native iOS interfaces that look professional and follow Apple Human Interface Guidelines (HIG) by applying systematic design principles. This skill provides comprehensive guidelines for SwiftUI-first development with color system, spacing, typography, and component-specific patterns optimized for iOS.
Activate this skill when:
Do NOT activate for:
Follow Apple Human Interface Guidelines (HIG) three principles + Flexible extensions:
Before implementing any iOS UI component, load the appropriate reference file:
Read references/design-principles.md - HIG core principles + Flexible extensions
Read references/color-system.md - System colors, Dark Mode, semantic colors
Read references/spacing-system.md - 8pt grid, Safe Area handling
Read references/typography.md - SF Pro, Dynamic Type, text styles
Read references/component-patterns.md - SwiftUI component best practices
Read references/anti-patterns.md - Common iOS design mistakes
Recommendation: Start with design-principles.md for HIG philosophy, then load component-specific files as needed.
For each component type, reference the corresponding section in component-patterns.md:
component-patterns.md → Button sectioncomponent-patterns.md → List sectioncomponent-patterns.md → Form sectioncomponent-patterns.md → Navigation sectioncomponent-patterns.md → Card sectioncomponent-patterns.md → Modal sectioncomponent-patterns.md → Search sectioncomponent-patterns.md → Image sectionBefore finalizing implementation, check anti-patterns.md to ensure the design avoids:
.black, .white)Apply the 8pt grid system for all spacing:
.padding() = 16ptspacing-system.md for component-specific spacingUse system colors for automatic Dark Mode:
.primary, .secondary, Color(.tertiaryLabel)Color(.systemBackground), Color(.secondarySystemBackground).accentColor() or project settingscolor-system.md for detailed color usageMaintain Dynamic Type support (REQUIRED):
.largeTitle, .title, .title2, .title3, .headline, .body, .callout, .subheadline, .footnote, .caption, .caption2.font(.system(size: 24)) without relativeTotypography.md for complete type scaleDocumentation loaded into context as needed to inform design decisions:
iOS UI Component Request
│
├─ What component? → Load component-patterns.md section
│
├─ What spacing? → Use 8pt grid (spacing-system.md)
│
├─ What colors? → System colors + Dark Mode (color-system.md)
│
├─ What typography? → Dynamic Type text styles (typography.md)
│
├─ SwiftUI or UIKit? → SwiftUI first (unless specific UIKit need)
│
└─ Validation → Check anti-patterns.md
Good Request Flow:
User: "Create a login form in SwiftUI"
→ Read references/component-patterns.md (Form section)
→ Read references/spacing-system.md (Form spacing)
→ Apply: TextField with .body font (Dynamic Type), 8pt spacing, system colors
→ Validate against anti-patterns.md
→ Implement with Form { Section { TextField, SecureField, Button } }
Component Implementation Checklist:
Button("확인") {
saveData()
}
.buttonStyle(.borderedProminent)
.controlSize(.large)
VStack {
Text("제목")
.font(.headline)
.foregroundColor(.primary) // Auto Dark Mode
Text("설명")
.font(.body)
.foregroundColor(.secondary)
}
.padding()
.background(Color(.systemBackground))
Text("제목")
.font(.system(size: 24)) // ❌ No Dynamic Type
.foregroundColor(.black) // ❌ No Dark Mode
VStack { }
.ignoresSafeArea() // ❌ Content hidden by notch
.ignoresSafeArea() only for backgrounds.black, .white directly).body, .headline, etc.).lineLimit() that breaks with large textstruct MyView_Previews: PreviewProvider {
static var previews: some View {
Group {
MyView()
.preferredColorScheme(.light)
.previewDisplayName("Light Mode")
MyView()
.preferredColorScheme(.dark)
.previewDisplayName("Dark Mode")
MyView()
.environment(\.sizeCategory, .accessibilityExtraExtraLarge)
.previewDisplayName("Large Text")
}
}
}