swiftui-expert-skill

작성자: expo

SwiftUI 코드를 작성, 검토 또는 개선하며 상태 관리, 뷰 구성, 성능, macOS 전용 API, iOS 26+ Liquid…에 대한 모범 사례를 따릅니다.

npx skills add https://github.com/expo/agent-templates --skill swiftui-expert-skill

SwiftUI Expert Skill

Operating Rules

  • Consult references/latest-apis.md at the start of every task to avoid deprecated APIs
  • Prefer native SwiftUI APIs over UIKit/AppKit bridging unless bridging is necessary
  • Focus on correctness and performance; do not enforce specific architectures (MVVM, VIPER, etc.)
  • Encourage separating business logic from views for testability without mandating how
  • Follow Apple's Human Interface Guidelines and API design patterns
  • Only adopt Liquid Glass when explicitly requested by the user (see references/liquid-glass.md)
  • Present performance optimizations as suggestions, not requirements
  • Use #available gating with sensible fallbacks for version-specific APIs

Task Workflow

Review existing SwiftUI code

  • Read the code under review and identify which topics apply
  • Flag deprecated APIs (compare against references/latest-apis.md)
  • Run the Topic Router below for each relevant topic
  • Validate #available gating and fallback paths for iOS 26+ features

Improve existing SwiftUI code

  • Audit current implementation against the Topic Router topics
  • Replace deprecated APIs with modern equivalents from references/latest-apis.md
  • Refactor hot paths to reduce unnecessary state updates
  • Extract complex view bodies into separate subviews
  • Suggest image downsampling when UIImage(data:) is encountered (optional optimization, see references/image-optimization.md)

Implement new SwiftUI feature

  • Design data flow first: identify owned vs injected state
  • Structure views for optimal diffing (extract subviews early)
  • Apply correct animation patterns (implicit vs explicit, transitions)
  • Use Button for all tappable elements; add accessibility grouping and labels
  • Gate version-specific APIs with #available and provide fallbacks

Topic Router

Consult the reference file for each topic relevant to the current task:

TopicReference
State managementreferences/state-management.md
View compositionreferences/view-structure.md
Performancereferences/performance-patterns.md
Lists and ForEachreferences/list-patterns.md
Layoutreferences/layout-best-practices.md
Sheets and navigationreferences/sheet-navigation-patterns.md
ScrollViewreferences/scroll-patterns.md
Animations (basics)references/animation-basics.md
Animations (transitions)references/animation-transitions.md
Animations (advanced)references/animation-advanced.md
Accessibilityreferences/accessibility-patterns.md
Swift Chartsreferences/charts.md
Charts accessibilityreferences/charts-accessibility.md
Image optimizationreferences/image-optimization.md
Liquid Glass (iOS 26+)references/liquid-glass.md
macOS scenesreferences/macos-scenes.md
macOS window stylingreferences/macos-window-styling.md
macOS viewsreferences/macos-views.md
Deprecated API lookupreferences/latest-apis.md

Correctness Checklist

These are hard rules -- violations are always bugs:

  • @State properties are private
  • @Binding only where a child modifies parent state
  • Passed values never declared as @State or @StateObject (they ignore updates)
  • @StateObject for view-owned objects; @ObservedObject for injected
  • iOS 17+: @State with @Observable; @Bindable for injected observables needing bindings
  • ForEach uses stable identity (never .indices for dynamic content)
  • Constant number of views per ForEach element
  • .animation(_:value:) always includes the value parameter
  • iOS 26+ APIs gated with #available and fallback provided
  • import Charts present in files using chart types

