web3-frontend
Skill1 starsChanged 8 months agoMITView on GitHub
Production-grade dApp frontend engineering in Next.js 16 (App Router) with wagmi v2, viem, and RainbowKit. Covers Server vs Client Component boundaries, SSR-safe wagmi config with cookie hydration, on-chain reads (single, multicall, server-side), transaction lifecycle UX, ENS, network guards, SIWE auth, ABI codegen, Next.js 16 cache directives ('use cache', cacheLife, cacheTag), account abstraction, and Web3 anti-patterns. Use when building dApps, wallet integrations, DeFi or NFT interfaces, transaction flows, multi-chain UIs, or any blockchain-connected Next.js frontend, or when the user mentions wagmi, viem, RainbowKit, ConnectKit, SIWE, MetaMask, WalletConnect, useReadContract, useWriteContract, ERC-20, ERC-721, ERC-4337, or dApp UX.
1 other project uses a version of this.
Adopted by
Most recently taken up by
- mariano-aguero/claude-code-configtheir own version, first seen Mar 9, 2026
Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
- mariano-aguero/claude-code-config★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository33 other files it gives its agents.
- argocdSkill
- c-cpp-compilersSkill
- coding-guidelinesSkill
- devops-iac-engineerSkill
- dag-flowdSkill
- flowd-rules-authorSkill
- frontend-designSkill
- ghSkill
- grafana-dashboardsSkill
- helmSkill
- kustomizeSkill
- legalizerSkill
- lua-projectsSkill
- markdown-documentationSkill
- mermaid-diagramsSkill
- meta-cognition-parallelSkill
- podmasterSkill
- practical-haskellSkill
- rcaSkill
- researcherSkill
- security-auditSkill
- solidity-securitySkill
- svg-genSkill
- tdd-red-green-refactorSkill
- tmux-masterySkill
- tokenomics-designSkill
- ultimate-dbSkill
- ultimate-nixosSkill
- ultimate-rustSkill
- ultimate-web3Skill
- web3-testingSkill
- web3-whitepaperSkill
- ziglangSkill
The file
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 4 are distinctive, and 2 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 12
Read these before doing anything else.
- Distinctive: line 15
Read at most 2 reference files per turn: Use the routing table to pick.
- Distinctive: line 18
Prefer tables and bullet lists over prose: when explaining choices, lifecycles, or trade-offs.
- Very specific: line 39
Use cookie-based wagmi storage in SSR Next.js apps: Default localStorage storage causes hydration mismatches.
- Very specific: line 40
Render disconnected state by default on SSR: Never branch on isConnected server-side.
- Distinctive: line 58
If the user explicitly chose another stack, do not argue.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Web3 Frontend (Next.js 16 + wagmi v2)
Routing-first skill. The body is intentionally thin; depth lives in reference/. Open only the files you actually need to answer the question.
Token economy rules for the agent
Read these before doing anything else. They cut answer cost by 3-5x without losing quality.
- Do not inline boilerplate the user already has access to. Cite the reference path (e.g.
reference/setup.md#wagmi-config) and write only the diff or the new logic. - Read at most 2 reference files per turn. Use the routing table to pick. If a task spans more, ask the user which surface matters first.
- Never reproduce ABIs in chat. Tell the user to run
wagmi generate(seereference/abi.md) and import typed ABIs. - Never paste full provider trees. Show only the lines that change.
- Prefer tables and bullet lists over prose when explaining choices, lifecycles, or trade-offs.
- Verify version-specific APIs via Context7 for wagmi, viem, Next.js, RainbowKit, ConnectKit, and SIWE before quoting hook names or directives. Treat any pre-2026 syntax in your training data as suspect.
Routing table
| Task | File |
| Install, providers, wagmi config, SSR cookie storage | reference/setup.md |
useReadContract, multicall, server-side viem reads, event watching | reference/reading.md |
| Transactions: signature -> mining -> receipt, error parsing, gas, AA | reference/writing.md |
| Connect button, ENS, network guard, account-change handling | reference/wallet-ux.md |
| Next.js 16 cache directives, hydration boundary, prefetching on-chain data | reference/ssr-caching.md |
| SIWE login, session cookies, NextAuth integration | reference/auth.md |
wagmi cli codegen, address tables per chainId, typed ABIs | reference/abi.md |
| Footguns: hydration, FOUC, RPC leaks, infinite renders, race conditions | reference/anti-patterns.md |
Golden rules (non-negotiable)
These prevent the most common production failures. Internalize before reading anything else.
- Never import
wagmi,viembrowser primitives, or any wallet connector inside a Server Component. Wrap any wallet-aware UI under a'use client'boundary. - Use cookie-based wagmi storage in SSR Next.js apps. Default
localStoragestorage causes hydration mismatches. Seereference/setup.md. - Render disconnected state by default on SSR. Never branch on
isConnectedserver-side; defer wallet checks to a client effect or a guarded client component. - Never leak server-only RPC URLs through
NEXT_PUBLIC_*envs. Public RPC endpoints belong inNEXT_PUBLIC_*; private keyed RPCs belong in non-prefixed envs and are used only on the server (route handlers, Server Actions, RSC fetches that proxy to viem). - Always parse errors via wagmi's typed error classes. Show
error.shortMessageto users; never raw revert bytes or raw RPC strings. - Always link confirmed tx hashes to a block explorer scoped to the active
chainId. Hardcoded explorer URLs are a multi-chain bug. - Use
as conston every ABI literal you do not import fromviem. Type inference foruseReadContract/useWriteContractcollapses without it.
Default stack (one choice, one escape hatch)
| Concern | Default | Escape hatch |
| Wallet connection | wagmi v2 + viem | -- |
| Connect UI | RainbowKit | ConnectKit when you need a minimal headless flow |
| Chain config | viem/chains | Custom chain object for L2s not yet in viem |
| Indexing / history | The Graph | Ponder or Envio for self-hosted indexers |
| Real-time events | viem watchContractEvent (client) | WebSocket transport via webSocket() |
| Auth | SIWE + signed cookie session | NextAuth + SIWE provider for full session orchestration |
| ABI typing | wagmi cli codegen | Hand-curated as const ABI literals |
If the user explicitly chose another stack, do not argue; help them with what they have.
Decision matrix: where does this code go?
| Need | Component type | Why |
| Static layout, metadata, server-fetched REST/GraphQL | Server Component | No wallet involvement |
| Public, address-agnostic on-chain read (e.g. token total supply) | Server Component using viem createPublicClient | Cacheable, no wallet, runs on the edge or Node |
Anything that reads useAccount, useChainId, signer, or balances of the connected wallet | Client Component | Browser-only state |
| Transaction submit / sign | Client Component | Requires injected provider |
| Hybrid (server-prefetched, client-interactive) | Server Component prefetches via viem; passes data to a Client Component child | See reference/ssr-caching.md for hydration boundary pattern |
When NOT to apply this skill
- Smart contract authoring -> use
ultimate-web3. - Solidity patterns and secure fixes -> use
solidity-security. - A codebase audit, pen test, or findings report -> use
security-audit. - Smart contract testing (Hardhat/Foundry) -> use
web3-testing. - Pure design tokens, typography, color systems -> use
frontend-design. - Generic Next.js questions with no wallet/chain involvement -> use base Next.js knowledge; do not load this skill's reference files.
Companion skills
frontend-design-- visual design tokens, motion, typographyultimate-web3-- protocol architectureweb3-testing-- contract test suitessolidity-security-- contract-side hardeningsecurity-audit-- coverage-led codebase audit and findings report
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.