swiftui-ui-patterns
Apply proven SwiftUI UI patterns for navigation, sheets, async state, and reusable screens.
SwiftUI UI Patterns
Quick start
When to Use
- When creating or refactoring SwiftUI screens, flows, or reusable UI components.
- When you need guidance on navigation, sheets, async state, previews, or component patterns.
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.mdand follow its guidance. - If the interaction reveals secondary content by dragging or scrolling the primary content away, read
references/scroll-reveal.mdbefore implementing gestures manually. - Build the view with small, focused subviews and SwiftUI-native data flow.
New project scaffolding
- Start with
references/app-wiring.mdto wire TabView + NavigationStack + sheets. - Add a minimal
AppTabandRouterPathbased 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 Sw
Subscribers only
The full skill, its 32 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | Dimillian/Skills (MIT) |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, agents/openai.yaml, references/app-wiring.md, references/async-state.md, references/components-index.md, references/controls.md, references/deeplinks.md, references/focus.md, references/form.md, references/grids.md, references/haptics.md, references/input-toolbar.md, references/lightweight-clients.md, references/list.md, references/loading-placeholders.md, references/macos-settings.md, references/matched-transitions.md, references/media.md, references/menu-bar.md, references/navigationstack.md, references/overlay.md, references/performance.md, references/previews.md, references/scroll-reveal.md, references/scrollview.md, references/searchable.md, references/sheets.md, references/split-views.md, references/tabview.md, references/theming.md, references/title-menus.md, references/top-bar.md |
| Added | 2026-03-25 |
Related skills
add-app-clip
Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.
android-dev
Production-grade Android app development guide covering native (Kotlin/Java), cross-platform (Flutter, RN, KMM), and hybrid architectures.
android-jetpack-compose-expert
Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.
appium-skill
Generates production-grade Appium mobile automation scripts for Android and iOS in Java, Python, or JavaScript. Supports real device and emulator testing locally and on TestMu AI cloud with 100+ real devices.
building-native-ui
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
expo-api-routes
Guidelines for creating API routes in Expo Router with EAS Hosting
