Onchainkit
alsk1992/CloddsBot
Build onchain apps with Coinbase's OnchainKit React components - wallets, swaps, NFTs, payments
Builds onchain apps with Coinbase's OnchainKit React components and TypeScript utilities: wallet connection, identity, token swaps, transactions and checkout flows.
Install OnchainKit App Builder
$ npx skills add BankrBot/skills --skill onchainkit -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install BankrBot/skills onchainkit --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/onchainkit .claude/skills/onchainkit && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .claude/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/BankrBot/skills/tree/main/onchainkitType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add BankrBot/skills --skill onchainkit -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install BankrBot/skills onchainkit --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/onchainkit .agents/skills/onchainkit && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .agents/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add BankrBot/skills --skill onchainkit -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install BankrBot/skills onchainkit --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/onchainkit .cursor/skills/onchainkit && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .cursor/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/BankrBot/skills.git --path onchainkit--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add BankrBot/skills --skill onchainkit -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install BankrBot/skills onchainkit --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/onchainkit .gemini/skills/onchainkit && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .gemini/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install BankrBot/skills onchainkitInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add BankrBot/skills --skill onchainkit -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/onchainkit .github/skills/onchainkit && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .github/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add BankrBot/skills --skill onchainkit -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install BankrBot/skills onchainkit --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BankrBot/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/onchainkit .opencode/skills/onchainkit && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "onchainkit" agent skill from https://github.com/BankrBot/skills/tree/main/onchainkit into .opencode/skills/onchainkit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "onchainkit", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
onchainkit- GitHub stars
- 1.2k
- Token cost
- ~2.4k tokens
- SKILL.md length
- 584 words
- Files
- 15 (incl. scripts, references, assets)
- Skills in repo
- 106
- Repo updated
- First seen
- Licence
- None found
At a glance
Builds onchain apps with Coinbase's OnchainKit React components and TypeScript utilities: wallet connection, identity, token swaps, transactions and checkout flows.
- Works in 6 steps: Wallet Connection & Management → Identity Display → Token Operations → …
- Adding wallet connect and identity display to a React app
- SKILL.md covers Overview, Quick Start, Core Capabilities and Common Workflows, plus 5 more sections
- Runs Python and JavaScript scripts from its folder; calls npm; needs NEXT_PUBLIC_CDP_API_KEY
What it does
The skill helps the agent build wallet connection, identity display, token operations, transaction building and payment checkout with OnchainKit components. Two quick-start paths exist: create a new project with `scripts/create-onchain-app.py`, or add OnchainKit to an existing one with `npm install @coinbase/onchainkit` followed by `scripts/setup-environment.py`. The skill describes the components as working on Base without a backend of your own.
Identity components show ENS names, avatars and badges, and the swap components cover ERC-20 token swaps, fiat purchases, balances and price feeds. Bundled helpers include a component generator, a setup validator, a basic app template with an example `.env.local`, and reference notes on configuration, wallet integration, token operations, examples and troubleshooting. The excerpt is cut off before the payment section ends, so later details are not described.
When your agent uses it
- Adding wallet connect and identity display to a React app
- Building a token swap or buy flow
- Creating a checkout or payment flow with onchain transactions
- Scaffolding a new onchain app
Example prompts
- “Create a new onchain app with wallet connection and ENS identity display.”
- “Add a token swap component to my existing app using OnchainKit.”
- “Build a checkout button that takes payment onchain.”
Requirements
- npm, to install `@coinbase/onchainkit`
- Python to run the scripts in `scripts/`
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- Wallet Connection & Management
- Identity Display
- Token Operations
- Transaction Building
- Payment Processing
- NFT Integration
What it can do on your machine
Read from SKILL.md and the folder at commit dc47eed. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 4 files in scripts/ (Python and JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.comonchainkit.xyzdiscord.ggx.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
NEXT_PUBLIC_CDP_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
OnchainKit App Builder loads about 2.4k tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 102 tokens; SKILL.md has 584 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 584 words (~2,379 tokens).
“Build production-ready onchain applications using Coinbase's comprehensive React component library and TypeScript utilities.”
- name
- onchainkit
Files
SKILL.md and 14 other files (scripts, references, assets) in onchainkit of BankrBot/skills.
- SKILL.md
- assets/templates/basic-app/.env.local.example
- assets/templates/basic-app/README.md
- assets/templates/basic-app/next.config.js
- assets/templates/basic-app/package.json
- catalog.json
- references/configuration.md
- references/examples.md
- references/token-operations.md
- references/troubleshooting.md
- references/wallet-integration.md
- scripts/component-generator.py
- scripts/create-onchain-app.py
- scripts/setup-environment.py
- scripts/validate-setup.py
Open the folder on GitHubat commit dc47eed
Compare with similar skills
OnchainKit App Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| OnchainKit App Builder this skillBankrBot/skills | 1.2k | — | ~2.4k | Automated safety check: Pass | None | |
| Onchainkitalsk1992/CloddsBot | 2.9k | — | ~503 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Dify Component Writing Guidelanggenius/dify | 158k | — | ~626 | Automated safety check: Pass | Custom licence | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT | |
| Formik Form PatternsChrisWiles/claude-code-showcase | 6.1k | 3 repos | ~2.1k | Automated safety check: Pass | None |
Similar skills
- Official
Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
Formik Form Patterns
ChrisWiles/claude-code-showcase
Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
More from BankrBot/skills
All 106 skills in this repoAgenticBets Prediction Markets
BankrBot/skills
Lists AgenticBets prediction markets on Base, shows odds, places UP or DOWN bets on token prices in USDC and claims winnings through the Bankr wallet API.
AI2Human Task Router
BankrBot/skills
Creates AI2Human tasks for steps that need a real person, such as manual QA or local checks, and returns a task URL the agent can track.
AZZLE V2 Task Marketplace
BankrBot/skills
Lets an agent inspect and operate AZZLE V2 tasks on Base through Bankr, from posting and claiming to funding, delivery, release and disputes, behind verified deployment pins.
B20 Console
BankrBot/skills
Inspect B20 token contract addresses on Base through B20 Console.
Capacitr
BankrBot/skills
Paste a URL or free text and get matched Polymarket / Hyperliquid / Deribit markets with Quotient edge scores.
Endaoment
BankrBot/skills
Donate to charities onchain via Endaoment. An agent skill from BankrBot/skills.
Related
Works with
Categories
Questions about OnchainKit App Builder
What does OnchainKit App Builder do?
Builds onchain apps with Coinbase's OnchainKit React components and TypeScript utilities: wallet connection, identity, token swaps, transactions and checkout flows. The skill helps the agent build wallet connection, identity display, token operations, transaction building and payment checkout with OnchainKit components.py`.
When should I use OnchainKit App Builder?
OnchainKit App Builder fits situations like: adding wallet connect and identity display to a React app; building a token swap or buy flow; creating a checkout or payment flow with onchain transactions; scaffolding a new onchain app.
How do I install OnchainKit App Builder in Claude Code?
Run `npx skills add BankrBot/skills --skill onchainkit -a claude-code`. Or copy the skill folder (onchainkit in BankrBot/skills) into .claude/skills/onchainkit in your project. Claude Code loads it when a task matches its description.
How do I install OnchainKit App Builder in Codex?
Run `npx skills add BankrBot/skills --skill onchainkit -a codex`. Or copy the skill folder (onchainkit in BankrBot/skills) into .agents/skills/onchainkit in your project. Codex loads it when a task matches its description.
Can I use OnchainKit App Builder in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add BankrBot/skills --skill onchainkit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/onchainkit, .gemini/skills/onchainkit, .github/skills/onchainkit and .opencode/skills/onchainkit in your project.
What does OnchainKit App Builder need to run?
Going by SKILL.md and its folder, OnchainKit App Builder needs Python and JavaScript for the scripts in its folder, the command-line tools its instructions call (npm) and credentials named NEXT_PUBLIC_CDP_API_KEY. Our summary lists: npm, to install `@coinbase/onchainkit`; Python to run the scripts in `scripts/`.
Does OnchainKit App Builder access the network?
SKILL.md names 4 domains. As links in the text: github.com, onchainkit.xyz, discord.gg and x.com. This is read from the text; nothing was executed.
Is OnchainKit App Builder safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does OnchainKit App Builder use?
No licence was found for OnchainKit App Builder or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does OnchainKit App Builder use?
About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.
What are the alternatives to OnchainKit App Builder?
Skills that share tags, products or a category with OnchainKit App Builder: Onchainkit (alsk1992/CloddsBot, 2.9k stars), Web Artifacts Builder (anthropics/skills, 180k stars), Dify Component Writing Guide (langgenius/dify, 158k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains OnchainKit App Builder?
BankrBot (a GitHub organization) maintains it in BankrBot/skills, which has 1,202 GitHub stars. The repository holds 106 skills in this directory. The repository was last updated on October 5, 2026.
Source: BankrBot/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.