# Create View

> Create a new SwiftUI view with ViewModel following project patterns. Use when you need to scaffold a new view component.

- Skill: `duboc/create-view` (Agent Skill)
- Install (CLI): `npx skillmds@latest add duboc/create-view`
- Raw SKILL.md: https://api.skillmd.com/api/skills/duboc/create-view/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: duboc (https://skillmd.com/u/duboc)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/duboc/create-view

---


# Create SwiftUI View

Create a new SwiftUI view with ViewModel following project conventions.

## Workflow

### 1. Gather Information
- View name from user request
- Purpose and functionality
- Data requirements

### 2. Analyze Existing Patterns
- Read existing views for style reference
- Check project structure for file placement
- Review existing ViewModels for patterns

### 3. Create Files

#### View File: `Features/[Feature]/Views/[Name]View.swift`
```swift
import SwiftUI

struct [Name]View: View {
    @State private var viewModel = [Name]ViewModel()

    var body: some View {
        NavigationStack {
            content
                .navigationTitle("[Name]")
                .task { await viewModel.load() }
        }
    }

    @ViewBuilder
    private var content: some View {
        if viewModel.isLoading {
            ProgressView()
        } else if let error = viewModel.error {
            ErrorView(error: error, retry: { Task { await viewModel.load() } })
        } else {
            // Main content
            Text("Hello, [Name]!")
        }
    }
}

#Preview {
    [Name]View()
}
```

#### ViewModel File: `Features/[Feature]/ViewModels/[Name]ViewModel.swift`
```swift
import Foundation

@Observable
final class [Name]ViewModel {
    var isLoading = false
    var error: Error?

    private let service: [Service]Protocol

    init(service: [Service]Protocol = [Service]()) {
        self.service = service
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }

        do {
            // Load data
        } catch {
            self.error = error
        }
    }
}
```

### 4. Add Preview Provider
Ensure preview works with mock data.

### 5. Follow Project Patterns
- Use existing navigation patterns
- Apply project styling conventions
- Ensure accessibility compliance

## Checklist
- [ ] View created in correct directory
- [ ] ViewModel created with @Observable
- [ ] Preview provider added
- [ ] Follows project naming conventions
- [ ] Uses dependency injection
- [ ] Has loading and error states