Skill Overview
---
name: swiftui-ui-patterns
description: 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.
---
# SwiftUI UI Patterns
## Quick start
Choose a track based on your goal:
### Existing project
- Identify the feature or screen and the primary interaction model (list, detail, editor, settings, tabbed).
- Find a nearby example in the repo with `rg "TabView\("` or similar, then read the closest SwiftUI view.
- Apply local conventions: prefer SwiftUI-native state, keep state local when possible, and use environment injection for shared dependencies.
- Choose the relevant component reference from `references/components-index.md` and follow its guidance.
- Build the view with small, focused subviews and SwiftUI-native data flow.
### New project scaffolding
- Start with `references/app-scaffolding-wiring.md` to wire TabView + NavigationStack + sheets.
- Add a minimal `AppTab` and `RouterPath` based on the provided skeletons.
- Choose the next component reference based on the UI you need first (TabView, NavigationStack, Sheets).
- Expand the route and sheet enums as new screens are added.
## General rules to follow
- Use modern SwiftUI state (`@State`, `@Binding`, `@Observable`, `@Environment`) and avoid unnecessary view models.
- Prefer composition; keep views small and focused.
- Use async/await with `.task` and explicit loading/error states.
- Maintain existing legacy patterns only when editing legacy files.
- Follow the project's formatter and style guide.
- **Sheets**: Prefer `.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.
## Workflow for a new SwiftUI view
1. Define the view's state Bot Reviews(1)
Reference guidance for composing swiftui views
This skill is a pattern library rather than a code generator. It gives guidance for building swiftui screens with modern state, small focused subviews, environment injection for shared dependencies, and asynchronous work through task modifiers with explicit loading and error states. It covers scaffold wiring for tab views, navigation stacks, and sheets. Two constraints stand out. It expects the component index and scaffolding documents to be read first, so skipping them yields generic advice. It also instructs leaving existing legacy patterns untouched when editing legacy files, so migration to modern state is intentionally outside this skill's remit.
Use case: choosing consistent patterns while building a swiftui screen
Study Guides(1)
Choosing view patterns that fit the existing project
This skill is a set of conventions for building views and components in a ui framework, with an emphasis on following what the project already does and finding the closest existing example before inventing a new shape. It also covers scaffolding navigation for a new app. ## What it does - Identifies the screen's interaction model before choosing a pattern. - Finds a nearby example in the repository and follows the local conventions. - Prefers native state and keeps state local unless it is genuinely shared. - Points at component references for navigation, tabs and sheets. - Skews sheets toward item based presentation when the state represents a selected model. - Uses async work through a task modifier with explicit loading and error states. ## When it is the wrong choice It is a conventions guide rather than a component library, so it hands over patterns instead of code that can be dropped in. Its first instruction is to match the existing project, which means the advice is deliberately conservative and will not push a large refactor even when one is arguably warranted. Several rules, such as preferring modern state and avoiding unnecessary view models, only apply cleanly to new or recently touched code; applying them to a legacy file creates a screen that no longer matches its neighbours. The sheet guidance is opinionated about ownership too, which can conflict with an existing pattern that forwards callbacks. ```bash rg "TabView\(" ``` ## Working notes - Component guidance lives in referenced index files. - New projects start from the scaffolding reference. - Route and sheet enums expand as new screens are added.
Quick Facts
Install
npx clawhub@latest install swiftui-ui-patterns