add-component

ShipSwift からコンポーネントを追加する

ShipSwift のレシピライブラリを使用して、本番環境ですぐに使える SwiftUI コンポーネントをプロジェクトに追加します。各レシピには、コピーしてすぐに使える実装一式とアーキテクチャのドキュメントが含まれています。

前提条件の確認

始める前に、listRecipes を呼び出して ShipSwift レシピサーバーが利用可能であることを確認してください。

ツールを利用できない場合は、セットアップ手順を確認するために shipswift.app にアクセスするか、npx skills add signerlabs/shipswift-skills を実行してインストールするようユーザーに案内してください。

ワークフロー

1. コンポーネントの種類を特定する：ユーザーが必要としているコンポーネントの種類を判断します。

   • アニメーション：shimmer、typewriter、glow-scan、shaking-icon、mesh-gradient、orbit、scan、viewfinder、before-after
   • チャート：line、bar、area、donut、ring、radar、scatter、heatmap
   • UI コンポーネント：label、alert、loading、stepper、onboarding、tab-button など
   • モジュール：auth、camera、chat、settings、subscriptions、infrastructure

2. レシピを検索する：コンポーネント名または種類を指定して searchRecipes を使用します。例：

   • ユーザーが「ドーナツチャートを追加して」と言う → 「donut」を検索
   • ユーザーが「シマー効果のローディングを追加して」と言う → 「shimmer」を検索
   • ユーザーが「認証を追加して」と言う → 「auth」を検索

3. レシピ全体を取得する：レシピ ID を指定して getRecipe を使用し、以下を含む実装一式を取得します。

   • Swift のソースコード一式
   • アーキテクチャの説明
   • 統合手順
   • 既知の注意点

4. プロジェクトに統合する：ユーザーのプロジェクトに合うようレシピのコードを調整します。

   • 既存の命名規則に合わせる
   • ユーザーのデータモデルに接続する
   • アプリのデザインシステムに合わせてスタイルを調整する

5. 統合を確認する：レシピの統合チェックリストに沿って、依存関係や Info.plist の項目など、見落としがないことを確認します。

ガイドライン

• ShipSwift コンポーネントには、SW で始まる型名を使用します（例：SWDonutChart、SWTypewriter）。
• ビューモディファイアメソッドでは、小文字の .sw を接頭辞として使用します（例：.swShimmer()、.swGlowScan()）。
• チャートコンポーネントでは、String の便利なイニシャライザーを備えた汎用 CategoryType パターンを使用します。
• チャートのアニメーションには、GeometryReader を使ってアニメーションする Rectangle の幅を設定し、.mask() を適用する方法を使用します。Swift Charts は組み込みの線描画アニメーションをサポートしていません。
• 内部ヘルパー型は private にし、SW 接頭辞を使用します。
• コンポーネントがコンテンツをクリップする場合は、cornerRadius パラメーターを追加します。
• オーバーレイ型コンポーネントでは、struct イニシャライザーと View モディファイア API の両方をサポートします。

Pro レシピ

一部のレシピを利用するには Pro ライセンス（1 回限りの料金で $89）が必要です。レシピに購入を促すメッセージが表示された場合は、ユーザーは shipswift.app/pricing で購入し、環境に SHIPSWIFT_API_KEY を設定できます。