@mmerterden/multi-agent-pipeline 20.7.0 → 20.8.1

package/pipeline/skills/shared/external/swiftui-layout-components/SKILL.md

@@ -1,342 +1,353 @@
 ---
 name: swiftui-layout-components
-description: "Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollPosition, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns. Use when building data-driven layouts, collection views, settings screens, search interfaces, or transient overlay UI."
+description: "SwiftUI layouts: stacks, lazy stacks, LazyVGrid/LazyHGrid, List sections, swipe actions, ScrollView with ScrollPosition, validated Form, Toggle, Picker, Slider, .searchable, toast overlays. Use when building data-driven layouts, collection views, settings screens, search or transient overlay UI, or choosing between stacks, grids, lists and scroll views. Not for architecture, state or navigation."
 metadata:
-  source: "dpearson2699/swift-ios-skills (PolyForm Perimeter 1.0.0)"
+  source: multi-agent-pipeline
 ---
 
-# SwiftUI Layout & Components
+# SwiftUI Layout Components
 
-Layout and component patterns for SwiftUI apps targeting iOS 26+ with Swift 6.3. Covers stack and grid layouts, list patterns, scroll views, forms, controls, search, and overlays. Patterns are backward-compatible to iOS 17 unless noted.
+Which container you pick decides how much work SwiftUI does up front, how rows
+are reused, and what the system gives you for free (selection, swipe actions,
+accessibility). Examples assume Swift 6.3 and iOS 26; anything not marked with
+a newer version also runs on iOS 17.
 
-## Contents
+App structure and state ownership live in `swiftui-patterns`; navigation
+stacks, links and routing live in `swiftui-navigation`.
 
