Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.
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-ui-patternsMethod 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
Choose a track based on your goal:
rg "TabView\(" or similar, then read the closest SwiftUI view.references/components-index.md and follow its guidance.references/app-scaffolding-wiring.md to wire TabView + NavigationStack + sheets.AppTab and RouterPath based on the provided skeletons.@State, @Binding, @Observable, @Environment) and avoid unnecessary view models..task and explicit loading/error states..sheet(item:) over .sheet(isPresented:) when state represents a selected model. Avoid if let inside a sheet body. Sheets should own their actions and call dismiss() internally instead of forwarding onCancel/onConfirm closures.@Environment..task and explicit state enum if needed.Use references/components-index.md as the entry point. Each component reference should include:
@State private var selectedItem: Item?
.sheet(item: $selectedItem) { item in
EditItemSheet(item: item)
}struct EditItemSheet: View {
@Environment(\.dismiss) private var dismiss
@Environment(Store.self) private var store
let item: Item
@State private var isSaving = false
var body: some View {
VStack {
references/<component>.md.references/components-index.md with the new entry.