FreePublished on 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.

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools

See how to install

Files included (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 (original)

Review the instructions the agent will receive before you install.

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を実装する際

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

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

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

android-api-client

Free

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

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

android-architecture

Free

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

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

android-crash-analyzer

Free

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

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

android-data-layer

Free

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.

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

android-test-runner

Free

重要: ユーザーが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 セットアップ、一般的なテストパターンに対応しています。

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

android-ui-guidelines

Free

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

The English summary is being prepared. Showing the original description.

xtone/ai_development_tools3Updated Oct 16, 2026

See all skills by xtone

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/xtone/ai_development_tools --skill swiftui-components

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/xtone/ai_development_tools/tree/main/ios_development/skills/swiftui-components

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/swiftui-components/ for Claude Code, or ~/.agents/skills/swiftui-components/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: xtone/ai_development_tools
Stars: 3
Forks: 0
Category: Development
Original language: Japanese
Last updated: Oct 16, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.

Files included (12)

SKILL.md (original)

SwiftUI UIコンポーネントカタログ

ディレクトリ構成

リファレンスファイル

references/navigation.md

references/charts.md

references/scroll.md

references/media.md

references/animation.md

references/layout.md

references/tips.md

references/preview.md

references/container.md

references/theming.md

references/webview.md

バージョン対応表（概要）

使用方法

新しいUIを実装する際

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

関連スキル

Reviews

Comments

More skills from this repository

android-api-client

android-architecture

android-crash-analyzer

android-data-layer

android-test-runner

android-ui-guidelines