القائمة
Master Web3 frontend development with wallet integration, viem/wagmi, and dApp UX
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-blockchain --skill web3-frontendيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Master blockchain fundamentals including consensus, cryptography, and distributed systems
Master DeFi protocol development including AMMs, lending, yield, and oracles
Master Ethereum development including EVM, gas optimization, and client interactions
استنادا إلى تصنيف 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 |