Agent skill

iOS UI & Layout

Standards for UIKit, Auto Layout, and Apple Human Interface Guidelines.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ui-navigation

Metadata

Additional technical details for this skill

labels
ios uikit autolayout snapkit layouts
triggers 
{
    "files": [
        "**/*View.swift",
        "**/*.xib",
        "**/*.storyboard"
    ],
    "keywords": [
        "NSLayoutConstraint",
        "UIStackView",
        "SnapKit",
        "layoutSubviews"
    ]
}

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results