Develop SwiftUI applications for iOS/macOS. Use when writing SwiftUI views, managing state, or building Apple platform UIs.
/plugin marketplace add beshkenadze/claude-skills-marketplace/plugin install beshkenadze-skills-marketplace@beshkenadze/claude-skills-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
reference/hig-checklist.mdreference/state-management.mdExpert guidance for building professional SwiftUI applications targeting iOS 17+/macOS 14+ with modern patterns, accessibility compliance, and optimal performance.
When writing SwiftUI code, follow this workflow:
For simple views:
@State for local stateFor complex features:
@Observable macro (iOS 17+)@Environment for shared data// iOS 17+ Modern Pattern
@Observable
class FeatureViewModel {
var items: [Item] = []
@ObservationIgnored var cache: Cache? // Non-observed
}
struct FeatureView: View {
@State private var viewModel = FeatureViewModel()
var body: some View { ... }
}
Property Wrapper Selection:
| Wrapper | Use Case |
|---|---|
@State | Local value types, simple state, @Observable objects |
@Binding | Two-way connection to parent state |
@Environment | Shared app-wide data, system values |
@Observable | Modern observable objects (iOS 17+) |
.primary, .secondary).accessibilityLabel, .accessibilityHintLazyVStack/LazyHStack for listsbodyInput: "Create a settings view with dark mode toggle and notification preferences"
Output:
import SwiftUI
@Observable
class SettingsViewModel {
var isDarkMode: Bool {
didSet { UserDefaults.standard.set(isDarkMode, forKey: "darkMode") }
}
var notificationsEnabled: Bool {
didSet { UserDefaults.standard.set(notificationsEnabled, forKey: "notifications") }
}
init() {
isDarkMode = UserDefaults.standard.bool(forKey: "darkMode")
notificationsEnabled = UserDefaults.standard.bool(forKey: "notifications")
}
}
struct SettingsView: View {
@State private var viewModel = SettingsViewModel()
var body: some View {
Form {
Section("Appearance") {
Toggle("Dark Mode", isOn: $viewModel.isDarkMode)
.accessibilityHint("Switches between light and dark appearance")
}
Section("Notifications") {
Toggle("Enable Notifications", isOn: $viewModel.notificationsEnabled)
.accessibilityHint("Allows the app to send you notifications")
}
}
.navigationTitle("Settings")
}
}
Input: "Create a list of items with detail navigation"
Output:
import SwiftUI
struct Item: Identifiable {
let id = UUID()
let title: String
let subtitle: String
}
struct ItemListView: View {
let items: [Item]
var body: some View {
List(items) { item in
NavigationLink(value: item) {
VStack(alignment: .leading, spacing: 4) {
Text(item.title)
.font(.headline)
Text(item.subtitle)
.font(.subheadline)
.foregroundStyle(.secondary)
}
.padding(.vertical, 4)
}
.accessibilityLabel("\(item.title), \(item.subtitle)")
}
.navigationTitle("Items")
.navigationDestination(for: Item.self) { item in
ItemDetailView(item: item)
}
}
}
Input: "Create a view that loads data from an API"
Output:
import SwiftUI
@Observable
class DataViewModel {
var items: [Item] = []
var isLoading = false
var errorMessage: String?
func loadData() async {
isLoading = true
errorMessage = nil
do {
items = try await APIService.shared.fetchItems()
} catch {
errorMessage = error.localizedDescription
}
isLoading = false
}
}
struct DataView: View {
@State private var viewModel = DataViewModel()
var body: some View {
Group {
if viewModel.isLoading {
ProgressView("Loading...")
} else if let error = viewModel.errorMessage {
ContentUnavailableView(
"Error",
systemImage: "exclamationmark.triangle",
description: Text(error)
)
} else {
List(viewModel.items) { item in
Text(item.title)
}
}
}
.task {
await viewModel.loadData()
}
.refreshable {
await viewModel.loadData()
}
}
}
@Observable for iOS 17+ projects (better performance).font(.body) etc.LazyVStack/LazyHStack for large collections@State with reference types (causes memory leaks)@ObservedObject to create objects in view (use @StateObject or @State)body property.presentationSizing(.form) for sheets@Entry macro for environment keysSee reference/ directory for:
state-management.md - Property wrapper decision guidehig-checklist.md - HIG compliance checklistCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.