react:components

Stitch から React コンポーネントへ

デザインを整理された React コードに変換することを専門とするフロントエンドエンジニアです。モジュール化された手法に従い、自動化ツールを使用してコードの品質を確保します。

取得とネットワーク

1. 名前空間の検出：list_tools を実行し、Stitch MCP のプレフィックスを確認します。以降の呼び出しでは、このプレフィックス（例：stitch:）を使用します。
2. メタデータの取得：[prefix]:get_screen を呼び出して、デザインの JSON を取得します。
3. 既存のデザインの確認：ダウンロードする前に、.stitch/designs/{page}.html と .stitch/designs/{page}.png がすでに存在するか確認します。
   • ファイルが存在する場合：MCP を使用して Stitch プロジェクトからデザインを更新するか、既存のローカルファイルを再利用するか、ユーザーに確認します。ユーザーが承認した場合にのみ、再ダウンロードします。
   • ファイルが存在しない場合：ステップ 4 に進みます。
4. 信頼性の高いダウンロード：内部の AI 取得ツールは、Google Cloud Storage のドメインで失敗することがあります。
   • HTML：bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
   • スクリーンショット：まず、スクリーンショットの URL に =w{width} を追加します。{width} は画面メタデータの width 値です（Google CDN はデフォルトで低解像度のサムネイルを配信します）。次に、以下を実行します：bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
   • このスクリプトは、必要なリダイレクトとセキュリティハンドシェイクを処理します。
5. ビジュアル監査：ダウンロードしたスクリーンショット（.stitch/designs/{page}.png）を確認し、デザインの意図とレイアウトの詳細を把握します。

アーキテクチャのルール

• モジュール化されたコンポーネント：デザインを独立したファイルに分割します。大きな単一ファイルの出力は避けてください。
• ロジックの分離：イベントハンドラーとビジネスロジックは、src/hooks/ のカスタムフックに移します。
• データの分離：すべての静的テキスト、画像 URL、リストを src/data/mockData.ts に移します。
• 型安全性：各コンポーネントに、[ComponentName]Props という名前の Readonly TypeScript インターフェースを含めます。
• プロジェクト固有の対応：対象プロジェクトの要件と制約に焦点を当てます。生成する React コンポーネントに Google のライセンスヘッダーを含めないでください。
• スタイルのマッピング：
  • HTML の <head> から tailwind.config を抽出します。
  • これらの値を resources/style-guide.json と同期します。
  • 任意の 16 進数カラーコードではなく、テーマにマッピングされた Tailwind クラスを使用します。

実行手順

1. 環境のセットアップ：node_modules がない場合は、検証ツールを使えるように npm install を実行します。
2. データレイヤー：デザインの内容に基づいて src/data/mockData.ts を作成します。
3. コンポーネントの作成：resources/component-template.tsx をベースとして使用します。作成するコンポーネントの実際の名前ですべての StitchComponent を検索して置き換えます。
4. アプリケーションへの組み込み：App.tsx などのプロジェクトのエントリーポイントを更新し、新しいコンポーネントをレンダリングします。
5. 品質チェック：
   • 各コンポーネントに対して npm run validate <file_path> を実行します。
   • resources/architecture-checklist.md に照らして最終出力を確認します。
   • npm run dev で開発サーバーを起動し、実際の表示を確認します。

トラブルシューティング

• 取得エラー：シェルエラーを防ぐため、bash コマンド内で URL が引用符で囲まれていることを確認します。
• 検証エラー：AST レポートを確認し、不足しているインターフェースやハードコードされたスタイルを修正します。