FOSMVVM SwiftUI View Generator

Generate SwiftUI views that render FOSMVVM ViewModels.

Conceptual Foundation

For full architecture context, see FOSMVVMArchitecture.md | OpenClaw reference

In FOSMVVM, Views are thin rendering layers that display ViewModels:

CODEBLOCK0

Key principle: Views don't transform or compute data. They render what the ViewModel provides.

View-ViewModel Alignment

The View filename should match the ViewModel it renders.

CODEBLOCK1

This alignment provides:

- Discoverability - Find the view for any ViewModel instantly
Consistency - Same naming discipline across the codebase
Maintainability - Changes to ViewModel are reflected in view location

Core Components

1. ViewModelView Protocol

Every view conforms to ViewModelView:

CODEBLOCK2

Required:

- INLINECODE1
INLINECODE2
Conforms to ViewModelView protocol

2. Operations (Optional)

Interactive views have operations:

CODEBLOCK3

When views have operations:

- Store operations from viewModel.operations in init
Add @State private var repaintToggle = false (DEBUG only)
Add .testDataTransporter(viewModelOps:repaintToggle:) modifier (DEBUG only)
Call toggleRepaint() after every operation invocation

3. Child View Binding

Parent views bind child views using .bind(appState:):

CODEBLOCK4

The .bind() pattern:

- Child views use .bind(appState:) to receive data from parent
Parent creates child's AppState from its own ViewModel data
Enables composition without tight coupling

4. Form Views with Validation

Forms use FormFieldView and Validations environment:

CODEBLOCK5

Form patterns:

- @Environment(Validations.self) for validation state
INLINECODE16 for each input field
INLINECODE17 for async actions
INLINECODE18 on submit button
Separate handling for validation errors vs general errors

5. Previews

Use .previewHost() for SwiftUI previews:

CODEBLOCK6

View Categories

Display-Only Views

Views that just render data (no user interactions):

CODEBLOCK7

Characteristics:

- No operations property
No repaintToggle or INLINECODE22
Just renders ViewModel properties
May have conditional rendering based on ViewModel state

Interactive Views

Views with user actions:

CODEBLOCK8

Form Views

Views with validated input fields:

- Use FormFieldView for each input
INLINECODE24 for validation state
Button disabled when INLINECODE25
Separate error handling for validation vs operation errors

Container Views

Views that compose child views:

CODEBLOCK9

When to Use This Skill

- Creating a new SwiftUI view for a FOSMVVM app
Building UI to render a ViewModel
Following an implementation plan that requires new views
Creating forms with validation
Building container views that compose child views

What This Skill Generates

File	Location	Purpose
INLINECODE26	INLINECODE27	The SwiftUI view

Note: The corresponding ViewModel and ViewModelOperations should already exist (use fosmvvm-viewmodel-generator skill).

Project Structure Configuration

Placeholder	Description	Example
INLINECODE29	View name (without "View" suffix)	INLINECODE30, INLINECODE31
INLINECODE32

SwiftUI views SPM target | MyAppViews | | {Feature} | Feature/module grouping | Tasks, Auth |

Pattern Implementation

This skill references conversation context to determine view structure:

View Type Detection

From conversation context, the skill identifies:

- ViewModel structure (from prior discussion or specifications read by Claude)
View category: Display-only, interactive, form, or container
Operations needed: Whether view has user-initiated actions
Child composition: Whether view binds child views

Component Selection

Based on view type:

- Display-only: ViewModelView protocol, viewModel property only
Interactive: Add operations, repaintToggle, testDataTransporter, toggleRepaint()
Form: Add Validations environment, FormFieldView, validation error handling
Container: Add child view .bind() calls

Code Generation

Generates view file with:

1. ViewModelView protocol conformance
Properties (viewModel, operations if needed, repaintToggle if interactive)
Body with rendering logic
Init storing viewModel and operations
Action methods (if interactive)
Test infrastructure (if interactive)
Previews for different states

Context Sources

Skill references information from:

- Prior conversation: Requirements discussed with user
Specification files: If Claude has read specifications into context
ViewModel definitions: From codebase or discussion

Key Patterns

Error Handling Pattern

CODEBLOCK10

Validation Error Pattern

For forms, handle validation errors separately:

CODEBLOCK11

Async Task Pattern

CODEBLOCK12

Conditional Rendering Pattern

Use ViewModel state for conditionals:

CODEBLOCK13

Computed View Components Pattern

Extract reusable view fragments as computed properties:

CODEBLOCK14

Result/Error Handling Pattern

When a view needs to render multiple possible ViewModels (success, various error types), use an enum wrapper:

The Wrapper ViewModel:
CODEBLOCK15

The View:
CODEBLOCK16

Key principles:

- Each error scenario has its own ViewModel type
The wrapper enum associates specific ViewModels with each case
The view switches on the enum and renders the appropriate child view
Maintains type safety (no any ViewModel existentials)
No generic error handling - each error type is specific and meaningful

