← ClaudeAtlas

swiftui-ui-patternslisted

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.
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79
Install: claude install-skill aiskillstore/marketplace
# 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 l