98.8K+ダウンロード
使い方ガイドへスキップ
react-vite-dashboard作者 Google Labs

React Vite Dashboard スキル。

UI デザイン用の Claude Code と Codex スキル：Stitch デザインを TanStack Query を使った React + Vite ダッシュボードに変換します。

  • Web & UI
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
google-labs-code/stitch-skills · plugins/stitch-build/skills/react-vite-dashboard/SKILL.mdSKILL.md
--- name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure
2026-09-14 にアップストリームファイルから読み取られた前付けとセクション見出し · 全 3,656 文字

01 できること

Claude CodeとCodexにおけるreact-vite-dashboard スキルの動作

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

Stitchの画面をReact 18、Vite、TypeScript、TanStack Query、React Routerで構築されたデータ密度の高いダッシュボードに変換するフロントエンドエンジニア向けのビルドスキル。オンチェーン読み取り用にethers v6またはviemをオプションで使用可能。

ワークフローは6つのステップで実行されます。Stitch MCPのプレフィックスを発見し、画面を取得し、HTMLとスクリーンショットを.stitch/designs/配下に保存し、DESIGN.mdを読み取って色・タイポグラフィ・スペーシングをsrc/index.css内のCSS変数にマッピングし、コンポーネントとページを生成し、プレゼンテーション用コンポーネントを純粋な状態に保ちながらTanStack Query経由でデータを結線します。マッピングテーブルはテーブル、ボタン、フォーム、ローディング、ウォレット接続の動作を固定し、ファイルはWCAG 2.2 AAの品質チェックリストで終わります。

生成されるもの

  • Stitchの画面から構築された、データレイヤーにTanStack Queryを使用する本番用のReact + Viteダッシュボード。
  • 元のデザインをリポジトリ内に.stitch/designs/{screen}.htmlおよび対応する.pngスクリーンショットとして保存したローカルコピー。
  • 責務ごとに分割されたソースツリーで、hooksにはuseQueryラッパーとウォレットフックが、libにはABIヘルパーとフォーマッターが格納されています。
プロンプト例を見る ↗

仕組み

  1. 01
    MCPプレフィックスの発見

    最初にlist_toolsを実行し、ツールが公開されているStitchのプレフィックスを記録してください。以降のすべての呼び出しはこれを基に構築されます。

  2. 02
    画面の取得

    発見したプレフィックスに対してget_screenツールを呼び出し、StitchのプロジェクトIDと画面IDの両方を渡します。

  3. 03
    DESIGN.mdトークンの橋渡し

    プロジェクトのDESIGN.mdを読み取り、その色・タイポグラフィ・スペーシングの項目をsrc/index.css内のCSS変数に変換します。

  4. 04
    生成されたUIを役割別に分割

    生成されたコードは、1つのフラットなファイルではなく、src/components、src/pages、src/hooksに配置されます。

  5. 05
    TanStack Queryでデータを配線する

    非同期フェッチはTanStack Queryを経由するため、Stitch画面から構築されたプレゼンテーションコンポーネントは純粋なままです。

02 適合性を確認

react-vite-dashboard スキルを使用するタイミング

この種類の UI デザイン作業には、Claude Code または Codex で react-vite-dashboard スキルを使用してください。適用範囲と制限は、スキル自体のファイルから取得されています。

適している場合

  • Stitch画面を、マーケティングページではなく、画面あたり多数のコンポーネントを持つデータ量の多いダッシュボードインターフェースに変換する場合。
  • ダッシュボードのデータレイヤーの残りの部分と並んで、ethers v6またはviemを介したオンチェーン読み取りが必要なWeb3フロントエンド。
  • デザインシステムがすでにDESIGN.mdに存在し、生成されるUIがそれらのトークンに忠実であり続ける必要があるチーム。

境界を知る

  • Stitch MCPが設定済みであることを前提としています。設定されていない場合のみ、このファイルは外部の設定ガイドを指します。
  • オンチェーン作業は読み取り専用のコントラクト呼び出しに限定されているため、署名や書き込みフローはこのスキルが説明する範囲外です。

提供すべきもの

  • 必要なものGoogle Stitch — SKILL.md に必須として記載されています。
  • 入力Stitch MCP の設定（セットアップガイド）
  • 入力トークンの忠実性のためのプロジェクト DESIGN.md（design-md スキルを参照）
  • 入力Vite + React + TypeScript スキャフォールド（npm create vite@latest）

03 スキルの内部

