Complete AI TrainingYourJobSkills for your job

Skills / mobile

swiftui-ui-patterns

Apply proven SwiftUI UI patterns for navigation, sheets, async state, and reusable screens.

IT & Software Development

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.md and follow its guidance.
  • If the interaction reveals secondary content by dragging or scrolling the primary content away, read references/scroll-reveal.md before implementing gestures manually.
  • Build the view with small, focused subviews and SwiftUI-native data flow.

New project scaffolding

  • Start with references/app-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 Sw

Subscribers only

The full skill, its 32 bundled files and every download is included with every paid Complete AI plan.

Details

SourceDimillian/Skills (MIT)
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.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
Added2026-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