appkit — Claude Code skill: Reown AppKit wallet integration
A skill that walks your agent through Reown AppKit: wallet modal, network switching, EVM, Solana and Bitcoin. Useful when a web app needs wallet connection.
npx skills add reown-com/skills --skill appkit -a claude-codeWhat appkit does
The skill covers Reown AppKit integration in React, Next.js, Vue, Nuxt, Svelte and plain JavaScript apps. It lays out the order of work: install packages, configure an adapter, call createAppKit, wrap the app with providers, then add <appkit-button /> or use hooks to open the modal.
Adapters map to chains: Wagmi or Ethers v5/v6 for EVM, separate ones for Solana and Bitcoin. Each framework and adapter pair has its own reference file, such as references/react-wagmi.md or references/nextjs-multichain.md. Hooks like useAppKitAccount and useAppKitNetwork expose the address, connection status and network switching.
Two things bite people. Every @reown/appkit* package has to be the same version, because mixed versions fail quietly at runtime. And createAppKit runs once at module scope, not inside a component, or you get duplicate instances. Next.js and Nuxt need SSR setup. The examples ship a public projectId for localhost only; production needs your own from dashboard.reown.com. Node 18+ and a modern bundler are expected.
What it helps with
- add wallet connection to a React app
- set up multi-chain support across EVM, Solana and Bitcoin
- pick the right adapter for a chain
- debug AppKit initialization or the modal
- implement Sign In With X authentication
Example prompts for the agent
- Help me integrate Reown AppKit into a Next.js app with Wagmi
- Set up multichain: EVM, Solana and Bitcoin in one app
- The AppKit modal won't open — figure out why
How to install appkit
1Skills CLI (Vercel)
npx skills add reown-com/skills --skill appkit -a claude-code2Manually: put the files in place
~/.claude/skills/appkit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/appkit/
1Skills CLI (Vercel)
npx skills add reown-com/skills --skill appkit -a codex2Manually: put the files in place
.agents/skills/appkit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reown-com/skills --skill appkit -a cursor2Manually: put the files in place
.cursor/skills/appkit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reown-com/skills appkit2Manually: put the files in place
.github/skills/appkit/SKILL.md1Skills CLI (Vercel)
npx skills add reown-com/skills --skill appkit -a gemini-cli2Platform CLI
gemini skills install https://github.com/reown-com/skills --path skills/appkitManually: put the files in place
.devin/skills/appkit/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reown-com/skills --skill appkit -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about appkit
How do I install appkit in Claude?
Run npx skills add reown-com/skills --skill appkit -a claude-code. The skill file lands at ~/.claude/skills/appkit/SKILL.md.
What does the appkit skill do?
It guides the agent through Reown AppKit integration: installing packages, configuring an adapter, creating the AppKit instance, and wiring up hooks and components for wallet and network state.
Which frameworks does appkit support?
React, Next.js, Vue, Nuxt, Svelte and vanilla JavaScript. Next.js and Nuxt also need SSR configuration.
