# Swiftui UI Patterns

Best practices and example-driven guidance for building SwiftUI views and components...

- Repository: https://github.com/Dimillian/Skills (4021 stars)
- Category: Design
- License: MIT
- Last updated: 2026-03-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Dimillian/Skills --skill swiftui-ui-patterns -g -a claude-code -y`
Codex: `npx skills add Dimillian/Skills --skill swiftui-ui-patterns -g -a codex -y`
Cursor: `npx skills add Dimillian/Skills --skill swiftui-ui-patterns -g -a cursor -y`
Gemini CLI: `npx skills add Dimillian/Skills --skill swiftui-ui-patterns -g -a gemini-cli -y`

## Description

Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.
- 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

The rest: https://github.com/Dimillian/Skills/blob/HEAD/swiftui-ui-patterns/SKILL.md