skills.rest
DFly7
DFly7COMMUNITY
Explore all skills by this author →
GitHub

swiftui-layout-components

Create SwiftUI layouts for lists, grids, forms, search, and overlays.

Updated Mar 31, 2026
Search Tags:#search#forms#swiftui#layouts#lists#overlays#grids
One-click install
npx skills add https://github.com/DFly7/iOS-FastAPI-Supabase-AI --skill swiftui-layout-components-dfly7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-layout-components
Source: https://github.com/DFly7/iOS-FastAPI-Supabase-AI/tree/main/.agents/skills/swiftui-layout-components
Command: npx skills add https://github.com/DFly7/iOS-FastAPI-Supabase-AI --skill swiftui-layout-components-dfly7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a concise set of patterns and guardrails for building consistent, accessible, and performant SwiftUI layouts so teams avoid common UI pitfalls and fragile implementations across lists, grids, forms, and overlays.

Core Features & Use Cases

  • Lazy vs. non-lazy stacks: guidance on when to use VStack/HStack/ZStack versus LazyVStack/LazyHStack for performance.
  • Grid and gallery patterns: adaptive and fixed column strategies, aspect ratio sizing, and selection affordances for media galleries and icon pickers.
  • List and feed patterns: sectioning, refreshable feeds, scroll-to-id, list styling, and tactile row interactions for timeline and settings screens.
  • ScrollView and ScrollViewReader: programmatic scrolling, safeAreaInset for input bars, and iOS 26 scroll edge effects for modern visuals.
  • Form and controls: structured input patterns, validation, focus management, and control usage for settings and data-entry screens.
  • Searchable and overlays: debounced search tasks, search scopes, and transient overlay patterns (toasts, banners, fullScreenCover) with transition and auto-dismiss guidance.
  • Review checklist & pitfalls: actionable checklist and common mistakes to catch performance, accessibility, and gesture conflicts early.

Quick Start

Create a SwiftUI view for an iOS 26+ app that displays a searchable List feed with pull-to-refresh, includes a LazyVGrid gallery section, and presents a Form-based settings sheet following the provided checklist.

Frequently Asked Questions about swiftui-layout-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a SwiftUI List feed with pull-to-refresh and a LazyVGrid gallery section?▼

Build performant SwiftUI layouts by combining refreshable List sections for feeds with adaptive LazyVGrid column strategies for galleries, ensuring stable ForEach identities throughout the view hierarchy.

When should I use lazy versus non-lazy stacks in SwiftUI layouts?▼

Use lazy stacks like LazyVStack in SwiftUI layouts for long dynamic feeds to defer view rendering, and use standard VStack or HStack for small static UI where instant full rendering is preferred.

What is the best way to implement debounced search with .searchable in SwiftUI?▼

Implement debounced search with .searchable in SwiftUI by attaching debounced tasks to search text changes, utilizing search scopes to filter results across feeds and settings interfaces efficiently.

Does this SwiftUI layout approach work with iOS 17 or only iOS 26?▼

This SwiftUI layout approach targets iOS 26+ apps but remains backward-compatible to iOS 17, supporting feeds, settings screens, media galleries, and modern scroll edge effects across both versions.

How do I manage Form validation and focus in SwiftUI data-entry screens?▼

Manage Form validation and focus in SwiftUI data-entry screens by applying structured input patterns, control usage guidelines, and focus management techniques to ensure accessible user interactions.

Why do my SwiftUI gesture conflicts happen with transient overlays like toasts?▼

SwiftUI gesture conflicts with transient overlays like toasts happen when transition and auto-dismiss patterns are not properly configured, requiring careful overlay management to avoid tactile interaction clashes.

Related Skills

Explore More Software Engineering Skills→
sjunglingsjungling
13

ios-swift-expert

Provide expert guidance for Swift, SwiftUI, UIKit, and Xcode development.

Community
Basic
DFly7DFly7

swiftui-liquid-glass

Implement SwiftUI Liquid Glass effects with glassEffect and GlassEffectContainer for iOS 26+ apps.

Community
Intermediate
Roy-wonjiRoy-wonji

swiftui-layout-components

Select SwiftUI layout and component patterns for iOS screens.

Community
Intermediate
NBXXFNBXXF
6

xxf-reusable

Automate type-safe registration and dequeuing of UITableView and UICollectionView cells.

Community
Intermediate