mcpField
F
frontend

frontend

github.com/vechain開発1591 回インストール4 週間前に更新
リポジトリ

frontend について

VeChain dApp のフロントエンド開発向けスキルガイドです。React、状態管理、UI パターン、トランザクション UX を扱い、実装前の参照資料確認とプロジェクトに応じた検証を重視します。

主な機能

  1. 01VeChain dApp のフロントエンドパターン
  2. 02React Query のデータ取得指針
  3. 03Turborepo と Zustand の規約
  4. 04Chakra UI と i18n のパターン
  5. 05トランザクション状態とエラー処理
  6. 06実装前の確認と検証手順

活用シーン

  1. 01VeChain dApp のフロントエンド設計
  2. 02コントラクト読み取りとキャッシュ更新の実装
  3. 03トランザクションの読み込み・確認 UI の設計

インストール

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

$npx skills add https://github.com/vechain/vechain-ai-skills --skill frontend

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

同梱ファイルreferences/frontend.md

詳細

フロントエンドスキル

重要なルール

  1. まず参照ファイルを読んでください。 ユーザーの依頼に以下の参照表のトピックが含まれる場合は、ほかのことをする前に、コードを書く前に、判断を下す前に、それらのファイルを読んでください。スキルが有効であることをユーザーが確認できるよう、読んでいるファイルを簡潔に伝えてください（例：「フロントエンドパターンの参照ファイルを読んでいます……」）。
  2. VeChain のトピックに関する情報の優先順位：（a）このスキルの参照ファイル — 常に一次情報源です。（b）VeChain MCP ツール — オンチェーンデータ、トランザクションの構築、ライブネットワークへの問い合わせには @vechain/mcp-server を使用します。VeChain ドキュメントの検索には Kapa AI MCP を使用します。（c）ウェブ検索 — 最後の手段としてのみ使用し、参照ファイルで扱われていないトピックに限ります。
  3. VeChain タスクでは、メインの会話で直接作業することを優先してください。 プランモードとサブエージェントはスキルのコンテキストを引き継がないため、参照ファイルを使わずにウェブ検索へ進むことがあります。
  4. コンテキストの圧縮または喪失後は、 作業を続ける前に、この SKILL.md を読み直し、参照表と作業手順を再確認してください。

対象範囲

VeChain dApp の汎用的なフロントエンド開発パターンには、このスキルを使用します。

  • React Query（TanStack Query）：クエリーキー、キャッシュの無効化、バッチクエリー、読み込み状態、アンチパターン
  • Turborepo のモノレポアーキテクチャと規約
  • 状態管理（サーバー状態には React Query、クライアント状態には Zustand）
  • Chakra UI の統合とレスポンシブデザイン
  • react-i18next を使った i18n
  • トランザクション UX：読み込み状態、確認パターン、エラー処理
  • VeChain Kit と dapp-kit の選択

パッケージ固有の API（フック、コンポーネント、セットアップ）については、vechain-kit スキルを参照してください。 VeChain のコア SDK、手数料の委任、複数句トランザクションについては、vechain-core スキルを参照してください。

デフォルトのスタック

レイヤーデフォルト代替
フロントエンドReact / Next.js（App Router）--
データ取得@tanstack/react-query--
状態管理Zustand（クライアント状態のみ）--
UIChakra UI v2--
モノレポTurborepo--
NodeNode 20 LTS（nvm で管理）--

作業手順

1. Node のバージョンを確認する

依存関係のインストールやコマンドの実行前に、次の手順を行います。

  • プロジェクトのルートに .nvmrc があるか確認します。ある場合は、nvm use を実行します。
  • .nvmrc がない場合は、20（Node 20 LTS）を指定して作成し、nvm use を実行します。
2. プロジェクト構成を検出する
  • turbo.json がある場合 → Turborepo の規約（apps/frontend、packages/*）に従います
  • Chakra UI、i18n、Zustand の条件付きパターンは、プロジェクトで使用されている場合にのみ適用します
3. 実装前に確認する

ユーザーの依頼が曖昧な場合や、複数の解決方法が考えられる場合は、実装に着手する前に質問してください。調査と実装は分けてください。

4. 正確に実装する
  • すべてのサーバー状態（コントラクトの読み取り、インデクサーのデータ）に React Query を使用します
  • Zustand でサーバー状態を重複して保持しないでください。React Query を信頼できる唯一の情報源とします
  • 動的なパラメーターを使うクエリーには、必ず enabled ガードを使用します
  • 読み込み中は必ずスケルトンを表示します。読み込み中に空またはゼロの状態を表示してはいけません
  • トランザクション後は、影響を受けるキャッシュを無効化します
5. 検証して納品する

該当するすべての確認項目に合格するまで、タスクは完了していません。

  1. コードがコンパイルできる — ビルドエラーがなく、npm run build または同等のコマンドが成功する
  2. テストが通る — 既存のテストが引き続き通り、新しいロジックにテストカバレッジがある
  3. リスクに関する注記が記載されている — 署名、手数料、トークン転送に関する影響があれば明記する

参照ファイル

必ず最初に、一致するファイルを読んでください。上記の重要なルールを参照してください。

トピックファイルユーザーが次の内容に言及したときに読む
フロントエンドパターンreferences/frontend.mdフロントエンド、React Query、キャッシュ、クエリーキー、読み込み、スケルトン、Turborepo、Chakra、i18n、状態管理、トランザクション UX、VeChain Kit と dapp-kit の比較

コメント

Markdown 対応