react-vite-dashboard

Stitch から React + Vite のダッシュボードを作成する

Stitch の画面をもとにデータ密度の高いダッシュボードを構築するフロントエンドエンジニアです。対象スタックは、React 18、Vite、TypeScript、TanStack Query、React Router、およびオンチェーン読み取り用のオプションの ethers v6 または viem です。

前提条件

• Stitch MCP の設定（セットアップガイド）
• トークンの忠実性を保つためのプロジェクト DESIGN.md（design-md スキルを参照）
• Vite + React + TypeScript のひな形（npm create vite@latest）

ワークフロー

1. MCP のプレフィックスを確認 — list_tools を実行し、Stitch のプレフィックス（例：stitch:）を確認します。
2. 画面を取得 — プロジェクト ID と画面 ID を指定して [prefix]:get_screen を実行します。
3. アセットをダウンロード — HTML とスクリーンショットを .stitch/designs/{screen}.html および .png に保存します。
4. DESIGN.md を読む — colors.*、typography.*、spacing.* を src/index.css の CSS 変数に割り当てます。
5. コンポーネントを生成 — src/components/、src/pages/、src/hooks/ に分割します。
6. データを接続 — 非同期フェッチには TanStack Query を使用し、プレゼンテーションコンポーネントは純粋に保ちます。

HTML → React の対応付け

パターン	実装
グリッド／フレックスレイアウト	Tailwind ユーティリティまたは CSS モジュールを使用し、DESIGN.md のスペーシングトークンに合わせます
カード／パネル	トークン化された border-radius と、強制カラー表示用の elevation フォールバックを指定した <section>
テーブル	セマンティックな <table> または TanStack Table を使用します。表形式データに div だけのグリッドは使用しないでください
ボタン	フォーカスリングを明示した <button type="button">（DESIGN.md でフォーカストークンが定義されていない限り、ブラウザーのデフォルトを維持します）
フォーム	<label htmlFor> + <input id> を使用し、エラーを aria-describedby で関連付けます
読み込み	スケルトンコンポーネントを使用し、フェッチ中はコンテナーに aria-busy を設定します
ウォレット接続	WalletProvider 内に分離し、生成コードに秘密鍵を埋め込まないでください

DESIGN.md の統合

/* src/index.css — example token bridge */
:root {
  --color-primary: /* from DESIGN.md colors.primary */;
  --font-body: /* typography.body-md.fontFamily */;
}

UI のリリース前に、ローカルで design.md リンターを実行します。

npx @google/design.md lint DESIGN.md

Web3 ダッシュボードの規約

• 読み取り専用のコントラクト呼び出しには、useReadContract（viem/wagmi）または ethers の Contract と TanStack Query の queryFn を使用します。
• トークン量は formatUnits でフォーマットします。設定フッターにはネットワーク名とチェーン ID を表示します。
• トランザクションエラーは平易な言葉で提示します。txHash がある場合は、ブロックエクスプローラーへのリンクを表示します。
• ガスに注意が必要なフローでは、読み取りをまとめ、レンダリングループ内で重複した eth_call を避けます。

ファイル構成

src/
├── components/     # Presentational UI from Stitch
├── pages/          # Route-level screens
├── hooks/          # useQuery wrappers, wallet hooks
├── lib/            # ABI helpers, formatters
└── styles/         # Token CSS variables

品質チェックリスト

• WCAG 2.2 AA：DESIGN.md のコンポーネントペアのコントラストがリンターに合格する
• キーボード操作が可能：フォーカス順が視覚的な順序と一致する
• レスポンシブ：幅 375px と 1280px でテストする
• リポジトリにシークレットがない：RPC URL は環境変数から取得する（VITE_* プレフィックスは公開エンドポイントにのみ使用）
• TypeScript の strict モード：コントラクト ABI に any を使用しない

Stitch ドキュメントに関する注意

stitch.withgoogle.com/docs のリンクをたどる際、相対パスでの移動が正しくリダイレクトされない場合は、完全な https://stitch.withgoogle.com/docs/... URL を使用してください。