| name | dapp-dev |
| version | 1.0.0 |
| description | Provides core architecture and best practices for building Web3 decentralised applications (dApps) using React, Next.js, Wagmi, Viem, and RainbowKit. |
dApp Development Skill
Purpose
Enforces modern frontend best practices when building Web3 user interfaces, specifically dealing with wallet connections, contract interactions, and Next.js SSR hydration constraints.
When I Activate
I automatically load when you mention:
- "dapp frontend", "web3 frontend", "wallet connect"
- "wagmi", "viem", "rainbowkit"
- "next.js web3", "react web3"
What I Enforce
- Strict Context Isolation: Wagmi, QueryClient, and RainbowKit providers must be isolated and loaded dynamically or handled with mounted states to avoid Next.js SSR hydration mismatches.
- Predictable State: Always handle
isPending (awaiting wallet signature), isConfirming (awaiting network block), and network error cases explicitly in the UI.
- Optimized Reads: Use
useReadContract and caching wherever possible. Avoid excessive looping or multiple single-query contract reads; prefer multicall.
Validation Checklist
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.
Documentation Navigation
- reference.md: Deep dive into SSR Hydration with Wagmi, API patterns, and design principles.
- examples.md: Boilerplate code for providers, wallet connection UI, and read/write contract hooks.
Note: Use this skill specifically for frontend dApp logic. If writing or testing smart contracts, refer to the smart-contract-dev skill instead.
