vechain-kit

VeChain Kit スキル

重要なルール

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

対象範囲

このスキルは、VeChain Kit と dapp-kit のパッケージに特化して使用します。

• VeChain Kit：インストール、セットアップ、設定、Privy との統合
• dapp-kit：React を使わない構成や最小限のセットアップ向けの軽量なウォレット接続
• ウォレット接続、ソーシャルログイン（メール、Google、パスキー）、スマートアカウント
• 事前構築済み UI コンポーネント（WalletButton、TransactionModal）
• フック（useWallet、useSendTransaction、useCallClause、トークン／ドメイン／オラクル用フック）
• テーマ設定と Privy のセットアップ
• react-i18next による i18n：双方向の言語同期（Kit ↔ ホストアプリ）、不足または未使用の翻訳キーを検出する pre-commit／ESLint

一般的なフロントエンドのパターン（React Query、Turborepo、状態管理、Chakra UI、トランザクション UX）については、frontend スキルを参照してください。

デフォルトのスタック

レイヤー	デフォルト	代替
フロントエンド	@vechain/vechain-kit	@vechain/dapp-kit-react（軽量／React を使わない構成向け）
Node	Node 20 LTS（nvm で管理）	--

作業手順

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

依存関係をインストールしたり、コマンドを実行したりする前に、次の操作を行います。

• プロジェクトのルートに .nvmrc があるか確認します。ある場合は、nvm use を実行します。
• .nvmrc がない場合は、20（Node 20 LTS）を記述したファイルを作成し、nvm use を実行します。

2. プロジェクト構成を確認する

• turbo.json がある場合 → Turborepo の規約（apps/frontend、packages/*）に従います
• Thor クライアントへのアクセスには useThor を使用します（VeChain Kit と dapp-kit v2 の両方）。useConnex はどこでも非推奨です。
• 条件付きのパターン（Chakra UI、i18n、Zustand）は、プロジェクトで使用されている場合にのみ適用します

3. 適切なライブラリを選ぶ

ユーザーへの確認が必要な場合： プロジェクトで VeChain Kit も dapp-kit も使われておらず、ユーザーから使用するライブラリが指定されていない場合は、選択する前に確認します。主な確認事項は次のとおりです。

• ソーシャルログイン（メール、Google、パスキー）が必要ですか？ → VeChain Kit
• 事前構築済みの UI モーダルやフック（WalletButton、TransactionModal、トークン用フック）が必要ですか？ → VeChain Kit
• 依存関係を最小限に抑えた軽量なウォレット専用の統合を希望しますか？ → dapp-kit
• React 以外のフレームワークを使いますか？ → dapp-kit

4. 実装前に確認する

ユーザーの依頼が曖昧な場合や、複数の方法で解決できる場合は、構築を始める前に確認します。 調査と実装は分けて行います。

5. VeChain 固有の正確性を保って実装する

• ネットワークは必ず明示します（mainnet／testnet／solo）
• ソーシャルログイン：Generic Delegator は自動的に有効になります（ユーザーはガス代を VET／VTHO／B3TR で支払います）。UX を改善するためのアプリによる委任は任意です。スマートアカウントを使用し、sendTransaction の前にデータを事前取得します。

6. 検証して成果を届ける

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

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

参照ファイル

何かを始める前に、該当するファイルを読んでください。上記の重要なルールを参照してください。

トピック	ファイル	ユーザーが次の内容に言及した場合に読む
セットアップと設定	references/kit-setup.md	VeChain Kit のインストール、プロバイダーのセットアップ、CSS フレームワーク、Tailwind、環境変数、ログイン方法、法的文書、エコシステムアプリ、よくある問題
フック	references/kit-hooks.md	useWallet、useCallClause、useSendTransaction、useBuildTransaction、useSignMessage、コントラクトの読み取り、トランザクション、VET ドメイン、NFT、ブロックチェーンフック、言語／通貨、@vechain/contract-getters
コンポーネントとモーダル	references/kit-components.md	WalletButton、TransactionModal、TransactionToast、モーダルフック、分離ビュー
ソーシャルログイン	references/kit-social-login.md	ソーシャルログイン、スマートアカウント、アカウント抽象化、Privy のセットアップ、ソーシャルログイン向けの手数料委任、DIY ソーシャルログイン
テーマ設定	references/kit-theming.md	テーマ設定、色、フォント、ボタン、ガラスエフェクト、ボトムシート、Chakra UI との互換性、webpack のフォールバック
dapp-kit	references/frontend-dappkit.md	dapp-kit、DAppKitProvider、軽量ウォレット
翻訳と Kit	references/translations-vechain-kit.md	i18n、翻訳、言語同期、VeChain Kit の言語、翻訳の不足、pre-commit、ESLint、未使用のキー