create-vechain-dapp

VeChain dApp を作成

ウォレット接続、ダークモード、GitHub Pages へのデプロイに対応した、本番環境で使用できる VeChain dApp をスキャフォールドします。

重要なルール

1. 最初に参照ファイルを読むこと。 ユーザーが選んだモードに基づいて、ファイルを作成する前に適切な参照ファイルを読んでください。スキルが有効になっていることをユーザーが確認できるよう、どのファイルを読むか簡潔に伝えてください。
2. 必ず shared.md を読むこと — 両方のモードで使用するソースコードのテンプレートが含まれています。
3. ファイルを書き込む前に、すべてのテンプレート内のプレースホルダーをすべて置き換えてください。詳しくは「変数の置換」を参照してください。
4. コンテキストの圧縮や喪失の後は、参照ファイルの一覧と作業手順を再確認するため、この SKILL.md を読み直してください。

スタック

レイヤー	テクノロジー
フレームワーク	Next.js 14（App Router、静的エクスポート）
UI	Chakra UI v3、next-themes
ウォレット	@vechain/vechain-kit（VeWorld + WalletConnect）
状態管理	React Query
コントラクト	Hardhat + @vechain/sdk-hardhat-plugin + OpenZeppelin UUPS（モノレポのみ）
ビルド	Turborepo（モノレポのみ）
デプロイ	GitHub Actions 経由の GitHub Pages
Node	20 LTS

作業手順

フェーズ 1 — 要件の収集

ユーザーに質問します（利用できる場合は構造化された質問を使用してください）。

1. プロジェクト名 — kebab-case（例：my-vechain-dapp）
2. モード — standalone（フロントエンドのみ）または monorepo（Turbo + コントラクト）
3. ネットワーク — test または main（デフォルト：test）
4. 対象ディレクトリ — プロジェクトを作成する場所（デフォルト：現在のディレクトリ）

フェーズ 2 — スキャフォールド

適切な参照ファイルを読み、すべてのファイルを作成します。

Standalone モード：

1. references/shared.md を読む
2. references/standalone.md を読む
3. {{TARGET_DIR}}/{{PROJECT_NAME}}/ にファイルを作成する

Monorepo モード：

1. references/shared.md を読む
2. references/monorepo.md を読む
3. フロントエンドのファイルを {{TARGET_DIR}}/{{PROJECT_NAME}}/apps/frontend/ に作成する
4. その他のファイルをモノレポのルートおよび packages/ 内に作成する

変数の置換

すべてのテンプレート内の次のプレースホルダーを置き換えます。

プレースホルダー	値
{{PROJECT_NAME}}	kebab-case のプロジェクト名
{{PROJECT_TITLE}}	UI 表示用のタイトルケースのプロジェクト名
{{NETWORK_TYPE}}	test または main

フェーズ 3 — インストールと検証

cd {{PROJECT_NAME}}
nvm use
yarn install

Standalone： yarn dev（localhost:3000）、yarn build（静的エクスポート → out/）

Monorepo： make solo-up（Thor の solo ノードを起動。Docker が必要）、続けて yarn dev（コントラクトを solo に自動デプロイ）、yarn build、yarn contracts:compile、yarn contracts:test。make solo-down で停止し、make solo-clean でリセットします。

フェーズ 4 — Git の初期化

git init && git add . && git commit -m "Initial scaffold: VeChain dApp"

成功条件

• yarn dev がエラーなしで起動する
• Navbar とウォレット接続ボタンが表示される
• ダーク／ライトモードの切り替えが機能する
• yarn build で静的出力が生成される
• .github/workflows/deploy.yml が存在する

重要なパターン

クライアント専用の VeChain Kit

VeChain Kit はサーバーサイドでは実行できません。アプリ全体のシェル（ClientApp）は、layout.tsx 内で dynamic(() => ..., { ssr: false }) を使って読み込みます。親がすでにクライアント専用であるため、ClientApp の子要素内では VeChain Kit を通常どおりインポートできます。

GitHub Pages 向けの静的エクスポート

