swiftui_skill

Overview

This skill helps you design and build production-grade SwiftUI interfaces that match Apple-level quality across iOS, iPadOS, macOS, and visionOS. It codifies layout patterns, state-driven animation, Liquid Glass guidance, accessibility constraints, and performance rules so you ship interfaces that feel coherent and fast. Use it as a practical checklist and pattern library while implementing screens and components.

How this skill works

The skill inspects design and implementation choices against six non-negotiables: content-first layout, system component preference, state-driven UI, accessibility as a constraint, performance as a feature, and coherence over cleverness. It provides concrete layout recommendations, animation principles, Liquid Glass usage rules, component primitives to build, and a compact ADA/accessibility checklist. It flags common SwiftUI anti-patterns like work-heavy view bodies, unstable identities, and improper state ownership.

When to use it

• When designing new SwiftUI screens or migrating UIKit flows to SwiftUI
• When introducing Liquid Glass visuals or platform-specific glass effects (iOS 26+)
• When auditing accessibility (Dynamic Type, VoiceOver, Reduced Motion)
• When optimizing SwiftUI performance or debugging hitches
• When creating a component library or design token system for a SwiftUI app
• When choosing navigation structures for multiplatform apps

Best practices

• Start with a 10-line experience spec: goal, primary action, states, edge cases, platforms
• Favor system components unless you have a measured reason not to
• Design for states (loading, empty, error, offline, permissions) rather than static screens
• Keep View bodies cheap: no sorting, formatting, I/O or UUID() creation in body
• Use state-driven animations; provide Reduce Motion fallbacks and prefer springs for organic motion
• Build tokens first (spacing, radius, typography, motion, colors) and then component primitives

Example use cases

• Implement a master-detail app with NavigationSplitView for iPad/Mac, NavigationStack for deep flows
• Create a card-based dashboard using ScrollView + LazyVStack with accessible text scaling
• Add Liquid Glass controls to a floating toolbar using GlassEffectContainer and glassEffect(.interactive)
• Refactor a list to use List for large datasets and LazyVGrid for responsive galleries
• Audit an app for accessibility failures: Dynamic Type clipping, missing VoiceOver labels, touch-target violations