Refactor and review SwiftUI view files for consistent structure, dependency injection, and Observation usage. Use when asked to clean up a SwiftUI view’s layout/ordering, handle view models safely (non-optional when possible), or standardize how dependencies and @Observable state are initialized and passed.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i Dimillian/Skills/swiftui-view-refactorMethod 2 - openskills (supports sync & update)
npx openskills install Dimillian/SkillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
Environment setup included
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.
private/public let@State / other stored propertiesvar (non-view)initbody@State, @Environment, @Query, and task/onChange for orchestration.@Environment; keep views small and composable.body grows beyond a screen or has multiple logical sections, split it into smaller subviews.var header: some View { ... }) into dedicated View types when they carry state or complex branching.View struct only when it structurally makes sense or when reuse is intended.Example (extracting a section):
var body: some View {
VStack(alignment: .leading, spacing: 16) {
HeaderSection(title: title, isPinned: isPinned)
DetailsSection(details: details)
ActionsSection(onSave: onSave, onCancel: onCancel)
}
}Example (long body → shorter body + computed views in the same file):
var body: some View {
List {
header
filters
results
footer
}
}
private var header: some View {
VStack(alignment: .leading, spacing: 6) {
Text(title).
Example (extracting a complex computed view):
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) returns completely different root branches using if/else.overlay, opacity, disabled, toolbar, row content, etc.).Prefer:
var body: some View {
List {
documentsListContent
}
.toolbar {
if canEdit {
editToolbar
}
}
}Avoid:
var documentsListView: some View {
if canEdit {
editableDocumentsList
} else {
readOnlyDocumentsList
}
}init, then pass them into the view model in the view's init.bootstrapIfNeeded patterns.Example (Observation-based):
@State private var viewModel: SomeViewModel
init(dependency: Dependency) {
_viewModel = State(initialValue: SomeViewModel(dependency: dependency))
}@Observable reference types, store them as @State in the root view.@State, @Environment, @Query, task, and onChange.if-based branch swapping; move conditions to localized sections/modifiers.@State view model initialized in init by passing dependencies from the view.@State for root @Observable view models, no redundant wrappers.body and non-view computed vars above init.references/mv-patterns.md.private extensions, separated with // MARK: - comments that describe their purpose (e.g., // MARK: - Actions, // MARK: - Subviews, // MARK: - Helpers). Keep the main struct focused on stored properties, init, and body, with view-building computed vars also grouped via marks when the file is long.