ios-ui-navigation

Implement UIKit navigation, Auto Layout, and Apple Human Interface Guidelines in iOS. Use when implementing UIKit navigation, Auto Layout constraints, or HIG compliance. (triggers: **/*View.swift, **/*.xib, **/*.storyboard, NSLayoutConstraint, UIStackView, SnapKit, layoutSubviews)

385 stars

Best use case

ios-ui-navigation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Implement UIKit navigation, Auto Layout, and Apple Human Interface Guidelines in iOS. 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

$curl -o ~/.claude/skills/ios-ui-navigation/SKILL.md --create-dirs "https://raw.githubusercontent.com/HoangNguyen0403/agent-skills-standard/main/skills/ios/ios-ui-navigation/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ios-ui-navigation/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ios-ui-navigation Compares

Feature / Agentios-ui-navigationStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Implement UIKit navigation, Auto Layout, and Apple Human Interface Guidelines in iOS. 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

react-native-navigation

385
from HoangNguyen0403/agent-skills-standard

Set up navigation stacks and deep linking with React Navigation in React Native. 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

385
from HoangNguyen0403/agent-skills-standard

Configure React Navigation 6+ stacks, tabs, and deep linking for React Native. 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

385
from HoangNguyen0403/agent-skills-standard

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

385
from HoangNguyen0403/agent-skills-standard

Implement navigation patterns with go_router, deep linking, and named routes. Use when building 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

385
from HoangNguyen0403/agent-skills-standard

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

385
from HoangNguyen0403/agent-skills-standard

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

385
from HoangNguyen0403/agent-skills-standard

Implement typed routing, nested routes, and guards using auto_route. Use when adding 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

385
from HoangNguyen0403/agent-skills-standard

Implement navigation with Jetpack Compose Navigation and App Links on Android. Use when implementing navigation flows, deep links, or backstack handling in Android. (triggers: **/*Screen.kt, **/*Activity.kt, **/NavGraph.kt, NavController, NavHost, composable, navArgument, deepLinks)

android-navigation-type-safe

385
from HoangNguyen0403/agent-skills-standard

Implement type-safe Jetpack Navigation Compose routes on Android. Use when implementing type-safe navigation graphs in Jetpack Compose for Android. (triggers: **/*NavHost.kt, **/*Graph.kt, NavHost, navController, @Serializable)

android-legacy-navigation

385
from HoangNguyen0403/agent-skills-standard

Implement Jetpack Navigation Component with XML graphs and SafeArgs for type-safe fragment navigation. Use when working with XML-based Navigation Component or SafeArgs in Android. (triggers: navigation/*.xml, findNavController, NavDirections, navArgs)

swift-tooling

385
from HoangNguyen0403/agent-skills-standard

Configure SPM packages, SwiftLint, and build settings for Swift projects. Use when managing Swift packages with SPM, configuring build settings, or enforcing Swift code quality. (triggers: Package.swift, .swiftlint.yml, package, target, dependency)

swift-testing

385
from HoangNguyen0403/agent-skills-standard

Write XCTest cases, async tests, and organized test suites in Swift. Use when writing XCTest cases, async tests, or organizing test suites in Swift. (triggers: **/*Tests.swift, XCTestCase, XCTestExpectation, XCTAssert)