From ios-swift-skills
Provides SwiftUI strategies and examples for building apps across Apple platforms (iOS, iPadOS, macOS, watchOS, tvOS) with adaptive layouts and platform optimizations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ios-swift-skills:cross-platform-app-development-skillThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill focuses on building applications that work seamlessly across Apple's ecosystem: iOS, iPadOS, macOS, watchOS, and tvOS. It emphasizes adaptive design, platform-specific optimizations, and shared codebases using SwiftUI.
This skill focuses on building applications that work seamlessly across Apple's ecosystem: iOS, iPadOS, macOS, watchOS, and tvOS. It emphasizes adaptive design, platform-specific optimizations, and shared codebases using SwiftUI.
Unified Codebase: Use SwiftUI for maximum code sharing across platforms.
Adaptive Layouts: Design interfaces that adapt to different screen sizes and orientations.
Platform-Specific Features: Leverage unique capabilities of each platform while maintaining consistency.
Environment Awareness: Use environment values to detect platform, size classes, and capabilities.
Progressive Enhancement: Start with core functionality and add platform-specific features.
Testing Across Platforms: Regularly test on all target platforms.
User Prompt: "Create an adaptive layout that works on both iPhone and iPad."
Expected Output:
import SwiftUI
struct AdaptiveContentView: View {
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
var body: some View {
Group {
if horizontalSizeClass == .compact {
// iPhone portrait or small screens
VStack {
HeaderView()
ContentListView()
FooterView()
}
} else {
// iPad or wide screens
HStack {
SidebarView()
VStack {
HeaderView()
ContentListView()
}
DetailView()
}
}
}
}
}
struct HeaderView: View {
var body: some View {
Text("App Header")
.font(.largeTitle)
.padding()
}
}
struct ContentListView: View {
var body: some View {
List(1...10, id: \.self) { item in
Text("Item \(item)")
}
}
}
struct SidebarView: View {
var body: some View {
Text("Sidebar")
.frame(width: 200)
.background(Color.gray.opacity(0.2))
}
}
struct DetailView: View {
var body: some View {
Text("Detail View")
.frame(maxWidth: .infinity)
.background(Color.blue.opacity(0.1))
}
}
struct FooterView: View {
var body: some View {
Text("Footer")
.padding()
}
}
User Prompt: "How do I implement platform-specific features in a shared SwiftUI codebase?"
Expected Output:
import SwiftUI
struct CrossPlatformView: View {
var body: some View {
VStack {
Text("Shared Content")
#if os(iOS)
iOSOnlyView()
#elseif os(macOS)
MacOnlyView()
#elseif os(watchOS)
WatchOnlyView()
#elseif os(tvOS)
TVOnlyView()
#endif
}
}
}
#if os(iOS)
struct iOSOnlyView: View {
var body: some View {
Button("iOS Specific Button") {
// iOS specific action
}
.buttonStyle(.borderedProminent)
}
}
#endif
#if os(macOS)
struct MacOnlyView: View {
var body: some View {
Button("macOS Specific Button") {
// macOS specific action
}
.buttonStyle(.bordered)
}
}
#endif
#if os(watchOS)
struct WatchOnlyView: View {
var body: some View {
Text("WatchOS Interface")
.font(.caption)
}
}
#endif
#if os(tvOS)
struct TVOnlyView: View {
var body: some View {
Button("TV Button") {
// TV specific action
}
.font(.title)
.padding()
}
}
#endif
User Prompt: "Adapt a view based on the current platform and color scheme using environment values."
Expected Output:
import SwiftUI
struct EnvironmentAdaptiveView: View {
@Environment(\.colorScheme) private var colorScheme
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
var body: some View {
ZStack {
(colorScheme == .dark ? Color.black : Color.white)
.edgesIgnoringSafeArea(.all)
VStack(spacing: platformSpacing) {
Text(platformTitle)
.font(platformFont)
.foregroundColor(colorScheme == .dark ? .white : .black)
HStack(spacing: horizontalSizeClass == .compact ? 10 : 20) {
ForEach(0..<3) { index in
RoundedRectangle(cornerRadius: 10)
.fill(Color.blue.opacity(0.3))
.frame(width: itemWidth, height: itemHeight)
.overlay(
Text("Item \(index + 1)")
.foregroundColor(.primary)
)
}
}
}
.padding()
}
}
private var platformTitle: String {
#if os(iOS)
return "iOS App"
#elseif os(macOS)
return "macOS App"
#elseif os(watchOS)
return "watchOS App"
#elseif os(tvOS)
return "tvOS App"
#else
return "Cross-Platform App"
#endif
}
private var platformFont: Font {
#if os(watchOS)
return .headline
#elseif os(tvOS)
return .largeTitle
#else
return .title
#endif
}
private var platformSpacing: CGFloat {
#if os(watchOS)
return 8
#else
return 20
#endif
}
private var itemWidth: CGFloat {
horizontalSizeClass == .compact ? 80 : 120
}
private var itemHeight: CGFloat {
#if os(watchOS)
return 40
#else
return horizontalSizeClass == .compact ? 80 : 100
#endif
}
}
User Prompt: "Implement navigation that adapts to different platforms automatically."
Expected Output:
import SwiftUI
struct AdaptiveNavigationView: View {
var body: some View {
#if os(macOS)
NavigationView {
SidebarList()
DetailView()
}
.frame(minWidth: 800, minHeight: 600)
#else
NavigationView {
SidebarList()
DetailView()
}
.navigationViewStyle(.stack) // For iOS, ensures stack navigation
#endif
}
}
struct SidebarList: View {
@State private var selectedItem: String?
var body: some View {
List(selection: $selectedItem) {
ForEach(["Item 1", "Item 2", "Item 3"], id: \.self) { item in
NavigationLink(destination: DetailView(item: item)) {
Text(item)
}
}
}
.listStyle(.sidebar)
.navigationTitle("Items")
}
}
struct DetailView: View {
let item: String?
var body: some View {
ZStack {
Color.gray.opacity(0.1)
.edgesIgnoringSafeArea(.all)
VStack {
if let item = item {
Text("Detail for \(item)")
.font(.largeTitle)
} else {
Text("Select an item")
.font(.title)
.foregroundColor(.secondary)
}
}
}
.navigationTitle(item ?? "Detail")
}
}
User Prompt: "Use GeometryReader to create a layout that adapts to available space."
Expected Output:
import SwiftUI
struct GeometryAdaptiveView: View {
var body: some View {
GeometryReader { geometry in
VStack {
Text("Available width: \(Int(geometry.size.width))")
Text("Available height: \(Int(geometry.size.height))")
if geometry.size.width > geometry.size.height {
// Landscape or wide layout
HStack {
Rectangle()
.fill(Color.red.opacity(0.3))
.frame(width: geometry.size.width * 0.4, height: 100)
Rectangle()
.fill(Color.blue.opacity(0.3))
.frame(width: geometry.size.width * 0.4, height: 100)
}
} else {
// Portrait or narrow layout
VStack {
Rectangle()
.fill(Color.red.opacity(0.3))
.frame(width: geometry.size.width * 0.8, height: 100)
Rectangle()
.fill(Color.blue.opacity(0.3))
.frame(width: geometry.size.width * 0.8, height: 100)
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
// Advanced example: Multi-column layout
struct MultiColumnView: View {
let items = Array(1...20)
var body: some View {
GeometryReader { geometry in
ScrollView {
LazyVGrid(columns: adaptiveColumns(for: geometry.size.width), spacing: 16) {
ForEach(items, id: \.self) { item in
ZStack {
RoundedRectangle(cornerRadius: 12)
.fill(Color.blue.opacity(0.2))
.frame(height: 100)
Text("Item \(item)")
.font(.headline)
}
}
}
.padding()
}
}
}
private func adaptiveColumns(for width: CGFloat) -> [GridItem] {
if width > 800 {
return Array(repeating: GridItem(.flexible(), spacing: 16), count: 4)
} else if width > 600 {
return Array(repeating: GridItem(.flexible(), spacing: 16), count: 3)
} else if width > 400 {
return Array(repeating: GridItem(.flexible(), spacing: 16), count: 2)
} else {
return [GridItem(.flexible())]
}
}
}
npx claudepluginhub fal3/claude-skills-collection --plugin ios-swift-skillsGuides Apple HIG-compliant layout and navigation for iOS, iPadOS, macOS, visionOS using sidebars, tab bars, split views, column views, and adaptive patterns.
SwiftUI fundamentals for all Apple platforms. Use when building views, navigation, data persistence, or state management with SwiftUI across iOS, macOS, iPadOS, watchOS, visionOS.
Apple Human Interface Guidelines for layout and navigation. Covers sidebars, split views, tab bars, scroll views, adaptive patterns for iOS, iPadOS, macOS, visionOS.