スキル自身の言葉で
このスキルは、Stitch プロジェクトをモジュール化された React と Vite のフロントエンドに変換したり、既存の React コンポーネントを最新の Stitch デザインに同期させたりします。Stitch の画面を基に作業するフロントエンドエンジニア向けであり、エージェントは list_tools で Stitch MCP のプレフィックスを見つけ、get_screen ですべての画面を取得し、scripts/fetch-stitch.sh を通じて HTML とスクリーンショットをダウンロードし、tailwind.config のトークンを resources/style-guide.json に抽出したうえで、AST 検証がチェックするコンポーネント、フック、モックデータを構築します。
4つの段階的なフェーズがこの順序を強制し、npm run validate は Readonly Props インターフェース、hex 値の代わりのテーマトークン、そしてモノリシックなページファイルの禁止を強制します。
生成されるもの
- 各画面についてダウンロードされたデザインアセットが .stitch/designs/{page}.html と .stitch/designs/{page}.png に保存されます。
- projectId、title、deviceType、screens マップ、Last Sync Time フィールドを保持する .stitch/metadata.json。
- 現在のプロジェクトの色、フォント、スペーシング、角丸、タイポグラフィのトークンを保持する、上書きされた resources/style-guide.json。
- src/components 内の React コンポーネント、src/hooks 内のフック、src/data/mockData.ts 内のモックデータ、それらをレンダリングする更新済みのエントリーポイント。
仕組み
- 01Stitch のネームスペースを見つける
list_tools を実行して MCP のプレフィックスを特定し、その後のすべての Stitch 呼び出しでそのプレフィックスを再利用します。
- 02すべての画面のメタデータを取得する
プロジェクト内の各画面に対して get_screen を呼び出し、デザイン JSON とそのダウンロード URL を取得します。画面を1つも省略しません。
- 03スクリプトを通じてダウンロードする
内部の fetch ツールは Google Cloud Storage に対して失敗することがあるため、ダウンロードはリダイレクトとセキュリティのハンドシェイクを処理する付属の bash スクリプトを経由します。
- 04デザイントークンを抽出する
ダウンロードした各 HTML ファイルを開き、head のスクリプトブロック内にある tailwind.config オブジェクトから色、フォント、スペーシング、角丸、タイポグラフィを読み取ります。
- 05テンプレートからコンポーネントを作成する
付属のコンポーネントテンプレートをベースとして使用し、エントリーポイントを組み込む前に、プレースホルダーのコンポーネント名のすべてのインスタンスをリネームします。