Provides core architecture and best practices for building Web3 decentralised applications (dApps) using React, Next.js, Wagmi, Viem, and RainbowKit.
Enforces modern frontend best practices when building Web3 user interfaces, specifically dealing with wallet connections, contract interactions, and Next.js SSR hydration constraints.
I automatically load when you mention:
isPending (awaiting wallet signature), isConfirming (awaiting network block), and network error cases explicitly in the UI.useReadContract and caching wherever possible. Avoid excessive looping or multiple single-query contract reads; prefer multicall.Before writing any Web3 frontend code, verify:
✅ Hydration Safe: RainbowKitProvider is mounted client-side only (via Next.js dynamic or useEffect mounted flags).
✅ Tx Lifecycle Handled: User feedback is provided for all transaction states (signing vs confirming).
✅ Type Safety: Contract ABIs are imported as const to gain full TypeScript autocomplete in Wagmi hooks.
Note: Use this skill specifically for frontend dApp logic. If writing or testing smart contracts, refer to the smart-contract-dev skill instead.