AI TOOLS RADAR
すべての Skills / AFFAAN-M
affaan-m/ecc

swiftui-patterns

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/affaan-m/ecc --skill swiftui-patterns

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

SwiftUI Patterns

Modern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.

When to Activate

  • Building SwiftUI views and managing state (@State, @Observable, @Binding)
  • Designing navigation flows with NavigationStack
  • Structuring view models and data flow
  • Optimizing rendering performance for lists and complex layouts
  • Working with environment values and dependency injection in SwiftUI

State Management

Property Wrapper Selection

Choose the simplest wrapper that fits:

WrapperUse Case
@StateView-local value types (toggles, form fields, sheet presentation)
@BindingTwo-way reference to parent's @State
@Observable class + @StateOwned model with multiple properties
@Observable class (no wrapper)Read-only reference passed from parent
@BindableTwo-way binding to an @Observable property
@EnvironmentShared dependencies injected via .environment()

@Observable ViewModel

Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:

swift
@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()) ?? []
    }
}

View Consuming the ViewModel

swift
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() }
    }
}

Environment Injection

Replace @EnvironmentObject with @Environment:

swift
// Inject
ContentView()
    .environment(authManager)

// Consume
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Guest")
    }
}

View Composition

Extract Subviews to Limit Invalidation

Break views into small, focused structs. When state changes, only the subview reading that state re-renders:

swift
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)
        }
    }
}

ViewModifier for Reusable Styling

swift
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())
    }
}

Navigation

Type-Safe NavigationStack

Use NavigationStack with NavigationPath for programmatic, type-safe routing:

swift
@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)
    }
}

Performance

Use Lazy Containers for Large Collections

LazyVStack and LazyHStack create views only when visible:

swift
ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Stable Identifiers

Always use stable, unique IDs in ForEach — avoid using array indices:

swift
// Use Identifiable conformance or explicit id
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Avoid Expensive Work in body

  • Never perform I/O, network calls, or heavy computation inside body
  • Use .task {} for async work — it cancels automatically when the view disappears
  • Use .sensoryFeedback() and .geometryGroup() sparingly in scroll views
  • Minimize .shadow(), .blur(), and .mask() in lists — they trigger offscreen rendering

Equatable Conformance

For views with expensive bodies, conform to Equatable to skip unnecessary re-renders:

swift
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
    }
}

Previews

Use #Preview macro with inline mock data for fast iteration:

swift
#Preview("Empty state") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("Loaded") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Anti-Patterns to Avoid

  • Using ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observable
  • Putting async work directly in body or init — use .task {} or explicit load methods
  • Creating view models as @State inside child views that don't own the data — pass from parent instead
  • Using AnyView type erasure — prefer @ViewBuilder or Group for conditional views
  • Ignoring Sendable requirements when passing data to/from actors

References

See skill: swift-actor-persistence for actor-based persistence patterns. See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.

タスクに関連する項目

affaan-m
コミュニティ

backend-patterns

Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.

導入数
3
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: 開発

affaan-m
コミュニティ

python-patterns

Pythonic idioms, PEP 8 standards, type hints, and best practices for building robust, efficient, and maintainable Python applications. Use when writing or reviewing Python code and idiomatic structure, typing, or PEP 8 is in question.

導入数
3
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: 開発

affaan-m
コミュニティ

rust-patterns

Idiomatic Rust patterns, ownership, error handling, traits, concurrency, and best practices for building safe, performant applications. Use when writing or reviewing Rust code and ownership, error handling, traits, or concurrency is in question.

導入数
3
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: 開発

affaan-m
コミュニティ

docker-patterns

Docker and Docker Compose patterns for local development, hardened CLI installer harnesses, container security, networking, volumes, and multi-service orchestration. Use when creating or reviewing Dockerfiles and Compose services, testing installers across Linux distributions, or planning accurate native macOS and Windows validation.

導入数
4
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: 開発

同じリポジトリから

関連する Skills

すべての Skills
affaan-m
コミュニティ

scientific-thinking-literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging. Use when the task is to find, screen, synthesize, and cite a body of academic or technical literature.

導入数
3
GitHub Stars
28.9万
更新日
10月25日
MIT1 ファイル
詳細を見る →
affaan-m
コミュニティ

docker-patterns

Docker and Docker Compose patterns for local development, hardened CLI installer harnesses, container security, networking, volumes, and multi-service orchestration. Use when creating or reviewing Dockerfiles and Compose services, testing installers across Linux distributions, or planning accurate native macOS and Windows validation.

導入数
4
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →
affaan-m
コミュニティ

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

導入数
3
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →
affaan-m
コミュニティ

backend-patterns

Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.

導入数
3
GitHub Stars
28.8万
更新日
10月20日
MIT1 ファイル
詳細を見る →