home / skills / hoangnguyen0403 / agent-skills-standard / ui-navigation

ui-navigation skill

safe

This skill helps you apply iOS UI and layout standards using Auto Layout, UIKit, and HIG guidelines for accessible, scalable interfaces.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill ui-navigation

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.7 KB

---
name: iOS UI & Layout
description: Standards for UIKit, Auto Layout, and Apple Human Interface Guidelines.
metadata:
  labels: [ios, uikit, autolayout, snapkit, layouts]
  triggers:
    files: ['**/*View.swift', '**/*.xib', '**/*.storyboard']
    keywords: [NSLayoutConstraint, UIStackView, SnapKit, layoutSubviews]
---

# 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

- **Hardcoded Frames**: `**No CGRect(x:y:w:h)**: Use Auto Layout.`
- **Pyramid of Constraints**: `**No complex constraint logic in VC**: Use UIStackView or custom views.`
- **Missing Loading States**: `**No Blank Screens**: Use skeleton views or UIActivityIndicatorView.`

## References

- [Auto Layout & HIG Compliance](references/implementation.md)

Overview

This skill codifies standards for building iOS interfaces using UIKit, Auto Layout, and Apple Human Interface Guidelines. It focuses on programmatic layout, reusable view design, accessibility, and practical anti-patterns to avoid. The guidance balances reliable runtime behavior with maintainable, source-controlled code.

How this skill works

The skill inspects UI implementation choices and recommends best-practice patterns: prefer NSLayoutAnchor or a layout DSL (e.g., SnapKit) over Storyboards, enforce safe area constraints, and favor UIStackView for linear layouts. It checks lifecycle placement for layout updates, promotes custom UIView subclasses for complex UI, and validates accessibility attributes and use of system assets like SF Symbols.

When to use it

When building or refactoring UIKit screens to improve maintainability and testability.
When converting Storyboard-heavy projects to code-based layouts for source control.
When implementing dynamic text, accessibility, and HIG-compliant spacing.
When integrating UIKit views inside SwiftUI or vice versa.
When optimizing image assets and iconography for multiple resolutions.

Best practices

Prefer programmatic Auto Layout (NSLayoutAnchor or SnapKit) to avoid merge conflicts and improve clarity.
Always constrain to view.safeAreaLayoutGuide to respect notches and system UI.
Use UIStackView for rows/columns to simplify constraints and reduce the pyramid of constraint logic.
Encapsulate complex UI in custom UIView subclasses and expose configuration APIs.
Support Dynamic Type and provide meaningful accessibilityLabel and traits for all interactive elements.
Use SF Symbols or vector assets (PDF/SVG) and provide appropriate image scales.

Example use cases

Refactor a UITableViewCell with many constraints into a custom UIView using UIStackView and Auto Layout anchors.
Implement a responsive modal that respects safe areas and adapts to Dynamic Type changes.
Embed an existing UIKit form inside SwiftUI using UIViewControllerRepresentable to reuse business logic.
Replace hardcoded image assets with SF Symbols and vector PDFs to reduce app size and support dark mode.
Add skeleton loading states or UIActivityIndicatorView to screens that previously showed blank content.

FAQ

Should I avoid Storyboards entirely?

Not necessarily; Storyboards can be useful for prototypes, but prefer code-based layouts for production to improve mergeability, reuse, and version control.

Where should I update constraints?

Make layout changes in viewWillLayoutSubviews or override updateConstraints in views. Keep complex constraint logic inside custom views, not view controllers.