Apple Build Native UIs Best Practices

Comprehensive SwiftUI interface development guide, extracted from Apple's official Develop in Swift Tutorials and SwiftUI Concepts. Contains 49 rules across 10 categories, prioritized by impact to guide view composition, layout, styling, state management, and accessibility.

When to Apply

Reference these guidelines when:

• Building new SwiftUI views and screens

• Composing views with stacks, grids, and custom layouts

• Managing state with @State, @Binding, @Observable, and @Environment

• Implementing navigation with NavigationStack, TabView, and sheets

• Adding accessibility, Dynamic Type, and inclusive features

Rule Categories by Priority

Priority Category Impact Prefix

1 View Composition CRITICAL comp-

2 Layout & Sizing CRITICAL layout-

3 Styling & Theming HIGH style-

4 State & Data Flow HIGH state-

5 Navigation & Presentation HIGH nav-

6 Lists & Dynamic Content MEDIUM-HIGH list-

7 User Input & Interaction MEDIUM-HIGH input-

8 Accessibility & Adaptivity MEDIUM access-

9 Testing & Debugging MEDIUM test-

10 App Polish & Refinement LOW polish-

Quick Reference

1. View Composition (CRITICAL)

• comp-body-some-view

• Return some View from body property

• comp-custom-view-properties

• Use properties to make views configurable

• comp-extract-subviews

• Extract subviews to reduce body complexity

• comp-modifier-order

• Apply modifiers in correct order

• comp-prefer-composition

• Prefer composition over inheritance for views

• comp-preview-macro

• Use #Preview for live development feedback

• comp-view-builder

• Use @ViewBuilder for conditional view content

2. Layout & Sizing (CRITICAL)

• layout-frame-sizing

• Use frame() for explicit size constraints

• layout-grid-for-tables

• Use Grid for aligned tabular layouts

• layout-lazy-grids

• Use LazyVGrid for scrollable grid layouts

• layout-spacer-for-distribution

• Use Spacer to push views apart

• layout-stack-alignment-spacing

• Configure stack alignment and spacing

• layout-stacks-over-position

• Use stacks instead of manual positioning

• layout-zstack-layering

• Use ZStack for layered view composition

3. Styling & Theming (HIGH)

• style-font-hierarchy

• Use semantic font styles for typography

• style-foreground-over-color

• Use foregroundStyle over deprecated foregroundColor

• style-gradients

• Apply gradients for visual depth

• style-sf-symbols

• Use SF Symbols for platform-consistent icons

• style-system-colors

• Use system colors for automatic dark mode

4. State & Data Flow (HIGH)

• state-bindable-for-observable

• Use @Bindable to create bindings from observable objects

• state-binding-for-children

• Use @Binding for two-way data flow to child views

• state-environment-for-shared

• Use @Environment for system and shared values

• state-observable-for-models

• Use @Observable for shared model classes

• state-private-state

• Mark @State properties as private

• state-state-for-local

• Use @State for view-local value types

5. Navigation & Presentation (HIGH)

• nav-navigation-stack

• Use NavigationStack for hierarchical navigation

• nav-programmatic-path

• Manage navigation state with path binding

• nav-sheets-for-modal

• Use sheets for modal presentation

• nav-tabview-sections

• Use TabView for top-level app sections

• nav-toolbar-actions

• Place actions in toolbar for consistent placement

6. Lists & Dynamic Content (MEDIUM-HIGH)

• list-foreach-dynamic

• Use ForEach for dynamic content in containers

• list-identifiable-data

• Use List with Identifiable data

• list-searchable

• Use searchable for built-in search

• list-swipe-actions

• Add swipe actions for contextual operations

7. User Input & Interaction (MEDIUM-HIGH)

• input-button-actions

• Use Button with action closures

• input-picker-selection

• Use Picker for single-value selection

• input-textfield-binding

• Use TextField with binding for text input

• input-toggle-forms

• Use Toggle and Form for settings interfaces

8. Accessibility & Adaptivity (MEDIUM)

• access-accessibility-labels

• Add accessibility labels to interactive elements

• access-dynamic-type

• Support Dynamic Type for all text

• access-scaled-metric

• Use @ScaledMetric for size-adaptive values

• access-view-that-fits

• Use ViewThatFits for adaptive layouts

9. Testing & Debugging (MEDIUM)

• test-breakpoints

• Use breakpoints to debug runtime issues

• test-preview-sample-data

• Use Preview with sample data for visual testing

• test-swift-testing

• Write tests with Swift Testing framework

10. App Polish & Refinement (LOW)

• polish-inclusive-features

• Add inclusive features for broader reach

• polish-transition-effects

• Apply transition effects for view insertion and removal

• polish-with-animation

• Use withAnimation for state-driven transitions

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels

• Rule template - Template for adding new rules

Full Compiled Document

For a complete compiled guide with all rules in a single document, see AGENTS.md.

Reference Files

File Description

AGENTS.md Complete compiled guide with all rules

references/_sections.md Category definitions and ordering

assets/templates/_template.md Template for new rules

metadata.json Version and reference information