Swiftui UI Patterns
Best practices and example-driven guidance for building SwiftUI views and components...
Install
npx skills add Dimillian/Skills --skill swiftui-ui-patterns -g -a claude-code -y- Repository
- Dimillian/Skills4k
- Category
- Design
- Updated
- 7mo ago
- License
- MIT
- Context cost
- Mediumabout 1,739 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.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.