References

  • references/latest-apis.md -- Read first for every task. Deprecated-to-modern API transitions (iOS 15+ through iOS 26+)
  • references/state-management.md -- Property wrappers, data flow, @Observable migration
  • references/view-structure.md -- View extraction, container patterns, @ViewBuilder
  • references/performance-patterns.md -- Hot-path optimization, update control, _logChanges()
  • references/list-patterns.md -- ForEach identity, Table (iOS 16+), inline filtering pitfalls
  • references/layout-best-practices.md -- Layout patterns, GeometryReader alternatives
  • references/accessibility-patterns.md -- VoiceOver, Dynamic Type, grouping, traits
  • references/animation-basics.md -- Implicit/explicit animations, timing, performance
  • references/animation-transitions.md -- View transitions, matchedGeometryEffect, Animatable
  • references/animation-advanced.md -- Phase/keyframe animations (iOS 17+), @Animatable macro (iOS 26+)
  • references/charts.md -- Swift Charts marks, axes, selection, styling, Chart3D (iOS 26+)
  • references/charts-accessibility.md -- Charts VoiceOver, Audio Graph, fallback strategies
  • references/sheet-navigation-patterns.md -- Sheets, NavigationSplitView, Inspector
  • references/scroll-patterns.md -- ScrollViewReader, programmatic scrolling
  • references/image-optimization.md -- AsyncImage, downsampling, caching
  • references/liquid-glass.md -- iOS 26+ Liquid Glass effects and fallback patterns
  • references/macos-scenes.md -- Settings, MenuBarExtra, WindowGroup, multi-window
  • references/macos-window-styling.md -- Toolbar styles, window sizing, Commands
  • references/macos-views.md -- HSplitView, Table, PasteButton, AppKit interop

expo의 다른 스킬

expo-upgrade
expo
프레임워크(OSS). Expo SDK 버전 업그레이드 및 의존성 문제 해결을 위한 가이드라인
apidevelopmentofficial
expo-data-fetching
expo
Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
official
android-e2e-testing
expo
Android 에뮬레이터에서 ADB를 사용하여 Expo Router 기능을 테스트합니다. 네이티브 Android 기능을 구현한 후 또는 Android에서 UI 동작을 확인할 때 사용하세요.
official
expo-dev-client
expo
EAS Build 또는 로컬에서 실제 기기에서 네이티브 코드를 테스트하기 위한 맞춤형 Expo 개발 클라이언트를 빌드합니다. 커스텀 네이티브 모듈, Apple 타겟(위젯, 앱 클립) 또는 Expo Go에 없는 타사 네이티브 코드를 사용할 때만 필요하며, 먼저 npx expo start로 Expo Go를 시도해 보세요. 자동 TestFlight 제출이 포함된 클라우드 빌드 또는 로컬 머신에서의 로컬 빌드를 지원하며, .ipa(iOS) 또는 .apk/.aab(Android) 파일을 출력합니다. eas.json에 development 프로필을 설정하여 구성해야 합니다.
official
expo-tailwind-setup
expo
Expo 앱(iOS, Android, Web)을 위한 범용 Tailwind CSS v4 스타일링. Metro 변환기를 통해 Tailwind CSS v4를 react-native-css 및 NativeWind v5와 통합하여 Babel 설정이 필요 없음. className 스타일을 네이티브 요소에 적용하는 재사용 가능한 CSS 래핑 컴포넌트 라이브러리(View, Text, ScrollView, Pressable, TextInput, Image, Link)를 제공. CSS 미디어 쿼리를 통한 플랫폼별 스타일링, @theme 블록을 통한 사용자 정의 테마 변수, Apple 시맨틱...
official
android-jetpack-compose
expo
Jetpack Compose로 Android UI를 구축하거나, remember/mutableStateOf로 상태를 관리하거나, 선언형 UI 패턴을 구현할 때 사용합니다.
official
eas-update-insights
expo
게시된 EAS 업데이트의 상태 확인: 충돌률, 설치/실행 횟수, 고유 사용자, 페이로드 크기, 임베디드와 OTA 사용자 간 분포 등
official
expo-module
expo
Expo 네이티브 모듈 및 뷰를 Expo Modules API(Swift, Kotlin, TypeScript)를 사용하여 생성하고 작성하는 가이드입니다. 모듈 정의 DSL, 네이티브…
official