본문으로 건너뛰기
cccskills
무료GitHub에 공개

swiftui-components

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(12)

  • SKILL.md5.7 KB
  • references/animation.md9.0 KB
  • references/charts.md5.0 KB
  • references/container.md6.1 KB
  • references/layout.md7.7 KB
  • references/media.md4.7 KB
  • references/navigation.md5.6 KB
  • references/preview.md4.6 KB
  • references/scroll.md5.7 KB
  • references/theming.md2.7 KB
  • references/tips.md5.2 KB
  • references/webview.md2.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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備考
NavigationStack16+NavigationViewの後継
Swift Charts16+宣言的チャート
PhotosPicker16+権限不要の写真選択
Grid16+柔軟なグリッド
TipKit17+機能発見ヒント
scrollPosition17+スクロール位置制御
symbolEffect17+SFシンボルアニメ
#Preview17+簡易プレビュー
ContainerValues18+子→親値伝達
@Previewable18+プレビュー内@State
Liquid Glass26+新デザイン言語
WebView26+ネイティブWebView
@Animatable26+アニメーションマクロ
Chart3D26+3Dチャート

使用方法

新しいUIを実装する際

  1. 実装したい機能に対応するリファレンスファイルを参照
  2. バージョン対応表でプロジェクトのデプロイメントターゲットとの互換性を確認
  3. コード例を参考に実装

利用可能なコンポーネントを探す際

  1. バージョン対応表でデプロイメントターゲット以下のコンポーネントを確認
  2. 該当するリファレンスファイルで詳細を確認

関連スキル

  • swift-ios-migration: 移行ガイド(@Observable、Swift 6等)
  • swiftui-coding-guidelines: コーディングガイドライン
  • swiftui-ssot: 状態管理の設計

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Retrofit + OkHttpを使用したAPIクライアント実装のベストプラクティスを提供する。 「API実装」「APIクライアント」「Retrofit」「OkHttp」「ネットワーク」と言われたら使う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

Androidプロジェクトのアーキテクチャ設計を支援。プロジェクト特性に応じてMVI/MVVM/シンプルComposeから最適なパターンを提案し、パッケージ構造の設計と既存プロジェクトの分析を行う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

Firebase Crashlyticsのスタックトレースを解析し、トリアージ分類→根本原因分析→修正提案を出力するスキル。/crash-analyze コマンド、クラッシュ解析、スタックトレース分析、ANR分析、Crashlytics、クラッシュレポート、またはFirebase crashに関連するリクエストで使用される。クラッシュ対応のワークフローを標準化し、対応品質と速度を向上させる。ANR/Non-fatal/Fatal全タイプ対応。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

Android data layer implementation guide. Provides comprehensive patterns for Room Database (Entity, DAO, Migration), DataStore (Preferences), Repository layer design, and common pitfalls. Use when implementing local data storage, cache strategies, or data source integration in Android projects.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

重要: ユーザーがAndroidテスト実行をリクエストした場合、常にこのスキルを最初に使用してください。以下の場合に必ず使用: run TestName, execute test, テストを実行, 結果を分析, run all tests, analyze test failures, fix failing tests、または Android unit test, instrumentation test, Gradle test コマンドに関連する任意のリクエスト。./gradlew test や Bash コマンドを直接使用しないでください - 常にこのスキルに委譲してください。Multi-variantプロジェクト、JAVA_HOME セットアップ、一般的なテストパターンに対応しています。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

Jetpack ComposeでUIを実装する時に参照するコーディングガイドライン。 「Android UI」「Compose」「Jetpack」「画面実装」「UIコンポーネント」「レイアウト」と言われたら使う。 Android/Kotlin UI実装のベストプラクティス、アンチパターン、実装パターンを提供する。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xtone/ai_development_tools32026년 10월 16일 업데이트

xtone의 스킬 모두 보기

이 스킬의 문제 신고