| name | swiftui-components |
| description | SwiftUI UI component catalog. Use when implementing NavigationStack, Swift Charts, PhotosPicker, TipKit, ScrollView enhancements, animations, layouts, WebView, Liquid Glass and other UI components. Organized by feature category with OS version compatibility info. Reference for discovering available components and implementation patterns. |
SwiftUI UIコンポーネントカタログ
iOS 16以降で利用可能なSwiftUIコンポーネントを機能別に整理したリファレンス。
ディレクトリ構成
swiftui-components/
├── SKILL.md (このファイル)
└── references/
├── navigation.md # ナビゲーション
├── charts.md # チャート・グラフ
├── scroll.md # スクロール
├── media.md # メディア・共有
├── animation.md # アニメーション
├── layout.md # レイアウト
├── tips.md # TipKit
├── preview.md # プレビュー
├── container.md # コンテナ値
├── theming.md # テーマ・デザイン
└── webview.md # WebView
リファレンスファイル
references/navigation.md
ナビゲーション関連コンポーネント：
- NavigationStack (iOS 16+): NavigationViewの後継、プログラマティックナビゲーション
- NavigationSplitView (iOS 16+): 2列/3列レイアウト対応
- NavigationPath (iOS 16+): 複数の型をサポートするナビゲーションパス
- TabView刷新 (iOS 26+): 新デザイン・アニメーション
references/charts.md
チャート・グラフ関連コンポーネント：
- Swift Charts (iOS 16+): LineMark, BarMark, AreaMark, PointMark等
- Chart3D (iOS 26+): 3Dチャートのネイティブサポート
references/scroll.md
スクロール関連コンポーネント：
- scrollPosition (iOS 17+): スクロール位置の取得・設定
- scrollTargetBehavior (iOS 17+): スナップスクロール
- containerRelativeFrame (iOS 17+): 親コンテナに対する相対サイズ指定
references/media.md
メディア・共有関連コンポーネント：
- PhotosPicker (iOS 16+): 写真ライブラリアクセス不要の写真選択
- ShareLink (iOS 16+): 標準シェア機能のSwiftUI対応
- Transferable (iOS 16+): データ転送プロトコル
references/animation.md
アニメーション関連コンポーネント：
- symbolEffect (iOS 17+): SF Symbolsアニメーション
- contentTransition (iOS 17+): テキスト・コンテンツ変更アニメーション
- phaseAnimator (iOS 17+): 複数フェーズのアニメーション
- keyframeAnimator (iOS 17+): キーフレームベースのアニメーション
- @Animatable (iOS 26+): アニメーション対応マクロ
references/layout.md
レイアウト関連コンポーネント：
- Grid (iOS 16+): 柔軟なグリッドレイアウト
- ViewThatFits (iOS 16+): スペースに応じた自動ビュー選択
- AnyLayout (iOS 16+): 動的レイアウト切り替え
- Gauge (iOS 16+): 進捗・レベル表示
- Table (iOS 16+): 表形式のデータ表示（macOS/iPadOS）
- ToolbarSpacer (iOS 26+): ツールバースペース制御
- labelIconToTitleSpacing (iOS 26+): Labelスペース調整
references/tips.md
TipKitフレームワーク：
- TipKit (iOS 17+): 機能発見ヒント表示
references/preview.md
プレビュー関連：
- #Preview (iOS 17+): プレビューマクロの簡略化
- @Previewable (iOS 18+ / Xcode 16+): プレビュー内で直接@State使用
references/container.md
コンテナ値・トランザクション：
- ContainerValues (iOS 18+): 子→親への値伝達
- Transaction (iOS 18+): アニメーション制御
references/theming.md
テーマ・デザイン：
- Liquid Glass (iOS 26+): iOS 7以来最大のUI刷新
- .liquidGlass() (iOS 26+): Liquid Glassエフェクト
- .depthLayer() (iOS 26+): 深度レイヤー設定
references/webview.md
WebView関連：
- WebView (iOS 26+): SwiftUIネイティブWebView
- Scene Bridging (iOS 26+): UIKit/AppKitとSwiftUIシーンの統合
バージョン対応表（概要）
| コンポーネント | iOS | 備考 |
|---|
| NavigationStack | 16+ | NavigationViewの後継 |
| Swift Charts | 16+ | 宣言的チャート |
| PhotosPicker | 16+ | 権限不要の写真選択 |
| Grid | 16+ | 柔軟なグリッド |
| TipKit | 17+ | 機能発見ヒント |
| scrollPosition | 17+ | スクロール位置制御 |
| symbolEffect | 17+ | SFシンボルアニメ |
| #Preview | 17+ | 簡易プレビュー |
| ContainerValues | 18+ | 子→親値伝達 |
| @Previewable | 18+ | プレビュー内@State |
| Liquid Glass | 26+ | 新デザイン言語 |
| WebView | 26+ | ネイティブWebView |
| @Animatable | 26+ | アニメーションマクロ |
| Chart3D | 26+ | 3Dチャート |
使用方法
新しいUIを実装する際
- 実装したい機能に対応するリファレンスファイルを参照
- バージョン対応表でプロジェクトのデプロイメントターゲットとの互換性を確認
- コード例を参考に実装
利用可能なコンポーネントを探す際
- バージョン対応表でデプロイメントターゲット以下のコンポーネントを確認
- 該当するリファレンスファイルで詳細を確認
関連スキル
- swift-ios-migration: 移行ガイド（@Observable、Swift 6等）
- swiftui-coding-guidelines: コーディングガイドライン
- swiftui-ssot: 状態管理の設計