ViewModelId Initialization - CRITICAL

IMPORTANT: ViewModelId controls SwiftUI's view identity system via the .id(vmId) modifier. Incorrect initialization causes SwiftUI to treat different data as the same view, breaking updates.

❌ WRONG - Never use this:
CODEBLOCK17

✅ MINIMUM - Use type-based identity:

public var vmId: ViewModelId = .init(type: Self.self)

This ensures views of the same type get unique identities.

✅ IDEAL - Use data-based identity when available:
CODEBLOCK19

Why this matters:

- SwiftUI uses .id() modifier to determine when to recreate vs update views
INLINECODE43 provides this identity for ViewModelViews
Wrong identity = views don't update when data changes
Data-based identity (.init(id:)) is best because it ties view lifecycle to data lifecycle

File Organization

CODEBLOCK20

Common Mistakes

Computing Data in Views

CODEBLOCK21

Forgetting to Call toggleRepaint()

CODEBLOCK22

Using Computed Properties for Display

CODEBLOCK23

Hardcoding Text

CODEBLOCK24

Missing Error Binding

CODEBLOCK25

Storing Operations in Body Instead of Init

CODEBLOCK26

Mismatched Filenames

CODEBLOCK27

Incorrect ViewModelId Initialization

CODEBLOCK28

Force-Unwrapping Localizable Strings

CODEBLOCK29

Why this matters:

FOSMVVM provides the Localizable protocol for all localized strings and includes SwiftUI init overloads for common elements like Text. However, not every SwiftUI element has a Localizable overload yet.

When you encounter a SwiftUI element that doesn't accept Localizable directly:

1. DON'T work around it with try! localizable.localizedString - this bypasses the type system and spreads force-unwrap calls throughout the view code
DO request that we add the proper init overload to FOSUtilities for that SwiftUI element
The pattern is simple: Extensions that accept Localizable and pass .localized to the standard initializer

This approach keeps the codebase clean, type-safe, and eliminates force-unwraps from view code entirely.

File Templates

See reference.md for complete file templates.

Naming Conventions

Concept	Convention	Example
View struct	INLINECODE52	INLINECODE53, INLINECODE54
ViewModel property

Common Modifiers

FOSMVVM-Specific Modifiers

CODEBLOCK30

Standard SwiftUI Modifiers

Apply standard modifiers as needed for layout, styling, etc.

How to Use This Skill

Invocation:
CODEBLOCK31

Prerequisites:

- ViewModel and its structure are understood from conversation
Optionally, specification files have been read into context
View requirements (display-only, interactive, form, container) are clear from discussion

Output:

- {ViewName}View.swift - SwiftUI view conforming to ViewModelView protocol

Workflow integration:
This skill is typically used after discussing requirements or reading specification files. The skill references that context automatically—no file paths or Q&A needed.

Version History

Version	Date	Changes
1.0	2026-01-23	Initial skill for SwiftUI view generation

FOSMVVM SwiftUI 视图生成器

生成渲染 FOSMVVM ViewModel 的 SwiftUI 视图。

概念基础

完整架构上下文请参阅 FOSMVVMArchitecture.md | OpenClaw 参考

在 FOSMVVM 中，视图是渲染 ViewModel 的薄渲染层：

┌─────────────────────────────────────────────────────────────┐
│ ViewModelView 模式 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ViewModel (数据) ViewModelView (SwiftUI) │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ title: String │────►│ Text(vm.title) │ │
│ │ items: [Item] │────►│ ForEach(vm.items)│ │
│ │ isEnabled: Bool │────►│ .disabled(!...) │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ 操作 (Actions) │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ submit() │◄────│ Button(action:) │ │
│ │ cancel() │◄────│ .onAppear { } │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘

关键原则： 视图不转换或计算数据。它们只渲染 ViewModel 提供的内容。

视图-ViewModel 对齐

视图文件名应与其渲染的 ViewModel 匹配。

Sources/
{ViewModelsTarget}/
{Feature}/
{Feature}ViewModel.swift ←──┐
{Entity}CardViewModel.swift ←──┼── 相同名称
│
{ViewsTarget}/ │
{Feature}/ │
{Feature}View.swift ────┤ (渲染 {Feature}ViewModel)
{Entity}CardView.swift ────┘ (渲染 {Entity}CardViewModel)

这种对齐提供了：

- 可发现性 - 即时找到任何 ViewModel 对应的视图
一致性 - 整个代码库使用相同的命名规范
可维护性 - ViewModel 的更改会反映在视图位置中

核心组件

1. ViewModelView 协议

每个视图都遵循 ViewModelView 协议：

swift
public struct MyView: ViewModelView {
private let viewModel: MyViewModel

public var body: some View {
Text(viewModel.title)
}

public init(viewModel: MyViewModel) {
self.viewModel = viewModel
}
}

必需：

- private let viewModel: {ViewModel}
public init(viewModel:)
遵循 ViewModelView 协议

2. 操作（可选）

