mcpField
A
add-component

add-component

github.com/signerlabs開発3.3k121 回インストール6 日前に更新
リポジトリ

add-component について

ShipSwift のローカルソースライブラリから、SwiftUI コンポーネントをプロジェクトに追加するスキルです。対象の特定、実装と依存ファイルのコピー、プロジェクトに合わせた調整を支援します。

主な機能

  1. 01カタログからコンポーネントを検索
  2. 02コンポーネントのソースファイルを確認
  3. 03ファイルをプロジェクトにコピー
  4. 04名前、色、データモデルを調整
  5. 05依存関係とセットアップを確認

活用シーン

  1. 01shimmer のローディング効果を追加
  2. 02チャートやアラートを組み込む
  3. 03認証またはカメラモジュールを追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/signerlabs/shipswift --skill add-component

インストール後、Claude Code で/add-componentを入力して読み込まれたか確認します。

詳細

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

ShipSwift のローカルソースライブラリから、すぐに本番環境で使える SwiftUI コンポーネントをプロジェクトに追加します。

ワークフロー

  1. コンポーネントを特定する：skills/catalog.md を読み、適切なコンポーネントを探します。よくある対応例：

    • 「shimmer」／「loading skeleton」 → SWAnimation/SWShimmer.swift
    • 「donut chart」／「pie chart」 → SWChart/SWDonutChart.swift
    • 「alert」／「popup」 → SWComponent/Feedback/SWAlert.swift
    • 「auth」／「login」 → SWModule/SWAuth/（すべてのファイル）
    • 「camera」 → SWModule/SWCamera/（すべてのファイル）

  2. ソースファイルを読む：ShipSwift/SWPackage/<path> から Swift ファイルを読みます。ファイルには完全な実装が含まれています。

  3. プロジェクトに統合する：

    • ファイルをユーザーのプロジェクトにコピーします
    • SWUtil/ がまだ存在しない場合は、それもコピーします
    • プロジェクトに合わせて名前、色、データモデルを調整します
    • +iOS／+macOS ファイルの場合は、Xcode の Build Phases でプラットフォームフィルターを設定します

  4. 確認する：必要な依存関係やセットアップ手順を確認します。

ガイドライン

  • 型には SW プレフィックスを使用します（SWDonutChart、SWTypewriter）。
  • ビューモディファイアには .sw プレフィックスを使用します（.swShimmer()、.swGlowScan()）。
  • チャートコンポーネントでは汎用的な CategoryType パターンを使用し、String の便利なイニシャライザーを用意します。
  • 内部ヘルパー型は private とし、SW プレフィックスを付けます。
  • SWAnimation/、SWChart/、SWComponent/ のコンポーネントは、それぞれ単独で完結します（単一ファイルと SWUtil）。
  • SWModule/ のモジュールは複数ファイルで構成されているため、フォルダー全体をコピーします。

コメント

Markdown 対応