swiftui-view-refactor

---
name: swiftui-view-refactor
description: "Use when working with swiftUI view refactor/review: layout, DI, Observation, view models from steipete/agent-scripts."
source: https://github.com/steipete/agent-scripts/tree/main/skills/swiftui-view-refactor
generated: 2026-05-27T20:56:43.386Z
category: framework
audience: engineers
---

## When to use

- Using the swiftui-view-refactor skill's upstream workflow, guardrails, and local-tool assumptions.
- Auditing commands or operational steps before changing swiftui view refactor behavior.
- Needing a compact agent reference for swiftUI view refactor/review: layout, DI, Observation, view models.

## Key concepts

### Overview

Apply a consistent structure and dependency pattern to SwiftUI views, with a focus on ordering, Model-View (MV) patterns, careful view model handling, and correct Observation usage.

### Core Guidelines

Core Guidelines guidance for the swiftui-view-refactor skill.

### 1) View ordering (top → bottom)

Environment private/public let @State / other stored properties computed var (non-view) init body computed view builders / other view helpers helper / async functions.

### 2) Prefer MV (Model-View) patterns

Default to MV: Views are lightweight state expressions; models/services own business logic. Favor @State, @Environment, @Query, and task/onChange for orchestration. Inject services and shared models via @Environment; keep views small and composable. Split large views into subviews rather than introducing a view model.

### 3) Split large bodies and view properties

If body grows beyond a screen or has multiple logical sections, split it into smaller subviews. Extract large computed view properties (var header: some View {... }) into dedicated View types when they carry state or complex branching. It's fine to keep related subviews as computed view properties in the same file; extract to a standalone View struct only when it structurally makes sense or when reuse is intended. Prefer passing small inputs (data, bindings, callbacks) over reusing the...

### 4) View model handling (only if already present)

Do not introduce a view model unless the request or existing code clearly calls for one. If a view model exists, make it non-optional when possible. Pass dependencies to the view via init, then pass them into the view model in the view's init. Avoid bootstrapIfNeeded patterns. Example (Observation-based):.

## API reference

```
npx skills add steipete/agent-scripts --skill swiftui-view-refactor
```

Install the swiftui-view-refactor skill from steipete/agent-scripts.

```
npx skills add steipete/agent-scripts --skill swiftui-view-refactor
```

```
var body: some View {.
```

Command or snippet documented by the upstream swiftui-view-refactor skill.

```
var body: some View {
    VStack(alignment: .leading, spacing: 16) {
        HeaderSection(title: title, isPinned: isPinned)
        DetailsSection(details: details)
        ActionsSection(onSave: onSave, onCancel: onCancel)
    }
}
```

```
var body: some View {.
```

Command or snippet documented by the upstream swiftui-view-refactor skill.

```
var body: some View {
    List {
        header
        filters
        results
        footer
    }
}

private var header: some View {
    VStack(alignment: .leading, spacing: 6) {
        Text(title).font(.title2)
        Text(subtitle).font(.subheadline)
    }
}

private var filters: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            ForEach(filterOptions, id: \.self) { option in
                FilterChip(option: option, isSelected: option == selectedFilter)
                    .onTapGesture { selectedFilter = option }
            }
        }
    }
}
```

```
private var header: some View {.
```

Command or snippet documented by the upstream swiftui-view-refactor skill.

```
private var header: some View {
    HeaderSection(title: title, subtitle: subtitle, status: status)
}

private struct HeaderSection: View {
    let title: String
    let subtitle: String?
    let status: Status

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(title).font(.headline)
            if let subtitle { Text(subtitle).font(.subheadline) }
            StatusBadge(status: status)
        }
    }
}
```

```
@State private var viewModel: SomeViewModel.
```

Command or snippet documented by the upstream swiftui-view-refactor skill.

```
@State private var viewModel: SomeViewModel

init(dependency: Dependency) {
    _viewModel = State(initialValue: SomeViewModel(dependency: dependency))
}
```

## Gotchas

- Prefer passing small inputs (data, bindings, callbacks) over reusing the entire parent view state.
- Do not introduce a view model unless the request or existing code clearly calls for one.
- Avoid bootstrapIfNeeded patterns.
- Prefer small, explicit helpers over large conditional blocks.

---
Generated by SkillMake from https://github.com/steipete/agent-scripts/tree/main/skills/swiftui-view-refactor on 2026-05-27T20:56:43.386Z.
Verify against source before relying on details.

File: ~/.claude/skills/swiftui-view-refactor/SKILL.md