swiftui-views

Implement a SwiftUI four-tab view layer with independent NavigationStacks and SwiftData @Query views.

5|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/nsnguyen/ios_app_rag_calendar --skill swiftui-views
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: swiftui-views
Source: https://github.com/nsnguyen/ios_app_rag_calendar/tree/main/.claude/skills/swiftui-views
Command: npx skills add https://github.com/nsnguyen/ios_app_rag_calendar --skill swiftui-views

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides developers to implement a fully SwiftUI-driven UI layer for the iOS 18+ planner app, ensuring Apple Human Interface Guidelines compliance and data-driven UI patterns.

Core Features & Use Cases

  • TabView-based root with four independent NavigationStacks for Today, Notes, Search, and People.
  • Reusable components like MeetingCardView, TagChipView, and PersonAvatarView for a consistent UI.
  • Data-driven views using SwiftData and @Query, with accessible, responsive layouts and dynamic type.
  • Notable patterns include modular, accessible components and navigation strategies.

Quick Start

  • Implement the four-tab SwiftUI skeleton (Today, Notes, Search, People) with independent navigation histories.
  • Build the TimelineView with a MeetingCardView row and a detailed MeetingDetailView.
  • Create NotesListView with summary previews, editing, and note navigation to NoteEditorView.
  • Implement SearchView with a query field, results list, and loading state, following the patterns in the provided example.

Frequently Asked Questions about swiftui-views

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

FAQPage Schema
How do I implement independent NavigationStacks for each tab in a SwiftUI TabView?

You build independent NavigationStacks in SwiftUI by embedding a separate NavigationStack within each tab's root view, ensuring each tab maintains its own navigation history without state loss when switching between tabs.

How do I build data-driven SwiftUI views using SwiftData and @Query?

Data-driven SwiftUI views use SwiftData with @Query to fetch and observe model changes directly within the view layer. This automatically updates the UI when underlying data changes, enabling responsive layouts and dynamic type support.

Does SwiftUI support building accessible, reusable UI components that follow Apple HIG?

SwiftUI supports building accessible, reusable UI components that follow Apple Human Interface Guidelines by leveraging native accessibility modifiers and dynamic type. Components like MeetingCardView ensure a consistent and accessible user experience.

What is the best way to structure a four-tab iOS planner app interface in SwiftUI?

The best way to structure a four-tab iOS planner app in SwiftUI is using a TabView-based root with independent NavigationStacks for Today, Notes, Search, and People. This architecture separates navigation histories and modularizes data-driven views.

Can I use SwiftData with SwiftUI NavigationStack for data-driven navigation?

Yes, you can use SwiftData with SwiftUI NavigationStack by passing @Query results to navigation destinations. This allows data-driven navigation where view transitions are bound directly to underlying model objects and SwiftData queries.