交互式视图具有操作：

swift
public struct MyView: ViewModelView {
private let viewModel: MyViewModel
private let operations: MyViewModelOperations

#if DEBUG
@State private var repaintToggle = false
#endif

public var body: some View {
Button(action: performAction) {
Text(viewModel.buttonLabel)
}
#if DEBUG
.testDataTransporter(viewModelOps: operations, repaintToggle: $repaintToggle)
#endif
}

public init(viewModel: MyViewModel) {
self.viewModel = viewModel
self.operations = viewModel.operations
}

private func performAction() {
operations.performAction()
toggleRepaint()
}

private func toggleRepaint() {
#if DEBUG
repaintToggle.toggle()
#endif
}
}

当视图具有操作时：

- 在 init 中从 viewModel.operations 存储 operations
添加 @State private var repaintToggle = false（仅 DEBUG）
添加 .testDataTransporter(viewModelOps:repaintToggle:) 修饰符（仅 DEBUG）
每次操作调用后调用 toggleRepaint()

3. 子视图绑定

父视图使用 .bind(appState:) 绑定子视图：

swift
public struct ParentView: ViewModelView {
@Environment(AppState.self) private var appState
private let viewModel: ParentViewModel

public var body: some View {
VStack {
Text(viewModel.title)

// 使用父视图数据的子集绑定子视图
ChildView.bind(
appState: .init(
itemId: viewModel.selectedId,
isConnected: viewModel.isConnected
)
)
}
}
}

.bind() 模式：

- 子视图使用 .bind(appState:) 从父视图接收数据
父视图从其自身的 ViewModel 数据创建子视图的 AppState
实现组合而不紧密耦合

4. 带验证的表单视图

表单使用 FormFieldView 和 Validations 环境：

swift
public struct MyFormView: ViewModelView {
@Environment(Validations.self) private var validations
@Environment(\.focusState) private var focusField
@State private var error: Error?

private let viewModel: MyFormViewModel
private let operations: MyFormViewModelOperations

public var body: some View {
Form {
FormFieldView(
fieldModel: viewModel.$email,
focusField: focusField,
fieldValidator: viewModel.validateEmail,
validations: validations
)

Button(errorBinding: $error, asyncAction: submit) {
Text(viewModel.submitButtonLabel)
}
.disabled(validations.hasError)
}
.onAsyncSubmit {
await submit()
}
.alert(
errorBinding: $error,
title: viewModel.errorTitle,
message: viewModel.errorMessage,
dismissButtonLabel: viewModel.dismissButtonLabel
)
}
}

表单模式：

- @Environment(Validations.self) 用于验证状态
每个输入字段使用 FormFieldView
异步操作使用 Button(errorBinding:asyncAction:)
提交按钮使用 .disabled(validations.hasError)
验证错误与一般错误分开处理

5. 预览

使用 .previewHost() 进行 SwiftUI 预览：

swift
#if DEBUG
#Preview {
MyView.previewHost(
bundle: MyAppResourceAccess.localizationBundle
)
.environment(AppState())
}

#Preview(带数据) {
MyView.previewHost(
bundle: MyAppResourceAccess.localizationBundle,
viewModel: .stub(title: 预览标题)
)
.environment(AppState())
}
#endif

视图类别

仅显示视图

仅渲染数据的视图（无用户交互）：

swift
public struct InfoView: ViewModelView {
private let viewModel: InfoViewModel

public var body: some View {
VStack {
Text(viewModel.title)
Text(viewModel.description)

if viewModel.isActive {
Text(viewModel.activeStatusLabel)
}
}
}

public init(viewModel: InfoViewModel) {
self.viewModel = viewModel
}
}

特征：

- 无 operations 属性
无 repaintToggle 或 testDataTransporter
仅渲染 ViewModel 属性
可能基于 ViewModel 状态进行条件渲染

交互式视图

具有用户操作的视图：

swift
public struct ActionView: ViewModelView {
@State private var error: Error?

private let viewModel: ActionViewModel
private let operations: ActionViewModelOperations

#if DEBUG
@State private var repaintToggle = false
#endif

public var body: some View {
VStack {
Button(action: performAction) {
Text(viewModel.actionLabel)
}

Button(role: .cancel, action: cancel) {
Text(viewModel.cancelLabel)
}
}
.alert(
errorBinding: $error,
title: viewModel.errorTitle,
message: viewModel.errorMessage,
dismissButtonLabel: viewModel.dismissButtonLabel
)
#if DEBUG
.testDataTransporter(viewModelOps: operations, repaintToggle: $repaintToggle)
#endif
}

public init(viewModel: ActionViewModel) {
self.viewModel = viewModel
self.operations = viewModel.operations
}

private func performAction() {
operations.performAction()
toggleRepaint()
}

private func cancel() {
operations.cancel()
toggleRepaint()
}

private func toggleRepaint() {
#if

fosmvvm-swiftui-view-generatorFOSMVVM视图生成器