wagmi-v3

Name: wagmi-v3
Author: blockmatic

github.com/blockmatic開発1221 回インストール5 週間前に更新

リポジトリ

wagmi-v3 について

Wagmi v3でウォレットとEVMコントラクトを扱う、React・Next.js開発者向けのスキルです。ウォレット状態、アドレス検証、トランザクションのシミュレーション、SSR対応を説明します。

主な機能

01ウォレット接続状態の管理
02コントラクト読み取り・書き込みフック
03viemによるアドレス検証とトランザクション処理
04書き込み前のコントラクトシミュレーション
05Next.js SSRでのウォレット状態管理

活用シーン

01ReactアプリへのEVMウォレット統合
02コントラクトデータの読み取りとキャッシュ管理
03コントラクトトランザクションのシミュレーションと送信
04Next.jsでのウォレット状態の永続化

インストール

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

$npx skills add https://github.com/blockmatic/basilic-skills --skill wagmi-v3

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

同梱ファイルPATTERNS.mdreferences/GUIDE.md

詳細

スキル：wagmi

範囲

EVM チェーン向けの Wagmi v3 を使用した React/Next.js ウォレット統合
アドレス検証およびトランザクション構築における viem v2 を使用したコントラクト操作
トランザクション状態の管理とエラーハンドリング
コントラクト固有の操作に対応する wagmi ラッパーのカスタムフック

対象外：

Solana のフロントエンド開発
バックエンドの RPC 操作
スマートコントラクト開発

前提条件

Wagmi v3.3.2+
viem v2.44.4
React 18+ または Next.js 14+
strict モードの TypeScript v5+
TanStack Query v5+（wagmi のピア依存関係）
WalletConnect v2+（オプション。WalletConnect コネクター用）

原則

ウォレットの状態には Wagmi v3.x のフック（useAccount、useWriteContract、useReadContract、useWaitForTransactionReceipt、useSimulateContract）を使用します
アドレス検証（getAddress）とトランザクションユーティリティ（parseEther、parseGwei）には viem v2 を使用します
コントラクト固有の操作に対応する wagmi ラッパーのカスタムフックを作成します
接続状態（未接続、接続中、接続済み、再接続中）を明示的に処理します
使用前に viem の getAddress() でアドレスを検証します（Address として直接キャストしないでください）
OpenAPI 仕様から生成されたコントラクト ABI と型を使用します
コントラクトデータのキャッシュと再取得には（wagmi 経由で）TanStack Query を使用します
書き込みの前にコントラクトをシミュレーションし、検証とガス見積もりを行います
enabled フラグを使った条件付きクエリで、不要なフェッチを防ぎます
永続的なウォレット状態には Cookie ストレージを使い、SSR を適切に処理します

制約

必須

Wagmi v3.x を使用します（v1 および v2 は使用しないでください）。v1/v2 のパターンには互換性がありません
viem の getAddress() でアドレスを検証します。文字列を直接キャストしないでください
Next.js で SSR を適切に処理します（ウォレットコンポーネントでは ssr: false を指定した dynamic を使用します）

推奨

コントラクト操作用のカスタムフックを作成します
書き込みの前にコントラクトをシミュレーションします（useSimulateContract）
enabled フラグを使った条件付きクエリを使用します
SSR の状態永続化には Cookie ストレージを使用します
すべての接続状態を明示的に処理します

避けること

必要な抽象化の場合を除き、OpenAPI クライアントの生成フックをラップすること
コンポーネントで秘密鍵や機密性の高いウォレットデータを公開すること
アドレス検証を省略すること

基本情報

作者: blockmatic
リポジトリ: blockmatic/basilic-skills
カテゴリ: 開発
インストール数: 221
GitHub スター: 1

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.2M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

870.5k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。