SwiftUI UI Patterns
Example-driven SwiftUI patterns for navigation, sheets, lists and state ownership.
$ npx skills add https://craftwork.design/skills/swiftui-ui-patterns -a claude-code -y
Installs into .claude/skills/swiftui-ui-patterns. Add -g for every project.
SKILL.md
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 and based on the provided skeletons.
More mobile & native
- Native-Feeling Mobile Web
Concrete CSS and meta fixes that make a web app feel native on phones: stuck hover, tap flash, dvh, input zoom, safe areas and overscroll.
Emil KowalskiMobile & native45.6K - Animate Expo
Animation decisions for React Native and Expo: Reanimated or Animated, springs, keeping motion off the JS thread, press states and haptics.