next.config.js では output: "export" を使用し、NEXT_PUBLIC_BASE_PATH 環境変数で basePath／assetPrefix を設定できます。GitHub Pages 用の GitHub Actions では、デフォルトで /${{ github.event.repository.name }} が設定されます。カスタムドメインでは空文字列に設定してください。重要： metadata.icons と生の <img src> パスには basePath が自動で付加されないため、手動でプレフィックスを付けてください。

Chakra UI のバージョン固定

@chakra-ui/react は厳密なバージョン（現在は 3.30.0）に固定してください。VeChain Kit は内部で Chakra v2 を使用しており、v3 の新しいリリースでは VeChain Kit のボタンやモーダルのテーマ設定が動作しなくなることがあります。

プロバイダーのチェーン

ChakraProvider → ColorModeProvider → QueryClientProvider → VeChainKitProvider → App

コントラクトのアーキテクチャ（モノレポのみ）

モノレポのスキャフォールド内のすべてのコントラクトは、OpenZeppelin のアップグレード可能コントラクトとカスタムの VeChainProxy.sol（ERC1967）を使用した UUPS アップグレード可能なコントラクトです。主要なファイルは次のとおりです。

• scripts/helpers/upgrades.ts — プロキシのデプロイ／アップグレード用の主要なヘルパーです。テンプレートからそのままコピーしてください。すべてのデプロイスクリプト、アップグレードスクリプト、テストがこれに依存しています。
• contracts/VeChainProxy.sol — ERC1967 プロキシコントラクトです。そのままコピーしてください。
• scripts/deploy/deploy.ts — ヘルパーの deployProxy を使用した本番環境向けデプロイです。
• scripts/upgrade/ — バージョン管理された設定レジストリを備えた対話型 CLI アップグレードシステムです。

コントラクトのアーキテクチャ、アップグレードパターン、ストレージの安全性、セキュリティ、テストについては、smart-contract-development スキルに従ってください。これは、VeChain におけるすべての Solidity 開発パターンの信頼できるリファレンスです。

設定パッケージと自動デプロイ（モノレポのみ）

モノレポでは、各環境のコントラクトアドレスとネットワーク設定を一元管理する packages/config パッケージを使用します。主な仕組みは次のとおりです。

• local.ts は Git の追跡対象外です — 開発者ごとにソロデプロイで異なるアドレスが生成されます。初回実行時にモックが自動生成されます。
• NEXT_PUBLIC_APP_ENV で読み込む設定ファイル（local、testnet、mainnet）を指定します。
• yarn dev は solo を対象に実行し、yarn dev:testnet は testnet を対象に、yarn dev:mainnet は mainnet を対象に実行します。
• Turbo パイプラインにより、モック設定の生成 → コントラクトのコンパイル → 対象ネットワークでの確認／デプロイ → 対応する設定ファイルへのアドレスの書き込み → フロントエンドの起動、の順に処理されます。
• checkContractsDeployment.ts は、どの環境でも開発開始前に実行されます。コントラクトがデプロイされていない場合はデプロイし、正しい設定ファイル（local.ts、testnet.ts、または mainnet.ts）にアドレスを書き込みます。

VeChain Kit の統合

• VeChainKitProvider は、ネットワーク設定とウォレットオプションを使用してアプリをラップします
• vechain-kit の WalletButton は、接続／アカウントボタンを表示します
• ウォレット／コントラクトとのやり取りには useWallet、useSendTransaction、useCallClause を使用します
• 高度なパターン（フック、テーマ設定、ソーシャルログイン）については、vechain-kit スキルを参照してください
• SDK のパターン（手数料の委任、複数の Clause）については、vechain-core スキルを参照してください

リファレンスファイル

ファイルを作成する前に、対応するファイルを読んでください。上記の重要なルールを参照してください。

トピック	ファイル	次の場合に読む
共有ソースコード	references/shared.md	常に — すべてのコンポーネント／プロバイダーのテンプレートを掲載しています
スタンドアロン設定	references/standalone.md	ユーザーがスタンドアロンモード（フロントエンドのみ）を選択した場合
モノレポ設定	references/monorepo.md	ユーザーがモノレポモード（Turbo + コントラクト）を選択した場合