Skip to main content
swiftui-view-generator Generate SwiftUI views with proper state management (@State, @Binding, @ObservedObject, @StateObject) and macOS-specific patterns
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/a5c-ai/babysitter --skill swiftui-view-generatorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
assimilate-popular-workflows This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
name swiftui-view-generator description Generate SwiftUI views with proper state management (@State, @Binding, @ObservedObject, @StateObject) and macOS-specific patterns allowed-tools Read, Write, Edit, Bash, Glob, Grep tags ["swiftui","macos","swift","ui","apple"] graph {"domains":["domain:software-engineering"],"specializations":["specialization:desktop-development"],"skillAreas":["skill-area:desktop-ui-frameworks","skill-area:ui-component-libraries"],"roles":["role:desktop-developer","role:fullstack-engineer"],"workflows":["workflow:feature-development","workflow:release-management"]}
swiftui-view-generator
Generate SwiftUI views with proper state management for macOS applications. This skill creates well-structured SwiftUI components using @State, @Binding, @ObservedObject, @StateObject, and @EnvironmentObject property wrappers.
Capabilities
Generate SwiftUI views with proper state management
Create reusable view components
Set up data flow with Combine
Implement navigation patterns
Generate macOS-specific UI elements
Create preference-based layouts
Set up environment values
Generate preview providers
Input Schema
{
"type" : "object" ,
"properties" : {
"projectPath" : {
"type" : "string" ,
"description" : "Path to the Swift project"
} ,
"viewName" : {
"type" : "string" ,
"description" : "Name of the view to generate"
} ,
"viewType" : {
"enum" : [ "screen" , "component" , "list" , "form" , "settings" , "sheet" ] ,
"default" : "screen"
} ,
"stateProperties" : {
"type" : "array" ,
"items" : {
"type" : "object" ,
"properties" : {
"name" : { "type" : "string" } ,
"type" : { "type" : "string" } ,
"wrapper" : { "enum" : [ "State" , "Binding" , "ObservedObject" , "StateObject" , "EnvironmentObject" ] }
}
}
} ,
"includeViewModel" : {
"type" : "boolean" ,
"default" : true } ,
"macOSSpecific" : {
"type" : "boolean" ,
"default" : true }
} ,
"required" : [ "projectPath" , "viewName" ]
}
Output Schema {
"type" : "object" ,
"properties" : {
"success" : { "type" : "boolean" } ,
"files" : {
"type" : "array" ,
"items" : {
"type" : "object" ,
"properties" : {
"path" : { "type" : "string" } ,
"type" : { "enum" : [ "view" , "viewmodel" , "model" ] }
}
}
}
} ,
"required" : [ "success" ]
}
Generated SwiftUI View Example
import SwiftUI
struct ContentView : View {
@StateObject private var viewModel = ContentViewModel ()
@State private var searchText = ""
@State private var isShowingSettings = false
var body: some View {
NavigationSplitView {
SidebarView (selection: $viewModel .selectedCategory)
} detail: {
if let category = viewModel.selectedCategory {
CategoryDetailView (category: category)
} else {
Text ("Select a category" )
.foregroundStyle(.secondary)
}
}
.searchable(text: $searchText , prompt: "Search items..." )
.onChange(of: searchText) { _ , newValue in
viewModel.search(query: newValue)
}
.toolbar {
ToolbarItemGroup {
Button (action: viewModel.refresh) {
Label ("Refresh" , systemImage: "arrow.clockwise" )
}
Button (action: { isShowingSettings = true }) {
Label ("Settings" , systemImage: "gear" )
}
}
}
.sheet(isPresented: $isShowingSettings ) {
SettingsView ()
}
.task {
await viewModel.loadData()
}
}
}
#Preview {
ContentView ()
}
#Preview ("With Data" ) {
ContentView ()
.environmentObject(PreviewData .sampleViewModel)
}
ViewModel
import SwiftUI
import Combine
@MainActor
class ContentViewModel : ObservableObject {
@Published var items: [Item ] = []
@Published var selectedCategory: Category ?
@Published var isLoading = false
@Published var errorMessage: String ?
private let dataService: DataService
private var cancellables = Set <AnyCancellable >()
init (dataService : DataService = .shared) {
self .dataService = dataService
}
func loadData () async {
isLoading = true
errorMessage = nil
do {
items = try await dataService.fetchItems()
} catch {
errorMessage = error.localizedDescription
}
isLoading = false
}
func search (query : String ) {
Task {
try? await Task .sleep(nanoseconds: 300_000_000 )
}
}
func refresh () {
Task {
await loadData()
}
}
}
Reusable Component
import SwiftUI
struct ItemRowView : View {
let item: Item
@Binding var isSelected: Bool
var onDelete: (() -> Void )?
var body: some View {
HStack {
Image (systemName: item.icon)
.foregroundStyle(item.color)
.frame(width: 24 , height: 24 )
VStack (alignment: .leading, spacing: 4 ) {
Text (item.title)
.font(.headline)
Text (item.subtitle)
.font(.subheadline)
.foregroundStyle(.secondary)
}
Spacer ()
if isSelected {
Image (systemName: "checkmark" )
.foregroundStyle(.blue)
}
}
.padding(.vertical, 4 )
.contentShape(Rectangle ())
.onTapGesture {
isSelected.toggle()
}
.contextMenu {
Button ("Edit" ) { }
Button ("Duplicate" ) { }
Divider ()
Button ("Delete" , role: .destructive) {
onDelete? ()
}
}
}
}
Settings View (macOS)
import SwiftUI
struct SettingsView : View {
var body: some View {
TabView {
GeneralSettingsView ()
.tabItem {
Label ("General" , systemImage: "gear" )
}
AppearanceSettingsView ()
.tabItem {
Label ("Appearance" , systemImage: "paintpalette" )
}
AdvancedSettingsView ()
.tabItem {
Label ("Advanced" , systemImage: "slider.horizontal.3" )
}
}
.frame(width: 500 , height: 400 )
}
}
struct GeneralSettingsView : View {
@AppStorage ("launchAtLogin" ) private var launchAtLogin = false
@AppStorage ("checkForUpdates" ) private var checkForUpdates = true
var body: some View {
Form {
Toggle ("Launch at Login" , isOn: $launchAtLogin )
Toggle ("Check for Updates Automatically" , isOn: $checkForUpdates )
}
.formStyle(.grouped)
.padding()
}
}
List View with Selection
import SwiftUI
struct ItemListView : View {
@ObservedObject var viewModel: ItemListViewModel
@State private var selection: Set <Item .ID > = []
@State private var sortOrder = [KeyPathComparator (\Item .name)]
var body: some View {
Table (viewModel.items, selection: $selection , sortOrder: $sortOrder ) {
TableColumn ("Name" , value: \.name)
TableColumn ("Type" , value: \.type)
TableColumn ("Modified" , value: \.modifiedDate) { item in
Text (item.modifiedDate, style: .date)
}
TableColumn ("Size" ) { item in
Text (ByteCountFormatter .string(fromByteCount: item.size, countStyle: .file))
}
.width(80 )
}
.onChange(of: sortOrder) { _ , newOrder in
viewModel.sort(by: newOrder)
}
.contextMenu(forSelectionType: Item .ID .self ) { items in
Button ("Open" ) { viewModel.open(items) }
Button ("Delete" , role: .destructive) { viewModel.delete(items) }
} primaryAction: { items in
viewModel.open(items)
}
}
}
State Management Patterns
@State - Local state @State private var isExpanded = false
@State private var selectedTab = 0
@Binding - Two-way binding from parent @Binding var isPresented: Bool
@Binding var selectedItem: Item ?
@StateObject - Owned observable object @StateObject private var viewModel = MyViewModel ()
@ObservedObject - Passed observable object @ObservedObject var viewModel: MyViewModel
@EnvironmentObject - Shared via environment @EnvironmentObject var settings: AppSettings
@AppStorage - UserDefaults backed @AppStorage ("username" ) private var username = ""
Best Practices
Use @StateObject for ownership : When the view creates the objectUse @ObservedObject for injection : When the object is passed inKeep views small : Extract componentsUse previews : Test different statesMark async operations : Use @MainActor for ViewModelsHandle errors gracefully : Show user-friendly messages
Related Skills
macos-entitlements-generator - App capabilitiesmacos-notarization-workflow - Distributionxctest-ui-test-generator - UI testing
Related Agents
swiftui-macos-expert - SwiftUI expertisedesktop-ux-analyst - UX patterns Related occupations SOC
Based on SOC occupation classification
