loulanyue/awesome-claude-notes-swiftui-patterns
SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.
This is a copy. The original lives at mturac/everything-openai-codex-swiftui-patterns.
npx skills add https://github.com/loulanyue/awesome-claude-notes --skill swiftui-patternsModern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.
@State, @Observable, @Binding)NavigationStackChoose the simplest wrapper that fits:
| Wrapper | Use Case |
|---------|----------|
| @State | View-local value types (toggles, form fields, sheet presentation) |
| @Binding | Two-way reference to parent's @State |
| @Observable class + @State | Owned model with multiple properties |
| @Observable class (no wrapper) | Read-only reference passed from parent |
| @Bindable | Two-way binding to an @Observable property |
| @Environment | Shared dependencies injected via .environment() |
Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:
@Observable
final class ItemListViewModel {
private(set) var items: [Item] = []
private(set) var isLoading = false
var searchText = ""
private let repository: any ItemRepository
init(repository: any ItemRepository = DefaultItemRepository()) {
self.repository = repository
}
func load() async {
isLoading = true
defer { isLoading = false }
items = (try? await repository.fetchAll()) ?? []
}
}
struct ItemListView: View {
@State private var viewModel: ItemListViewModel
init(viewModel: ItemListViewModel = ItemListViewModel()) {
_viewModel = State(initialValue: viewModel)
}
var body: some View {
List(viewModel.items) { item in
ItemRow(item: item)
}
.searchable(text: $viewModel.searchText)
.overlay { if viewModel.isLoading { ProgressView() } }
.task { await viewModel.load() }
}
}
Replace @EnvironmentObject with @Environment:
// Inject
ContentView()
.environment(authManager)
// Consume
struct ProfileView: View {
@Environment(AuthManager.self) private var auth
var body: some View {
Text(auth.currentUser?.name ?? "Guest")
}
}
Break views into small, focused structs. When state changes, only the subview reading that state re-renders:
struct OrderView: View {
@State private var viewModel = OrderViewModel()
var body: some View {
VStack {
OrderHeader(title: viewModel.title)
OrderItemList(items: viewModel.items)
OrderTotal(total: viewModel.total)
}
}
}
struct CardModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(.regularMaterial)
.clipShape(RoundedRectangle(cornerRadius: 12))
}
}
extension View {
func cardStyle() -> some View {
modifier(CardModifier())
}
}
Use NavigationStack with NavigationPath for programmatic, type-safe routing:
@Observable
final class Router {
var path = NavigationPath()
func navigate(to destination: Destination) {
path.append(destination)
}
func popToRoot() {
path = NavigationPath()
}
}
enum Destination: Hashable {
case detail(Item.ID)
case settings
case profile(User.ID)
}
struct RootView: View {
@State private var router = Router()
var body: some View {
NavigationStack(path: $router.path) {
HomeView()
.navigationDestination(for: Destination.self) { dest in
switch dest {
case .detail(let id): ItemDetailView(itemID: id)
case .settings: SettingsView()
case .profile(let id): ProfileView(userID: id)
}
}
}
.environment(router)
}
}
LazyVStack and LazyHStack create views only when visible:
ScrollView {
LazyVStack(spacing: 8) {
ForEach(items) { item in
ItemRow(item: item)
}
}
}
Always use stable, unique IDs in ForEach — avoid using array indices:
// Use Identifiable conformance or explicit id
ForEach(items, id: \.stableID) { item in
ItemRow(item: item)
}
body.task {} for async work — it cancels automatically when the view disappears.sensoryFeedback() and .geometryGroup() sparingly in scroll views.shadow(), .blur(), and .mask() in lists — they trigger offscreen renderingFor views with expensive bodies, conform to Equatable to skip unnecessary re-renders:
struct ExpensiveChartView: View, Equatable {
let dataPoints: [DataPoint] // DataPoint must conform to Equatable
static func == (lhs: Self, rhs: Self) -> Bool {
lhs.dataPoints == rhs.dataPoints
}
var body: some View {
// Complex chart rendering
}
}
Use #Preview macro with inline mock data for fast iteration:
#Preview("Empty state") {
ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}
#Preview("Loaded") {
ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}
ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observablebody or init — use .task {} or explicit load methods@State inside child views that don't own the data — pass from parent insteadAnyView type erasure — prefer @ViewBuilder or Group for conditional viewsSendable requirements when passing data to/from actorsSee skill: swift-actor-persistence for actor-based persistence patterns.
See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.
Take loulanyue/awesome-claude-notes-swiftui-patterns from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.