ios-ui-navigation
Standards for UIKit, Auto Layout, and Apple Human Interface Guidelines. Use when implementing UIKit navigation, Auto Layout constraints, or HIG compliance. (triggers: **/*View.swift, **/*.xib, **/*.storyboard, NSLayoutConstraint, UIStackView, SnapKit, layoutSubviews)
Best use case
ios-ui-navigation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Standards for UIKit, Auto Layout, and Apple Human Interface Guidelines. Use when implementing UIKit navigation, Auto Layout constraints, or HIG compliance. (triggers: **/*View.swift, **/*.xib, **/*.storyboard, NSLayoutConstraint, UIStackView, SnapKit, layoutSubviews)
Teams using ios-ui-navigation should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ios-ui-navigation/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ios-ui-navigation Compares
| Feature / Agent | ios-ui-navigation | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Standards for UIKit, Auto Layout, and Apple Human Interface Guidelines. Use when implementing UIKit navigation, Auto Layout constraints, or HIG compliance. (triggers: **/*View.swift, **/*.xib, **/*.storyboard, NSLayoutConstraint, UIStackView, SnapKit, layoutSubviews)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# iOS UI & Layout Standards ## **Priority: P0** ## Implementation Guidelines ### Auto Layout - **Code-Based Layout**: Prefer programmatic layout using `NSLayoutAnchor` or SnapKit over Storyboards for better source control. - **Safe Area**: Always respect `view.safeAreaLayoutGuide`. - **UIStackView**: Use for linear layouts to reduce constraint complexity. ### UIKit Best Practices - **View Lifecycle**: Perform layout adjustments in `viewWillLayoutSubviews` or `updateConstraints`. - **Reusable Views**: Extract complex UI into custom `UIView` subclasses. - **Image Optimization**: Use SF Symbols for icons. Preferred vector (PDF/SVG) for custom assets. - **SwiftUI Bridge**: Use `UIViewRepresentable` or `UIViewControllerRepresentable` to host UIKit in SwiftUI. ### Human Interface Guidelines (HIG) - **Accessibility**: Support Dynamic Type and provide meaningful `accessibilityLabel`. - **Feedback**: Use `UINotificationFeedbackGenerator` for haptic feedback on actions. - **Margins**: Follow standard system margins (typically 16-20pt). ## Anti-Patterns - **No CGRect(x:y:w:h)**: Use Auto Layout. - **No complex constraint logic in VC**: Use UIStackView or custom views. - **No Blank Screens**: Use skeleton views or UIActivityIndicatorView. ## References - [Auto Layout & HIG Compliance](references/implementation.md)
Related Skills
keyboard-navigation-tester
Keyboard Navigation Tester - Auto-activating skill for Frontend Development. Triggers on: keyboard navigation tester, keyboard navigation tester Part of the Frontend Development skill category.
Filesystem Navigation
Guidelines for systematically exploring and understanding directory structures.
docs-navigation
Navigate hierarchical ai-docs indexes to find documentation. Check local docs FIRST for speed and curated context before web searching. Covers Claude Code, BAML, MCP, and other tracked libraries.
rn-navigation
Expo Router navigation patterns for React Native. Use when implementing navigation, routing, deep links, tab bars, modals, or handling navigation state in Expo apps.
react-native-navigation
Navigation and deep linking for React Native using React Navigation. Use when setting up navigation stacks or deep linking in React Native with React Navigation. (triggers: **/App.tsx, **/*Navigator.tsx, **/*Screen.tsx, NavigationContainer, createStackNavigator, createBottomTabNavigator, linking, deep link)
react-native-navigation-v6
React Navigation 6+ standards for stack, tab, and deep linking. Use when implementing React Navigation stacks, tabs, or deep linking in React Native. (triggers: **/*Navigation*.tsx, src/navigation/**, navigation, react-navigation, stack, tab, drawer, deep link)
ios-navigation
SwiftUI navigation and deep linking using NavigationStack and Universal Links. Use when implementing NavigationStack or Universal Links deep linking in iOS. (triggers: **/*View.swift, **/*App.swift, NavigationStack, NavigationLink, onOpenURL, universalLink, NSUserActivity)
flutter-navigation
Flutter navigation patterns including go_router, deep linking, and named routes. Use when implementing navigation, deep linking, or named routes in Flutter. (triggers: **/*_route.dart, **/*_router.dart, **/main.dart, Navigator, GoRouter, routes, deep link, go_router, AutoRoute)
flutter-go-router-navigation
Typed routes, route state, and redirection using go_router. Use when implementing go_router typed routes, guards, or redirects in Flutter. (triggers: **/router.dart, **/app_router.dart, GoRouter, GoRoute, StatefulShellRoute, redirection, typed-routes)
flutter-getx-navigation
Context-less navigation, named routes, and middleware using GetX. Use when implementing navigation or route middleware with GetX in Flutter. (triggers: **/app_pages.dart, **/app_routes.dart, GetPage, Get.to, Get.off, Get.offAll, Get.toNamed, GetMiddleware)
flutter-auto-route-navigation
Typed routing, nested routes, and guards using auto_route. Use when implementing typed navigation, nested routes, or route guards with auto_route in Flutter. (triggers: **/router.dart, **/app_router.dart, AutoRoute, AutoRouter, router, guards, navigate, push)
android-navigation
Navigation for Android using Jetpack Compose Navigation and App Links. Use when implementing navigation flows, deep links, or backstack handling in Android. (triggers: **/*Screen.kt, **/*Activity.kt, **/NavGraph.kt, NavController, NavHost, composable, navArgument, deepLinks)