用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-blockchain --skill web3-frontend命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Master DeFi protocol development including AMMs, lending, yield, and oracles
基于 SOC 职业分类
正在显示 SKILL.md
| name | web3-frontend |
| description | Master Web3 frontend development with wallet integration, viem/wagmi, and dApp UX |
| sasmp_version | 1.3.0 |
| version | 2.0.0 |
| updated | 2025-01 |
| bonded_agent | 05-web3-frontend |
| bond_type | PRIMARY_BOND |
| atomic | true |
| single_responsibility | web3_frontend |
| parameters | {"topic":{"type":"string","required":true,"enum":["wallet","transactions","signing","hooks","errors"]},"framework":{"type":"string","default":"react","enum":["react","next","vue","vanilla"]}} |
| retry_config | {"max_attempts":3,"backoff":"exponential","initial_delay_ms":1000} |
| logging | {"level":"info","include_timestamps":true,"track_usage":true} |
Master Web3 frontend development with wallet integration, modern libraries (viem/wagmi), and production dApp patterns.
# Invoke this skill for Web3 frontend development
Skill("web3-frontend", topic="wallet", framework="react")
Connect users to Web3:
Handle blockchain interactions:
Verify user identity:
Modern patterns with wagmi:
'use client';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount } from 'wagmi';
export function WalletConnect() {
{ address, isConnected } = ();
(
);
}
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { parseEther } from 'viem';
export function MintButton() {
const { writeContract, data: hash, isPending } = useWriteContract();
const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash });
const mint = () => {
writeContract({
address: '0x...',
abi: [...],
functionName: 'mint',
args: [1n],
value: parseEther('0.08'),
});
};
return (
<button onClick={mint} disabled={isPending || isLoading}>
{isPending ? 'Confirm in wallet...' :
isLoading ? 'Minting...' :
isSuccess ? 'Minted!' : 'Mint NFT'}
</button>
);
}
import { useSignTypedData } from 'wagmi';
const DOMAIN = {
name: 'My App',
version: '1',
chainId: 1,
verifyingContract: '0x...',
};
export function useSignOrder() {
const { signTypedDataAsync } = useSignTypedData();
const sign = async (order: Order) => {
return await signTypedDataAsync({
domain: DOMAIN,
types: { Order: [...] },
primaryType: 'Order',
message: order,
});
};
return { sign };
}
export function parseError(error: unknown): string {
const msg = error instanceof Error ? error.message : String(error);
if (msg.includes('user rejected')) return 'Transaction cancelled';
if (msg.includes('insufficient funds')) return 'Insufficient balance';
if (msg.includes('execution reverted')) {
const reason = msg.match(/reason="([^"]+)"/)?.[1];
return reason || 'Transaction would fail';
}
return 'Transaction failed';
}
npm install wagmi viem @rainbow-me/rainbowkit @tanstack/react-query
// providers/Web3.tsx
import { WagmiProvider } from 'wagmi';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { config } from './config';
const queryClient = new QueryClient();
export function Web3Provider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
| Pattern | Use Case | Hook |
|---|---|---|
| Connect wallet | User auth | useAccount |
| Read data | Display balances | useReadContract |
| Write tx | Mint, transfer | useWriteContract |
| Wait for tx | Confirm state | useWaitForTransactionReceipt |
| Sign message | Auth, permit | useSignMessage |
| Pitfall | Issue | Solution |
|---|---|---|
| Hydration error | SSR mismatch | Use dynamic with ssr: false |
| BigInt serialization | JSON.stringify | Custom serializer |
| Stale data | Cache issues | Use refetchInterval |
// Ensure client-side only
import dynamic from 'next/dynamic';
const ConnectButton = dynamic(
() => import('./ConnectButton'),
{ ssr: false }
);
Check gas settings or speed up:
await wallet.sendTransaction({
...tx,
maxFeePerGas: tx.maxFeePerGas * 120n / 100n,
});
05-web3-frontendethereum-development, solidity-development| Version | Date | Changes |
|---|---|---|
| 2.0.0 | 2025-01 | Production-grade with wagmi v2, viem |
| 1.0.0 | 2024-12 | Initial release |