-- [Layout Fundamentals](#layout-fundamentals)
-- [Grid Layouts](#grid-layouts)
-- [List Patterns](#list-patterns)
-- [ScrollView](#scrollview)
-- [Form and Controls](#form-and-controls)
-- [Searchable](#searchable)
-- [Overlay and Presentation](#overlay-and-presentation)
-- [Common Mistakes](#common-mistakes)
-- [Review Checklist](#review-checklist)
-- [References](#references)
+## Stacks: eager or lazy
 
-## Layout Fundamentals
+| Container | Builds children | Use for |
+|-----------|-----------------|---------|
+| `VStack`, `HStack`, `ZStack` | All at once | Small, fixed content: headers, toolbars, short forms |
+| `LazyVStack`, `LazyHStack` inside `ScrollView` | As they scroll into view | Long or unknown-length content: feeds, chat, search results |
 
-### Standard Stacks
+A plain stack of a thousand rows builds a thousand views before the first
+frame. A lazy stack for three labels adds bookkeeping for nothing.
 
-Use `VStack`, `HStack`, and `ZStack` for small, fixed-size content. They render all children immediately.
+## Grids
 
-```swift
-VStack(alignment: .leading) {
-    Text(title).font(.headline)
-    Text(subtitle).font(.subheadline).foregroundStyle(.secondary)
-}
-```
-
-### Lazy Stacks
+`LazyVGrid` suits dense visual choice: icon pickers, photo galleries, template
+tiles.
 
-Use `LazyVStack` and `LazyHStack` inside `ScrollView` for large or dynamic collections. They create child views on demand as they scroll into view.
+- `.adaptive` columns let the column count follow the available width.
+- Several `.flexible` columns give a fixed count, such as a three-up gallery.
 
 ```swift
-ScrollView {
-    LazyVStack {
-        ForEach(items) { item in
-            ItemRow(item: item)
+struct StickerPicker: View {
+    let stickers: [Sticker]
+
+    var body: some View {
+        ScrollView {
+            LazyVGrid(columns: [GridItem(.adaptive(minimum: 96, maximum: 1024))]) {
+                ForEach(stickers) { sticker in
+                    StickerTile(sticker: sticker)
+                        .aspectRatio(1, contentMode: .fit)
+                }
+            }
+            .padding()
         }
     }
-    .padding(.horizontal)
 }
 ```
 
-**When to use which:**
-- **Non-lazy stacks:** Small, fixed content (headers, toolbars, forms with few fields)
-- **Lazy stacks:** Large or unknown-size collections, feeds, chat messages
+A fixed three-column gallery passes
+`Array(repeating: GridItem(.flexible(minimum: 90), spacing: 2), count: 3)` as
+the columns and `spacing: 2` to `LazyVGrid(columns:spacing:)`.
 
-## Grid Layouts
+Give cells their shape with `.aspectRatio`. Do not put a `GeometryReader` in a
+lazy container: it measures eagerly and undoes the laziness. When a cell really
+needs its size, read it with `.onGeometryChange(for:of:action:)`, which Apple
+documents as available from iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0 and
+visionOS 1.0 (back-deployed; build with the Xcode 16 SDK or later).
 
-Use `LazyVGrid` for icon pickers, media galleries, and dense visual selections. Use `.adaptive` columns for layouts that scale across device sizes, or `.flexible` columns for a fixed column count.
+Column strategies, sectioned grids, selection and performance:
+[grids reference](references/grids.md).
 
-```swift
-// Adaptive grid -- columns adjust to fit
-let columns = [GridItem(.adaptive(minimum: 120, maximum: 1024))]
+## Lists
 
-LazyVGrid(columns: columns) {
-    ForEach(items) { item in
-        ThumbnailView(item: item)
-            .aspectRatio(1, contentMode: .fit)
-    }
-}
-```
+`List` is the right container for feeds and settings rows: it reuses rows and
+brings selection, swipe actions and accessibility along.
 
 ```swift
-// Fixed 3-column grid
-let columns = Array(repeating: GridItem(.flexible(minimum: 100), spacing: 4), count: 3)
-
-LazyVGrid(columns: columns, spacing: 4) {
-    ForEach(items) { item in
-        ThumbnailView(item: item)
+struct AccountSettings: View {
+    var body: some View {
+        List {
+            Section("Preferences") {
+                NavigationLink("Units", value: SettingsPage.units)
+                NavigationLink("Appearance", value: SettingsPage.appearance)
+            }
+            Section("Session") {
+                Button("Log Out", role: .destructive) { logOut() }
+            }
+        }
+        .listStyle(.insetGrouped)
     }
+
+    private func logOut() {}
 }
 ```
 
-Use `.aspectRatio` for cell sizing. Never place `GeometryReader` inside lazy containers -- it forces eager measurement and defeats lazy loading. Use `.onGeometryChange` (iOS 16+) if you need to read dimensions.
-
-See [references/grids.md](references/grids.md) for full grid patterns and design choices.
+- Feeds read best as `.listStyle(.plain)`; settings screens as `.insetGrouped`.
+- `.scrollContentBackground(.hidden)` plus your own background for themed screens.
+- `.listRowInsets(_:)` and `.listRowSeparator(.hidden)` adjust spacing and dividers.
+- `ScrollPosition` (iOS 18) with `.scrollPosition($position)` scrolls to the top or to an id.
+- `.refreshable { await reload() }` adds pull to refresh.
+- `.contentShape(Rectangle())` makes a whole row tappable, not only its text.
+- iOS 26: `.scrollEdgeEffectStyle(.soft, for: .top)` fades content under the top bar.
 
-## List Patterns
+### Swipe actions
 
-Use `List` for feed-style content and settings rows where built-in row reuse, selection, and accessibility matter.
+Row swipe actions belong to `List` rows. Attach
+`.swipeActions(edge:allowsFullSwipe:content:)` to the row view inside
+`ForEach`. The trailing edge is the default; add a second modifier for leading
+actions.
 
 ```swift
 List {
-    Section("General") {
-        NavigationLink("Display") { DisplaySettingsView() }
-        NavigationLink("Haptics") { HapticsSettingsView() }
-    }
-    Section("Account") {
-        Button("Sign Out", role: .destructive) { }
+    ForEach(inbox) { note in
+        NoteRow(note: note)
+            .swipeActions(edge: .trailing, allowsFullSwipe: true) {
+                Button("Delete", systemImage: "trash", role: .destructive) {
+                    store.delete(note)
+                }
+                Button("Snooze", systemImage: "clock") { store.snooze(note) }
+                    .tint(.indigo)
+            }
+            .swipeActions(edge: .leading) {
+                Button(note.isPinned ? "Unpin" : "Pin", systemImage: "pin") {
+                    store.togglePin(note)
+                }
+                .tint(.orange)
+            }
     }
 }
-.listStyle(.insetGrouped)
 ```
 
-**Key patterns:**
-- `.listStyle(.plain)` for feed layouts, `.insetGrouped` for settings
-- `.scrollContentBackground(.hidden)` + custom background for themed surfaces
-- `.listRowInsets(...)` and `.listRowSeparator(.hidden)` for spacing and separator control
-- Use `ScrollPosition` with `.scrollPosition($scrollPosition)` for scroll-to-top or jump-to-id
-- Use `.refreshable { }` for pull-to-refresh feeds
-- Use `.contentShape(Rectangle())` on rows that should be tappable end-to-end
+- The first button on an edge is the one a full swipe triggers, so put the
+  most common action first and only allow full swipe when it is safe.
+- A `.destructive` role colors the button red and animates the row out; the
+  data change must actually remove the item.
+- Use `.tint(_:)` for non-destructive buttons; keep each edge to about three
+  actions.
+- Swipe actions do nothing in `ScrollView` + `LazyVStack`; choose `List` when
+  rows need them. Offer the same actions in a context menu or edit mode so
+  they are discoverable.
 
-**iOS 26:** Apply `.scrollEdgeEffectStyle(.soft, for: .top)` for modern scroll edge effects.
-
-See [references/list.md](references/list.md) for full list patterns including feed lists with scroll-to-top.
+More list recipes: [list reference](references/list.md).
 
 ## ScrollView
 
-Use `ScrollView` with lazy stacks when you need custom layout, mixed content, or horizontal scrolling.
+Use `ScrollView` with lazy stacks for custom layouts, mixed content and
+horizontal strips.
 
 ```swift
 ScrollView(.horizontal, showsIndicators: false) {
     LazyHStack {
-        ForEach(chips) { chip in
-            ChipView(chip: chip)
-        }
+        ForEach(genres) { genre in GenreChip(genre: genre) }
     }
+    .padding(.horizontal)
 }
 ```
 
-**ScrollPosition:** Enables declarative, bidirectional scroll position tracking and programmatic scrolling.
+`ScrollPosition` (iOS 18) tracks position in both directions and scrolls on
+request.
+A chat screen pinned to the newest message:
 
 ```swift
-@State private var scrollPosition = ScrollPosition(edge: .bottom)
-
-ScrollView {
-    LazyVStack {
-        ForEach(messages) { message in
-            MessageRow(message: message)
+struct ThreadView: View {
+    let replies: [Reply]
+    @State private var position = ScrollPosition(edge: .bottom)
+
+    var body: some View {
+        ScrollView {
+            LazyVStack {
+                ForEach(replies) { ReplyBubble(reply: $0) }
+            }
+            .scrollTargetLayout()
+        }
+        .scrollPosition($position)
+        .onChange(of: replies.last?.id) {
+            withAnimation { position.scrollTo(edge: .bottom) }
         }
+        .safeAreaInset(edge: .bottom) { ComposerBar() }
     }
-    .scrollTargetLayout()
-}
-.scrollPosition($scrollPosition)
-.onChange(of: messages.last?.id) {
-    withAnimation { scrollPosition.scrollTo(edge: .bottom) }
 }
 ```
 
-See [references/scrollview.md](references/scrollview.md) for full `ScrollPosition` patterns including scroll-to-id and user-scroll detection.
-
-**`safeAreaInset(edge:)`** pins content (input bars, toolbars) above the keyboard without affecting scroll layout.
-
-**iOS 26 additions:**
-- `.scrollEdgeEffectStyle(.soft, for: .top)` -- fading edge effect
-- `.backgroundExtensionEffect()` -- mirror/blur at safe area edges (use sparingly, one per screen)
-- `.safeAreaBar(edge:)` -- attach bar views that integrate with scroll effects
+`safeAreaInset(edge:)` keeps an input bar above the keyboard without changing
+the scroll layout. iOS 26 adds:
 
-See [references/scrollview.md](references/scrollview.md) for full scroll patterns and iOS 26 edge effects.
+- `.scrollEdgeEffectStyle(.soft, for: .top)` for a fading edge.
+- `.backgroundExtensionEffect()` to mirror and blur content under safe-area
+  edges. Use it sparingly, on one view per screen.
+- `.safeAreaBar(edge:)` for bars that take part in the scroll edge effect.
 
-## Form and Controls
+Details: [scroll view reference](references/scrollview.md).
 
-### Form
+## Forms and controls
 
-Use `Form` for structured settings and input screens. Group related controls into `Section` blocks.
+`Form` lays out structured input with the platform's spacing and accessibility.
+Group related controls in `Section`s.
 
 ```swift
-Form {
-    Section("Notifications") {
-        Toggle("Mentions", isOn: $prefs.mentions)
-        Toggle("Follows", isOn: $prefs.follows)
-    }
-    Section("Appearance") {
-        Picker("Theme", selection: $theme) {
-            ForEach(Theme.allCases, id: \.self) { Text($0.title).tag($0) }
+struct ReaderSettings: View {
+    @AppStorage("reader.justify") private var justify = false
+    @State private var theme: ReaderTheme = .paper
+    @State private var fontScale = 1.0
+
+    var body: some View {
+        Form {
+            Section("Text") {
+                Toggle("Justify Text", isOn: $justify)
+                Picker("Theme", selection: $theme) {
+                    ForEach(ReaderTheme.allCases, id: \.self) { option in
+                        Text(option.title).tag(option)
+                    }
+                }
+                HStack {
+                    Slider(value: $fontScale, in: 0.5...1.5, step: 0.1)
+                    Text(fontScale, format: .number.precision(.fractionLength(1)))
+                        .monospacedDigit()
+                }
+            }
         }
-        Slider(value: $fontScale, in: 0.5...1.5, step: 0.1)
+        .formStyle(.grouped)
+        .scrollContentBackground(.hidden)
     }
 }
-.formStyle(.grouped)
-.scrollContentBackground(.hidden)
-```
-
-Use `@FocusState` to manage keyboard focus in input-heavy forms. Wrap in `NavigationStack` only when presented standalone or in a sheet.
-
-### Controls
-
-| Control | Usage |
-|---------|-------|
-| `Toggle` | Boolean preferences |
-| `Picker` | Discrete choices; `.segmented` for 2-4 options |
-| `Slider` | Numeric ranges with visible value label |
-| `DatePicker` | Date/time selection |
-| `TextField` | Text input with `.keyboardType`, `.textInputAutocapitalization` |
-
-Bind controls directly to `@State`, `@Binding`, or `@AppStorage`. Group related controls in `Form` sections. Use `.disabled(...)` to reflect locked or inherited settings. Use `Label` inside toggles to combine icon + text when it adds clarity.
-
-```swift
-// Toggle sections
-Form {
-  Section("Notifications") {
-    Toggle("Mentions", isOn: $preferences.notificationsMentionsEnabled)
-    Toggle("Follows", isOn: $preferences.notificationsFollowsEnabled)
-  }
-}
-
-// Slider with value text
-Section("Font Size") {
-  Slider(value: $fontSizeScale, in: 0.5...1.5, step: 0.1)
-  Text("Scale: \(String(format: "%.1f", fontSizeScale))")
-}
-
-// Picker for enums
-Picker("Default Visibility", selection: $visibility) {
-  ForEach(Visibility.allCases, id: \.self) { option in
-    Text(option.title).tag(option)
-  }
-}
 ```
 
-Avoid `.pickerStyle(.segmented)` for large sets; use menu or inline styles. Don't hide labels for sliders; always show context.
+- Use `@FocusState` to move the keyboard between fields in long forms.
+- Add a `NavigationStack` around the form only for a sheet or a standalone
+  presentation; pushed inside an existing stack it already has one.
 
-See [references/form.md](references/form.md) for full form examples.
+| Control | For | Notes |
+|---------|-----|-------|
+| `Toggle` | On/off values | A `Label` gives icon plus text when it helps |
+| `Picker` | One of several choices | `.segmented` only for 2 to 4 options; menu or inline beyond that |
+| `Slider` | A numeric range | Always show the current value next to it, never hide the label |
+| `DatePicker` | Dates and times | |
+| `TextField` | Text | Set `.keyboardType` and `.textInputAutocapitalization` |
 
-## Searchable
+Bind controls straight to `@State`, `@Binding` or `@AppStorage`, and use
+`.disabled(_:)` for settings that are locked or inherited. Validation and
+modal forms: [form reference](references/form.md).
 
-Add native search UI with `.searchable`. Use `.searchScopes` for multiple modes and `.task(id:)` for debounced async results.
+## Search
 
 ```swift
 @MainActor
-struct ExploreView: View {
-  @State private var searchQuery = ""
-  @State private var searchScope: SearchScope = .all
-  @State private var isSearching = false
-  @State private var results: [SearchResult] = []
-
-  var body: some View {
-    List {
-      if isSearching {
-        ProgressView()
-      } else {
-        ForEach(results) { result in
-          SearchRow(result: result)
-        }
-      }
-    }
-    .searchable(
-      text: $searchQuery,
-      placement: .navigationBarDrawer(displayMode: .always),
-      prompt: Text("Search")
-    )
-    .searchScopes($searchScope) {
-      ForEach(SearchScope.allCases, id: \.self) { scope in
-        Text(scope.title)
-      }
-    }
-    .task(id: searchQuery) {
-      await runSearch()
+struct RecipeSearch: View {
+    @State private var query = ""
+    @State private var scope: RecipeScope = .all
+    @State private var matches: [Recipe] = []
+    @State private var isSearching = false
+
+    var body: some View {
+        List(matches) { RecipeRow(recipe: $0) }
+            .overlay {
+                if isSearching { ProgressView() }
+                else if query.isEmpty { ContentUnavailableView("Find a Recipe", systemImage: "fork.knife") }
+            }
+            .searchable(
+                text: $query,
+                placement: .navigationBarDrawer(displayMode: .always),
+                prompt: "Dishes or ingredients"
+            )
+            .searchScopes($scope) {
+                ForEach(RecipeScope.allCases) { Text($0.title).tag($0) }
+            }
+            .task(id: query) { await search() }
     }
-  }
 
-  private func runSearch() async {
-    guard !searchQuery.isEmpty else {
-      results = []
-      return
+    private func search() async {
+        guard !query.isEmpty else {
+            matches = []
+            return
+        }
+        isSearching = true
+        defer { isSearching = false }
+        try? await Task.sleep(for: .seconds(0.25))
+        guard !Task.isCancelled else { return }
+        matches = await RecipeIndex.shared.lookup(query, in: scope)
     }
-    isSearching = true
-    defer { isSearching = false }
-    try? await Task.sleep(for: .milliseconds(250))
-    results = await fetchResults(query: searchQuery, scope: searchScope)
-  }
 }
 ```
 
-Show a placeholder when search is empty. Debounce input to avoid overfetching. Keep search state local to the view. Avoid running searches for empty strings.
+`.task(id:)` cancels and restarts on every keystroke, so the short sleep acts
+as a debounce. Skip empty queries, show a placeholder when there is nothing to
+search, and let the screen own its search state rather than a shared model.
 
-## Overlay and Presentation
+## Overlays and presentation
 
-Use `.overlay(alignment:)` for transient UI (toasts, banners) without affecting layout.
+`.overlay(alignment:)` shows transient UI such as toasts and banners without
+moving anything else.
 
 ```swift
-struct AppRootView: View {
-  @State private var toast: Toast?
-
-  var body: some View {
-    content
-      .overlay(alignment: .top) {
-        if let toast {
-          ToastView(toast: toast)
-            .transition(.move(edge: .top).combined(with: .opacity))
-            .onAppear {
-              Task {
-                try? await Task.sleep(for: .seconds(2))
-                withAnimation { self.toast = nil }
-              }
+struct SaveConfirmation: ViewModifier {
+    @Binding var toast: String?
+
+    func body(content base: Content) -> some View {
+        base.overlay(alignment: .top) {
+            if let toast {
+                Text(toast)
+                    .padding()
+                    .background(.thinMaterial, in: Capsule())
+                    .transition(.opacity.combined(with: .move(edge: .top)))
+                    .task {
+                        try? await Task.sleep(for: .milliseconds(2000))
+                        withAnimation { self.toast = nil }
+                    }
             }
         }
-      }
-  }
+    }
 }
 ```
 
-Prefer overlays for transient UI rather than embedding in layout stacks. Use transitions and short auto-dismiss timers. Keep overlays aligned to a clear edge (`.top` or `.bottom`). Avoid overlays that block all interaction unless explicitly needed. Don't stack many overlays; use a queue or replace the current toast.
-
-**fullScreenCover:** Use `.fullScreenCover(item:)` for immersive presentations that cover the entire screen (media viewers, onboarding flows).
-
-## Common Mistakes
-
-1. Using non-lazy stacks for large collections -- causes all children to render immediately
-2. Placing `GeometryReader` inside lazy containers -- defeats lazy loading
-3. Using array indices as `ForEach` IDs -- causes incorrect diffing and UI bugs
-4. Nesting scroll views of the same axis -- causes gesture conflicts
-5. Heavy custom layouts inside `List` rows -- use `ScrollView` + `LazyVStack` instead
-6. Missing `.contentShape(Rectangle())` on tappable rows -- tap area is text-only
-7. Hard-coding frame dimensions for sheets -- use `.presentationSizing` instead
-8. Running searches on empty strings -- always guard against empty queries
-9. Mixing `List` and `ScrollView` in the same hierarchy -- gesture conflicts
-10. Using `.pickerStyle(.segmented)` for large option sets -- use menu or inline styles
-11. Hard-coding `spacing:` on stacks and grids by default -- omit to get platform-adaptive spacing; only specify for intentional tight (0-4pt) or wide gaps
-
-## Review Checklist
-
-- [ ] `LazyVStack`/`LazyHStack` used for large or dynamic collections
-- [ ] Stable `Identifiable` IDs on all `ForEach` items (not array indices)
-- [ ] No `GeometryReader` inside lazy containers
-- [ ] `List` style matches context (`.plain` for feeds, `.insetGrouped` for settings)
-- [ ] `Form` used for structured input screens (not custom stacks)
-- [ ] `.searchable` debounces input with `.task(id:)`
-- [ ] `.refreshable` added where data source supports pull-to-refresh
-- [ ] Overlays use transitions and auto-dismiss timers
-- [ ] `.contentShape(Rectangle())` on tappable rows
-- [ ] `@FocusState` manages keyboard focus in forms
-- [ ] Stack/grid `spacing:` omitted unless a specific value is required
+- Prefer an overlay to inserting a banner into a stack; animate it in and out
+  and dismiss it after a short time.
+- Pin it to one clear edge (`.top` or `.bottom`).
+- Do not block all interaction unless the moment requires it.
+- Show one toast at a time: replace or queue, never pile them up.
+- `.fullScreenCover(item:)` is for immersive screens such as media viewers or
+  onboarding.
+
+## Common mistakes
+
+- Plain stacks for big collections: everything renders up front.
+- `GeometryReader` inside lazy containers: laziness is lost.
+- Array indices as `ForEach` ids: wrong diffs and glitchy updates.
+- Nested scroll views on the same axis: competing gestures.
+- Heavy custom row layouts in `List`: use `ScrollView` with `LazyVStack`.
+- Missing `.contentShape(Rectangle())`: only the text responds to taps.
+- Fixed frames on sheets: use `.presentationSizing` (iOS 18) instead.
+- Searching with an empty string: guard it.
+- `List` and `ScrollView` mixed in one hierarchy: gesture conflicts.
+- Segmented pickers with many options: use menu or inline.
+- `spacing:` hard-coded everywhere: leave it out so the platform picks
+  adaptive spacing, and set it only for deliberately tight (0 to 4 pt) or wide
+  gaps.
+- Swipe actions added to rows outside a `List`: they never appear.
+
+## Review checklist
+
+- [ ] Large or dynamic collections use lazy stacks or `List`
+- [ ] Every `ForEach` item has a stable `Identifiable` id
+- [ ] No `GeometryReader` in lazy containers
+- [ ] List style matches the content: `.plain` feed, `.insetGrouped` settings
+- [ ] Structured input uses `Form`, not hand-built stacks
+- [ ] `.searchable` work is debounced with `.task(id:)`
+- [ ] `.refreshable` is present where the data can be reloaded
+- [ ] Swipe actions sit on `List` rows, with the safe action first on full swipe
+- [ ] Overlays animate in and dismiss themselves
+- [ ] Tappable rows have `.contentShape(Rectangle())`
+- [ ] `@FocusState` drives keyboard focus in forms
+- [ ] `spacing:` appears only where a specific value is needed
 
 ## References
 
-- Grid patterns: [references/grids.md](references/grids.md)
-- List and section patterns: [references/list.md](references/list.md)
-- ScrollView and lazy stacks: [references/scrollview.md](references/scrollview.md)
-- Form patterns: [references/form.md](references/form.md)
-- Architecture and state management: see `swiftui-patterns` skill
-- Navigation patterns: see `swiftui-navigation` skill
+- [Grids](references/grids.md): grid types, columns, cell sizing, selection, performance
+- [Lists](references/list.md): feeds with scroll-to-top, settings lists, edge effects
+- [Scroll views](references/scrollview.md): lazy content, `ScrollPosition`, iOS 26 edge effects, `safeAreaBar`
+- [Forms](references/form.md): settings forms, modal forms with validation