react-vite-dashboardスキルがClaude CodeとCodexに与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. テーブルはセマンティックであるべき

    表形式のデータは実際のtable要素またはTanStack Tableを使用する必要があり、div構造のみのグリッドは明示的に除外されています。

  2. ウォレットコードは分離され、鍵を含まない

    ウォレット接続はWalletProvider内に存在し、生成されるコードには秘密鍵を絶対に埋め込んではいけません。

  3. すべての入力にラベルを付け、エラーを関連付ける

    フォームはlabelのhtmlForとinputのidを対応させ、検証エラーはaria-describedbyで関連付けられ、単独で表示されることはありません。

  4. ボタンのデフォルトフォーカスリングを維持する

    ボタンはtype="button"で視覚的なフォーカスリングを持ち、DESIGN.mdでフォーカストークンが定義されていない限り、ブラウザのデフォルトが保持されます。

  5. 読み込み状態をプログラム的に通知する

    フェッチ中の画面はスケルトンコンポーネントを使用し、リクエスト実行中はコンテナにaria-busyが設定されます。

  6. ガスに敏感なフローでは読み取りをバッチ処理する

    読み取りはバッチ処理する必要があり、レンダーループから冗長なeth_callリクエストを発行してはいけません。

  7. リポジトリにシークレットを含めない

    RPC URLは環境変数から取得し、VITE_プレフィックスは公開エンドポイントのみに使用します。

04 実際に使う

Claude Code または Codex に react-vite-dashboard をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに react-vite-dashboard を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

plugins/stitch-build/skills/react-vite-dashboard/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスを文書化している場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • UIを公開する前に、design.mdリンターをローカルでDESIGN.mdに対して実行してください。
  • コントラストは、DESIGN.mdで定義されたコンポーネントペアについてWCAG 2.2 AAを満たす必要があり、リンターの通過によって検証されます。
  • キーボードナビゲーションが機能し、フォーカス順序がダッシュボードの視覚的な順序と一致している必要があります。
  • 375pxと1280pxの幅でレイアウトをテストします。
  • TypeScriptはstrictモードで実行し、コントラクトABIをanyとして型付けしてはなりません。

OpenDesignでreact-vite-dashboardをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
スキルファイル
plugins/stitch-build/skills/react-vite-dashboard/SKILL.md コンテンツチェックサムは検証時に記録されました。コミット 0337446
License
Apache-2.0 LICENSE より。
リポジトリスター数
8,304 GitHub スナップショットは 2026-09-14 に google-labs-code/stitch-skills リポジトリ全体に対して取得されました。このカタログには 12 のスキルが含まれています。react-vite-dashboard の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. 前提条件Stitch MCP、DESIGN.md、Vite React TypeScriptのスキャフォールド
  2. ワークフローMCPプレフィックスの検出からコンポーネント生成、データ接続までの6つのステップ
  3. HTML → Reactマッピングレイアウト、カード、テーブル、ボタン、フォーム、ローディング、ウォレット接続をマークアップに変換する表
  4. DESIGN.md連携DESIGN.mdトークンからのCSS変数ブリッジとdesign.mdリントコマンド
  5. Web3ダッシュボードの規約読み取り専用のコントラクト呼び出し、formatUnitsによる金額表示、平易な言葉によるトランザクションエラー、バッチ読み取り
  6. ファイル構造コンポーネント、ページ、フック、lib、スタイル用の5つのソースフォルダ
  7. 品質チェックリストWCAG 2.2 AA、キーボード順序、ブレークポイント、シークレット、strict型を対象とする5つのチェック
  8. Stitchドキュメントに関する注意相対的なドキュメントリンクが正しくリダイレクトされない場合は、絶対的なstitch.withgoogle.com URLを使用します
スキル自身による説明
Stitch デザインを、TanStack Query を使用した本番環境対応の React + Vite ダッシュボードに変換します。DESIGN.md からアクセス可能なトークンと、Web3 対応パターン（ethers/viem）を含みます。

SKILL.md のフロントマター説明文です。完全なファイルは約 3,656 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

react-vite-dashboardスキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

レイアウトにTailwindを使う必要がありますか？

いいえ。マッピング表では、DESIGN.mdのトークンに沿った間隔であれば、TailwindのユーティリティかCSSモジュールのどちらでも使用できます。

このスキルはコントラクトへの書き込みを処理しますか？

定められている規約は読み取りと結果の表示に関するものです。トランザクションエラーは平易な言葉で説明し、txHashが存在する場合はブロックエクスプローラーへリンクする必要があります。署名や書き込みフローについては説明されていません。

Stitchのドキュメントリンクについて何か特殊な点はありますか？

stitch.withgoogle.com/docsのリンクをたどる際は、完全なhttps://stitch.withgoogle.com/docs/...のURLを使用してください。相対的なナビゲーションでは正しくリダイレクトされないことがあるためです。

React Vite Dashboard

実際の UI デザインタスクで react-vite-dashboard を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから react-vite-dashboard をインポートして、上記のプロンプトを貼り付け、結果を確認する前にプランを読んでください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応